JavaScript 中遍历对象的几中方式

前言

JavaScript 中遍历对象属性的方式有很多，其中包括Object.keys(), Object.getOwnPropertyName(), Object.getOwnPropertySymbols(), for...in 和 操作符 in。有些方法只能获取可枚举属性，有些方法既能获取实例上的属性也能原型上的属性，在探讨这些之前，我们先了解下属性的 enumerable 特性。

enumerable

在给对象设置属性时，可以设置 enumerable ，表示是否可以通过 for...in 循环返回。直接在对象上设置的属性，这个特性默认是true；调用 Object.defineProperty() 方法时，如果不指定，configurable，enumerable，writable 默认值都是false

let person = {};
Object.defineProperty(person, 'name', {
    enumerable: true,
    value: 'Echo'
})

Object.keys()

返回实例的可枚举属性组成的数组，数组中所有元素为字符串

Object.getOwnPropertyNames()

返回实例的所有属性，包括可枚举和不可枚举的。

for...in

返回实例和原型的可枚举属性

in 操作符

判断实例和原型上是否有该字符串或 Symbol 类型的属性。

总结

let obb = {a: 1};
let s = Symbol('s')
obb[s] = 100;
Object.defineProperty(obb, 'b', {
  enumerable: false,
  configurable:true,
  value:2,
  writable: true
})

Object.setPrototypeOf(obb, {c:3});
for (const key in obb) {
  console.log(key); // a,c
}

'b' in obb；// true
s in obb;  // true

console.log(Object.keys(obb)); // a
console.log(Object.getOwnPropertyNames(obb)); // a,b

用一张表格说明