美文网首页让前端飞Web前端之路前端开发那些事
大清都亡了,你还用for...in...遍历对象呢

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

作者: mytac | 来源:发表于2018-01-02 23:14 被阅读251次

    哈哈,标题党一枚。这篇文章是介绍对象的枚举性和几个用于遍历对象方法的。主要是我读《你不知道的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.keysgetOwnPropertyNames两者的区别。前者是返回可枚举的属性,后者是返回所有的属性。

    遍历

    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
    

    相关文章

      网友评论

        本文标题:大清都亡了,你还用for...in...遍历对象呢

        本文链接:https://www.haomeiwen.com/subject/gedcnxtx.html