茉莉兰亭


偏安一隅

JS获取对象的属性个数

  • ~1.75K 字
  • 次阅读

现有以下对象obj

1
2
3
4
5
6
7
const obj = {
    id: 1,
    key: 111,
    name: '名字',
    label: '标签',
    value: 'wdnmd'
};

Object.keys

es5中新增的方法，用来获取对象自身可枚举的属性键，组成一个数组。

1
2
const objKeyList = Object.keys(obj);  // ['id', 'key', 'name', 'label', 'value']
objKeyList.length;  // 5

Object.getOwnPropertyNames

是es5中新增的方法，用来获取对象自身的全部属性名，组成一个数组。

1
2
const objKeyList = Object.getOwnPropertyNames(obj);  // ['id', 'key', 'name', 'label', 'value']
objKeyList.length;  //5

什么是可枚举属性

对象的每一个属性都有一个描述对象，用来描述和控制该属性的行为，使用Object.getOwnPropertyDescriptor 方法来获取该描述对象，同样是针对上面的对象 obj，如下

1
2
Object.getOwnPropertyDescriptor(obj, 'name')
// 结果：{ value: '名字', writable: true, enumerable: true, configurable: true }

上面方法仅为获取，如需设置描述对象则需使用 Object.defineProperty 方法，该方法返回创建的对象

获取结果的各属性释义

  1. configurable：表示能否通过delete删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性，如果直接使用字面量定义对象，默认值为true
  2. enumerable: 表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性，如果直接使用字面量定义对象，默认值为true
  3. writable: 能否修改属性的值，如果直接使用字面量定义对象，默认值为true
  4. value: 该属性对应的值，默认为undefined

方便加深理解及 defineProperty 的使用，参考如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let testObj = {};
Object.defineProperties(testObj, {
    name: {
        value: '稀音',
        enumerable: false,  // 不可枚举
    },
    age: {
        value: 14,
        enumerable: true,   // 可枚举
    }
})

// for in 循环测试
for (let key in testObj) {
    console.log("key:" + key + ', ' + 'value:' + testObj[key])
} // key:age, value:14，仅打印了age

// 直接打印
console.log(testObj) // {age: 14, name: "稀音"} 此处 name 在浏览器 console 中为淡红色

不可枚举的属性在浏览器 console 中为淡红色，如下图
不可枚举属性的淡红色标注

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可