JavaScript 遍历对象的方法

对象的属性有哪些

在JavaScript中，遍历对象属性有许多方法，而JavaScript对象在经过ES6的扩展之后，本身也有很多种不同的属性，接下来就一起看看都有哪些属性，该如何遍历对象。

自身属性与继承的属性

在JavaScript中，利用了原型链来模拟继承，JavaScript对象有一个特点，在对象自身属性上读取不到的，会往原型链上递归查询。比如：

let obj = {
  a: 1, // 这里的是自身属性
}
obj.__proto__.b = 3; // 这里的是继承属性
obj.b; // 3

可以看到继承属性其实就是原型上的属性。

可枚举性

在JavaScript es2015之前，有一个Object.defineProperty，可用于给对象添加一个属性，同时支持添加getter/setter，或者配置对象属性的描述属性。

getter/setter

let obj = {}
Object.defineProperty(obj, 'a', {
  get() {
    return this['_a'];
  },
  set(val) {
    this['_a'] = val;
  },
})

console.log(obj.a); // undefined
obj.a = 2;
console.log(obj.a); // 2

描述属性

如果不指定三个描述属性，默认值都是false。其中enumerable就是可枚举性，true为可枚举属性，false为不可枚举属性。

let obj = {}
Object.defineProperty(obj, 'a', {
  value: 0,
  enumerable: false,
  writable: false,
  configurable: false,
})

Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript的第七种数据类型。它也可以作为对象的属性。

let obj = {
  [Symbol()]: 1,
}

遍历对象的方法

这里不明确表示返回对象属性列表的方法，凡是会读取到对象的属性的方法都考虑。并且为了方便记忆，也会根据结果按照 自身/继承属性、可枚举性、Symbol来区分。以下面的对象为示例：

let obj = {
  a: 1,
  [Symbol()]: 2,
}
obj.__proto__.b = 3;
Object.defineProperty(obj, 'c', {
  value: 4,
})

遍历自身非Symbol的可枚举属性

• JSON.stringify
• Object.keys

console.log(JSON.stringify(obj)); // {"a":1}
console.log(Object.keys(obj)); // [ 'a' ]

遍历对象自身非Symbol属性

• Object.getOwnPropertyNames

console.log(Object.getOwnPropertyNames(obj)); // [ 'a', 'c' ]

遍历对象自身Symbol属性

• Object.getOwnPropertySymbols

console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol() ]

遍历对象自身可枚举属性

在es2019中进行了更新，使得扩展运算符可以应用于对象的展开，可以将对象的属性值拷贝至对象中，无法拷贝至Array、Map、Set等其他可迭代对象中。

• 扩展运算符
• Object.assign
• Object.create

console.log({ ...obj }); // { a: 1, [Symbol()]: 2 }
console.log(Object.assign(obj)); // { a: 1, [Symbol()]: 2 }
console.log(Object.create(obj).__proto__); // { a: 1, [Symbol()]: 2 }

遍历对象自身属性

• Reflect.ownKeys

console.log(Reflect.ownKeys(obj)); //  [ 'a', 'c', Symbol() ]

遍历对象可枚举非Symbol属性

• for in

for (let key in obj) {
  console.log(key);// a b
}

总结

不好总结，上方按标题分类已经是鄙人能做得最好的分类了，也方便记忆，实在忘记的话就先收藏了，不记得再回来看看。

参考

www.bookstack.cn/read/es6-3r…