大清都亡了，你还用for...in...遍历对象呢

哈哈，标题党一枚。这篇文章是介绍对象的枚举性和几个用于遍历对象方法的。主要是我读《你不知道的js》时做的笔记，如有错误和疑惑请在评论区指出，查看代码高亮优化版原文请点击链接，欢迎watch和star

枚举

不太了解对象的几个属性描述符的，请阅读这篇文章。

在上面这篇文章中，我们针对enumberable特性简单说了什么是可枚举性，我们可以针对对象的某个属性设置其enumberable布尔值来控制它的可枚举性。概括的说，可枚举就是可以出现在for...in..循环中，可以在对象属性的遍历中出现。

const obj={a:1,b:2}
Object.defineProperty(obj,'b',{
    enumerable:false
})
console.log('b' in obj) // true
for(let k in obj){
    console.log(k,obj[k]) // a 1
}

如上例，b确实是存在并且可访问，但并不会出现在for...in...中。

正如标题所说，不要使用for...in...遍历对象了，所以要是用另一种方式区分属性是否可枚举：

const obj={a:1,b:2}
Object.defineProperty(obj,'b',{
    enumerable:false
})
console.log(obj.propertyIsEnumerable('b')) // false
console.log(Object.keys(obj)) // ['a']
console.log(Object.getOwnPropertyNames(obj)) ['a','b']

propertyIsEnumerable会检查给定的属性名是否存在于对象中（并非原型链上）并且可枚举。

我们也可以从上例中看出，Object.keys和getOwnPropertyNames两者的区别。前者是返回可枚举的属性，后者是返回所有的属性。

遍历

1.for...in...

它可以遍历对象的可枚举属性列表，包括原型链。使用它遍历对象是无法直接获取属性值的，需要手动绑定对象属性指向值。

2.for...of...

ES6中增加了一种遍历数组的语法，他是直接遍历值，而不是数组下标，当然如果对象本身定义了迭代器也可以遍历对象。

const arr=[1,2,3]
for(let v of arr){
    console.log(v)
}
// 1
// 2
// 3

和数组不同，普通的对象没有内置的迭代器，所以无法通过```for...of...遍历。我们可以给项便利的对象定义 @@iterator`（迭代器）。

const obj={a:1,b:2}
Object.defineProperty(obj,Symbol.iterator,{ 
    value(){
        const o=this
        let idx=0
        const keys=Object.keys(o)
        return {
            next(){
                return {
                    value:o[keys[idx++]],
                    done:(idx>keys.length)
                }
            }
        }
    }
})

也可以直接在定义对象时进行声明：

const obj={a:1,b:2,[Symbol.iterator](){
    const o=this
        let idx=0
        const keys=Object.keys(o)
        return {
            next(){
                return {
                    value:o[keys[idx++]],
                    done:(idx>keys.length)
                }
            }
        }
}}

我们来手动遍历对象：

const it=obj[Symbol.iterator]()
console.log(it.next()) // {value: 1, done: false}
console.log(it.next()) // {value: 2, done: false}
console.log(it.next()) // {value: undefined, done: true}

使用for...of...遍历

for(let v of obj){
    console.log(v)
}
// 1
// 2

3.Object.keys

如果是使用过airbnb的eslint规范的人都知道，使用for...in...遍历对象属性会报语法错误。我们通常的解决方法就是用Object.keys得到包含可枚举的属性名数组，再使用forEach进行遍历。

const obj={a:1,b:2}
const keys=Object.keys(obj)
keys.forEach(key=>{console.log(obj[key])})
// 1
// 2