JavaScript对象的遍历

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

大家好！我是前端爬楼工程师🚹，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

今天我们来说说JavaScript对象遍历，我们很容易能想到for..in

for..in

• for..in 不仅可以遍历出可枚举属性，也能遍历到[[Prototype]]上的属性（遍历属性的顺序在不同Javascript引擎可能不同）;
• for循环: 遍历数组下标，通过小标取到值;

var array = [1,2,3]
for(var i = 0; i < array.length; i++){
    console.log(array[i])
}

es5的辅助迭代器

• forEach: 遍历数组所有的值，它会忽略回调函数的返回值；
• every：一直运行直到回调函数返回false
• some: 一直运行直到回调函数返回true

every和some里有类似break的语句，会提前终止遍历

for..of

首先向访问对象的@@iterator返回一个可迭代对象，然后通过迭代器对象next方法遍历所有值； 数组、字符串、对象都能用for..of来遍历

var array = [1,2,3]
for(var v of array){
    console.log(v) // 1 2 3
}

数组有内置的@@iterator

var array = [1,2,3]
var it = array[Symbol.iterator]()
it.next() // {value:1,done:false}
it.next() // {value:2,done:false}
it.next() // {value:3,done:false}
it.next() // {value:undefined,done:true}

自定义迭代器: 我们可以通过符号属性[Symbol.iterator]来定义访问对象的迭代器, 注意这个属性是个函数

var obj = {
 a:1,
 b:2
}
Object.defineProperty(obj , Symbol.iterator, {
    enumerable: false,
    writable: false,
    configurable:true,
    value: function(){
        var o = this;
        var idx = 0
        var ks = Object.keys(o)
        return {
            next: function(){
                value: o[ks[idx++]],
                done:(idx > ks.length)
            }
        }
    }
})

我们可以通过defineProperty方法来定义迭代对象，这个是不可枚举，不可修改的。

可以通过obj[Symbol.iterator]()来获取这个可迭代对象遍历，也能使用for..of来遍历，遍历来自自定义的返回值。

总结：对象的遍历就是以上所有内容了。