JavaScrip对象遍历的几种方法比较

JavaScript对象属性的遍历

先看代码

const fObj = {
  fa: 'fa',
  [Symbol('fa')]: true,
}
Object.defineProperties(fObj, {
  fb: { value: true },
  fx: { get: () => 'fx' },
})
console.log('fObj 的属性描述', Object.getOwnPropertyDescriptors(fObj))
const obj = {
  a: 10,
  [Symbol('a')]: 'a',
}
Object.setPrototypeOf(obj, fObj)
Object.defineProperties(obj, {
  b: { value: 'true' },
  x: { get: () => 'x' },
})
console.log('obj 的属性描述', Object.getOwnPropertyDescriptors(obj))

console.log(Object.keys(obj)) // ["a"]
console.log(Object.getOwnPropertyNames(obj)) // ["a", "b", "x"]
console.log(Object.getOwnPropertySymbols(obj)) // [Symbol(a)]
console.log(Reflect.ownKeys(obj)) // ["a", "b", "x", Symbol(a)]

const forInKeys = []
for (const key in obj) {
  forInKeys.push(key)
}
console.log(forInKeys) // [ 'a','fa' ]

上面列出的遍历方法有

• Object.keys()
  遍历自身的可枚举属性(enumerable=ture)
• Object.getOwnPropertyNames()
  遍历自身的所有属性, 不包括key为symbol类型的属性
• Object.getOwnPropertySymbols()
  遍历key为symbol类型的属性
• Reflect.ownKeys()
  遍历自身的所有属性
• for in
  遍历自身和原型链上的可枚举属性