迭代器接口实现

水塔鸡丝

于 2021-12-21 20:46:49 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript es6 前端

本文链接：https://blog.youkuaiyun.com/wenyeqv/article/details/122072811

前端专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了JavaScript中for...of循环的工作原理及其使用场景。重点解释了该循环如何通过Symbol.iterator接口实现对不同数据类型（如数组、Set、Map等）的遍历，并展示了如何为普通对象手动实现这一迭代功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

● for of 可以遍历拥有迭代接口的数据，如数组，Set,Map等，但是却不能操作普通对象
● 因为普通对象里面没有迭代器接口
○ 可以看到这些可遍历的数据类型的原型上，都有一个Symbol.iterator函数
在这里插入图片描述

		let a = [1,2,3]
        let set = new Set([1,2,3])
        console.log(a[Symbol.iterator]())

○ 返回一个带有next方法的对象
在这里插入图片描述
■ 调用这个方法，返回来数组的第一个值，可以看到，for of实际是调用了这个数据上的[Symbol.iterator]方法，实现了数据的遍历，普通对象上虽然没有这个方法，但是可以自己实现

 		let a = [1,2,3]
        let set = new Set([1,2,3])
        console.log(a[Symbol.iterator]().next())  // { value:1,done:false}


let obj = {
    store:[1,2,3,4],
    [Symbol.iterator]:function(){
        let index = 0;
        let self = this
        return {
            next:function(){
                return {
                    value:self.store[index],
                done:index++ >= self.store.length
                }
            }
        }
    }
}

for(const item of obj){
    console.log(item)  //1 2 3 4
}