碎片化学习前端之JavaScript（for...in 和 Object.keys() 的区别）

前言

JavaScript 中遍历对象的方式主要有：for...in 和 Object.keys() 两种方式。

for...in

let obj = {
    name: 'ming',
    age: 18,
}

obj[Symbol('hello')] = 'world'

obj.__proto__ = {
    gender: 'man',
    job: 'font-end'
}

for(let key in obj) {
    console.log(key) // name, age, gender, job
}

Object.keys()

let obj = {
    name: 'ming',
    age: 18,
}

obj[Symbol('hello')] = 'world'

obj.__proto__ = {
    gender: 'man',
    job: 'font-end'
}

Object.keys(obj).forEach(key => {
    console.log(key) // name, age
})

区别

1. for...in 和 Object.keys() 均无法遍历对象属性类型为 Symbol 。

2. for...in 遍历对象会同时遍历对象的原型链上的属性，可以使用 obj.hasOwnProperty(key) 进行过滤。

3. Object.keys() 遍历对象只会遍历对象本身。

后记

对象属性为 Symbol 类型或者通过 Object.defineProperty 设置属性为不可枚举类型时，上述两种方式都无法完整遍历对象，可以通过 ES6 中新增的方法 Reflect.keys() 遍历返回对象本身的属性，包括不可枚举类型和 Symbol 类型。

Reflect.keys(obj).forEach(key => {
    console.log(key)
})