JavaScript获取对象key的几种方法和区别

目录
  • 1、Object.keys()遍历自身可以枚举属性
  • 2、Ojbect.values() /Ojject.entries()
  • 3、for-in 遍历可枚举属性prototype 属性
  • 4、hasOwnProperty 遍历可枚举属性
  • 5、getOwnPropertyNames() 返回可枚举属性和不可枚举属性
  • 6、getOwnPropertySymbols() 返回symbol类型的key属性,
  • 7、对象对key的获取方法
  • 8、对象声明/对象赋值
  • 9、对象扩展

1、Object.keys()遍历自身可以枚举属性

   let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    //setPrototypeOf()设置一个指定的对象的原型到另一个对象or NULL
    Object.keys(myColors);
    Object.keys(yourColors);
    console.log(myColors);
    console.log(yourColors);
    console.log(myColors['color1']);
    console.log(yourColors['color3']);

解析:Object.keys(myColors) 返回 myColors对象的自身可枚举属性键;Object.keys(yourColors)也是返回yourColors对象自身的可枚举属性键。setPrototypeOf()方法让yourColors继承myColors原型的属性,但是能看到并不能遍历出来。Object.keys() 是 遍历自身可以枚举属性。

2、Ojbect.values() /Ojject.entries()

返回自身可枚举属性的键值对数组:

    let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    console.log(Object.values(myColors));
    console.log(Object.entries(myColors));

3、for-in 遍历可枚举属性prototype 属性

for-in遍历对象所有的可枚举属性,包括原型。

ps:for-in和for-of的区别

①for in 遍历的是数组的索引(即键名),for of遍历的是数组元素值

②for in 得到对象的key or 数组 or 字符串的下标

③for of 得到对象的value or 数组 or 字符串的值

for in更适合遍历对象

   let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    let arrayColors = [];
    for (let key in yourColors) {
        arrayColors.push(key);
    }
    console.log(arrayColors);

解析:arrayColors 数组 包含yourColors自身属性键,也有从原型对象myColrs继承的属性。

4、hasOwnProperty 遍历可枚举属性

返回一个布尔值,只能判断自有属性是否存在,对于继承属性会返回false,因为它不查找原型链的函数

//不使用hasOwnProperty,返回自身属性和继承原型属性
    let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    for (let i in yourColors) {
        console.log(i);
    }

//使用hasOwnProperty,返回自身属性
    let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    for (let i in yourColors) {
        if (yourColors.hasOwnProperty(i)) { //加上if判断去掉原型链上的
            console.log(i)
        }
    }

5、getOwnPropertyNames() 返回可枚举属性和不可枚举属性

不包括prototype属性,不包括symbol类型的key

getOwnPropertyNames()返回一个对象自身所有的属性,包括可枚举和不可枚举属性组成的数组

//返回对象自身所有的属性,可枚举和不可枚举组成的数组,但不包括prototype属性
    let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    //定义不可枚举属性
    Object.defineProperty(yourColors, 'your', {
        enumerable: true,
        value: 6,
    })
    console.log(Object.getOwnPropertyNames(yourColors));

//返回对象自身所有的属性,可枚举和不可枚举组成的数组,但不包括Symbol类型的key
    let _item = Symbol('item') //定义Symbol数据类型
    let myColors = {
        color1: 'pink',
        color2: 'red',
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue',
        [_item]: 'mySymbol'
    };
    Object.setPrototypeOf(yourColors, myColors);
    //定义不可枚举属性
    Object.defineProperty(yourColors, 'your', {
        enumerable: true,
        value: 6,
    })
    console.log(Object.getOwnPropertyNames(yourColors));

6、getOwnPropertySymbols() 返回symbol类型的key属性,

不关心是否可枚举,返回对象自身的所有Symbol属性组成的数组

    let _item = Symbol('item') //定义Symbol数据类型
    let myColors = {
        color1: 'pink',
        color2: 'red',
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue',
        [_item]: 'mySymbol'
    };
    Object.setPrototypeOf(yourColors, myColors);
    //定义不可枚举属性
    Object.defineProperty(yourColors, 'your', {
        enumerable: true,
        value: 6,
    })
    console.log(Object.getOwnPropertySymbols(yourColors));

7、对象对key的获取方法

    function getkey() {
        let obj = {
            a: 1,
            b: 2,
            c: 3
        };

        Object.prototype.d = 4;
        Object.defineProperty(obj, 'e', {
            configurable: true,
            writable: false,
            enumerable: false,
            value: 5
        });

        Object.defineProperty(obj, 'f', {
            configurable: true,
            writable: false,
            enumerable: true,
            value: 6
        });

        const symbolg = Symbol('g');
        const symbolh = Symbol('h');

        Object.defineProperty(obj, symbolg, {
            configurable: true,
            writable: false,
            enumerable: false,
            value: 7
        });

        Object.defineProperty(obj, symbolh, {
            configurable: true,
            writable: false,
            enumerable: true,
            value: 8
        });

        console.log();
        for (let key in obj) {
            console.log('-- for-in:', key);
            if (obj.hasOwnProperty(key)) {
                console.log('-- hasOwnProperty: ', key);
            }
        }
        console.log('-- getOwnPropertyNames: ', Object.getOwnPropertyNames(obj));
        console.log('-- getOwnPropertyDescriptor: ', Object.getOwnPropertyDescriptor(obj));
        console.log('-- getOwnPropertySymbols: ', Object.getOwnPropertySymbols(obj));
        console.log('-- keys: ', Object.keys(obj));

    }
/***
 * 
 -- for-in: a
 -- hasOwnProperty:  a
 -- for-in: b
 -- hasOwnProperty:  b
 -- for-in: c
 -- hasOwnProperty:  c
 -- for-in: f
 -- hasOwnProperty:  f
 -- for-in: d
 -- getOwnPropertyNames:  (5) ["a", "b", "c", "e", "f"]
 -- getOwnPropertyDescriptor:  undefined (可获取对象属性的具体配置,总共是6个)
 -- getOwnPropertySymbols:  (2) [Symbol(g), Symbol(h)]
 -- keys:  (4) ["a", "b", "c", "f"]
 */

8、对象声明/对象赋值

/**
 * 对象声明
 * 首选 {}
 * 
 * 对象赋值
 * 首选 对象内赋值
 */
function getKey(flag) {
    return `uniqued key ${flag}`;
}
const obj = {
    id: 5,
    name: 'San Francisco',
    [getKey('enabled')]: true,  // 可变key提前声明
};

9、对象扩展

/**
 * 
 * 对象 扩展 
 * 
 * object assign 对象扩展
 * 每次执行 assign 
 * 事实上是对 object 原来对象的扩展然后并返回这个新的对象,
 * 原理的对象被修改
 * 
 * */
const row = {
    display: 'inline-block',
    height: '50px',
    lineHeight: '50px',
}
const rowLeft = Object.assign(row, {
    color: 'rgba(0,0,0,.4)'
});
const rowRight = Object.assign(row, {
    color: 'rgba(0,0,0,.6)'
});

console.log(rowLeft, rowRight, '同时都被修改为最新的assign值');

到此这篇关于JavaScript获取对象key的几种方法和区别的文章就介绍到这了,更多相关JS获取对象key内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS根据key值获取URL中的参数值及把URL的参数转换成json对象

    不废话了,直接贴代码了,通过示例一讲解JS根据key值获取URL中的参数值及把URL的参数转换成json对象,示例二讲解js获取url传递参数,具体内容请看下文 示例一: //把url的参数部分转化成json对象 parseQueryString: function (url) { var reg_url = /^[^\?]+\?([\w\W]+)$/, reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g, arr_url = reg_url.exec(url

  • js获取对象,数组所有属性键值(key)和对应值(value)的方法示例

    本文实例讲述了js获取对象,数组所有属性键值(key)和对应值(value)的方法.分享给大家供大家参考,具体如下: <script> var values=function(object) { var values = []; for (var property in object) values.push(object[property]); return values; } //写成标准的方法(数组是object的一种): function getObjectKeys(object) {

  • js遍历json对象所有key及根据动态key获取值的方法(必看)

    实例如下: var obj = {}; for(var k in obj) { //遍历对象,k即为key,obj[k]为当前k对应的值 console.log(obj[k]); } 以上这篇js遍历json对象所有key及根据动态key获取值的方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • C# 获取动态key的json对象的值案例

    问题描述 如果直接获取某个json数组中的元素将得到如下的json { "44": { "height": 25, "appeared": -70000000, "length": 44, "order": "saurischia", "vanished": -70000000, "weight": 135000 } } 这个json对象如果使用C

  • JavaScript获取对象key的几种方法和区别

    目录 1.Object.keys()遍历自身可以枚举属性 2.Ojbect.values() /Ojject.entries() 3.for-in 遍历可枚举属性prototype 属性 4.hasOwnProperty 遍历可枚举属性 5.getOwnPropertyNames() 返回可枚举属性和不可枚举属性 6.getOwnPropertySymbols() 返回symbol类型的key属性, 7.对象对key的获取方法 8.对象声明/对象赋值 9.对象扩展 1.Object.keys()

  • PHP获取对象属性的三种方法实例分析

    本文实例讲述了PHP获取对象属性的三种方法.分享给大家供大家参考,具体如下: 今天查看yii源码,发现yii\base\Model中的attribute()方法是通过反射获取对象的public non-static属性.记得以前看到的代码都是用get_object_vars()这个函数获取的,昨天查看php文档,发现还可以用foreach遍历对象属性.于是写个例子练习下. class TestClass { private $a; protected $b; public $c; public

  • JavaScript获取DOM元素的11种方法总结

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

  • JavaScript中判断对象类型的几种方法总结

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

  • JavaScript获取对象在页面中位置坐标的方法

    本文实例讲述了JavaScript获取对象在页面中位置坐标的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript" > function getXY(Obj) { var h = Obj.offsetHeight; for (var sumTop=0,sumLeft=0;Obj!=document.body;sumTop+=Obj.offsetTop,sumLeft

  • JavaScript 对象创建的3种方法

    目录 1.对象字面量 2.new 关键字创建对象 3.使用 Object.create() 创建对象 4. 使用扩展操作符:... 5.使用Object.assign()方法 6.简写属性 7.简写方法 前言: 在 JavaScript中,对象是一组有属性名和属性值组成的无序集合,对象的创建可以通过对象字面量.new 关键字 和Object.create()函数来创建. 1.对象字面量 let obj = {} // 空对象 let obj2 = {a:1, b:2} let obj3 = {"

  • JS获取地址栏参数的两种方法(简单实用)

    js获取地址栏参数的方法有两种:第一种,采用正则表达式获取地址栏参数,第二种,是比较传统的方法,在这小编给大家强烈推荐使用第一种方法,既方便有实用,具体实现过程请看下文详述. 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window

  • 原生javascript获取元素样式属性值的方法

    所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取. elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表.内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getC

  • PHP获取POST数据的几种方法汇总

    一.PHP获取POST数据的几种方法 方法1.最常见的方法是:$_POST['fieldname']; 说明:只能接收Content-Type: application/x-www-form-urlencoded提交的数据 解释:也就是表单POST过来的数据 方法2.file_get_contents("php://input"); 说明: 允许读取 POST 的原始数据. 和 $HTTP_RAW_POST_DATA 比起来,它给内存带来的压力较小,并且不需要任何特殊的 php.ini

  • Python获取对象属性的几种方式小结

    本文将简单介绍四种获取对象的方法. 假如有以下的类: class Person(object): def __init__(self, name, age): self.name = name self.age = age def __str__(self): return 'name=%s, age=%s' % (self.name, self.age) 方法一:使用属性运算符 print(xmr.name) 方法二:通过属性字典__dict__ print(xmr.__dict__['nam

随机推荐