细究 ES6 中多种遍历对象键名方式的区别

一、前言

说到遍历对象，第一反应是用 for...in..、和 Object.keys()。平常最多用的就是这俩个。

最近重新翻看《ES6 标准入门》这本书，发现遍历对象键名的方式还是挺多的。

今天借此机会，以一个基本案例，总结五种遍历对象键名的使用及其不同点。

基本案例代码

js 复制代码

const parentObj = {
  inheritedProp: 'inherited value',
}

// 给父对象添加 Symbol 属性
const inheritedSymbol = Symbol('inheritedSymbol property')
parentObj[inheritedSymbol] = 'inheritedSymbol value'

// 创建子对象，继承父对象
const childrenObj = Object.create(parentObj)

// 添加自身的可枚举属性
childrenObj.enumerableProp = 'enumerable value';

// 添加自身的不可枚举属性
Object.defineProperty(childrenObj, 'nonEnumerableProp', {
  value: 'non - enumerable value',
  enumerable: false
});

// 添加自身的 Symbol 属性
const symbolProp = Symbol('symbol property');
childrenObj[symbolProp] = 'symbol value';

二、for..in..

使用

js 复制代码

for (let key in childrenObj) {
  console.log(key, ':', childrenObj[key]) 
}

输出结果

结论

for..in..：遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）

三、Object.keys()

使用

js 复制代码

Object.keys(childrenObj).map(key => {
  console.log(key, ':', childrenObj[key])
})

输出结果

结论

Object.keys()：遍历对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名

四、Object.getOwnPropertyNames()

使用

js 复制代码

Object.getOwnPropertyNames(childrenObj).map(key => {
  console.log(key, ':', childrenObj[key]) 
})

输出结果

结论

Object.getOwnPropertyNames()：包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名

五、Object.getOwnPropertySymbols

使用

js 复制代码

Object.getOwnPropertySymbols(childrenObj).map(key => {
  console.log(key, ':', childrenObj[key]) 
})

输出结果

结论

Object.getOwnPropertySymbols：包含对象自身的所有 Symbol 属性的键名

六、Reflect.ownKeys()

使用

js 复制代码

Reflect.ownKeys(childrenObj).map(key => {
  console.log(key, ':', childrenObj[key])
})

输出结果

结论

Reflect.ownKeys()：包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举

七、总结

for...in：遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）

Object.keys()：遍历对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名

Object.getOwnPropertyNames()：包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名

Object.getOwnPropertySymbols()：包含对象自身的所有 Symbol 属性的键名

Reflect.ownKeys()：包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举