使用 for of 自定义遍历对象

关注

原创最新推荐文章于 2026-02-21 11:41:07 发布 742 阅读 AI 写同款· GEO 优化 ›

for...of 循环：遍历对象的完美解决方案可迭代对象是指实现了 @@iterator 方法的对象，该方法返回一个迭代器对象。of 循环在每次迭代时调用迭代器对象的 next() 方法，直到迭代器返回一个表示结束的特殊值（如 { done: true }）为止。它提供了一种简洁而直观的方式来迭代数组、字符串、Set、Map 等可迭代对象的元素，使得在前端开发中处理数据集合变得更加便捷。除了遍历内置的可迭代对象，我们还可以通过实现自定义的迭代器来使用 for…of 循环简化了遍历可迭代对象的过程，无需显式地操作索引或使用迭代器方法。阅读详情

obj用for of 原理：for...of...的使用需要对象有一个遍历器模仿能用forfo的对象的[symbol.iterator]

打印一下数组的结构：

可以看到我们遍历时使用的 keys entries 方法，values 方法在下面截图不够长，再进一步看查看entries方法

entries中只有一个next方法，调用next返回一个对象其中两个值 done 和 value

terator的遍历过程是这样的:

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

知道了原理我们就可以编写一个类似的遍历器在对象上，然后就可以通过 for of 遍历对象

let obj={
    name:'AA',
    age:18,
    say:function(){console.log(1);},
    [Symbol.iterator]:function(){
        let index=0
        // console.log(this);
        let list=Object.keys(this)
        return {next:()=>{
            let value={
                key:list[index],
                value:this[list[index]]
            }
            let done
            if(index>=list.length){
                done=true
            }else{
                done=false
            }
            index++
            return{done,value}
        }}
    }
}
for (let v of obj){
    console.log(v);
}
for (let v of Object.keys(obj)){
    console.log(v);
}

this的指向很重要，还有就是 done 是不能修改的，但是 value 可以，比如我返回的value是一个对象其中有当前项的索引index 和值value