前端中迭代器的理解和手动封装一个迭代器

tech2026-04-24 4

前端中迭代器的理解和手动封装一个迭代器

1.什么是迭代器？

迭代器就是为了实现对不同集合进行统一遍历操作的一种机制。它本身就是实现了一套迭代协议。迭代协议：规定了迭代与实现的逻辑。

可能很多同学看着字面的意思还是很迷惑，啥玩意？别着急，咱们一步步的撸下去。

2.for-of 循环

2.1 针对数组的for-in 循环

回顾下for-in 这里直接上代码了；

let arr = ['a','b','c','d'] for(let attr in arr){ console.log(attr) }

这里面我们可以看出来输出的是key的值，也就是数组的下标；

2.2 针对数组的for of循环

let arr = ['a', 'b', 'c', 'd'] for (let val of arr) { console.log(val) }

通过for of 我们可以看到输出的是对应的value的值。

2.3 针对对象的for in和for of循环。

let obj = { a: 'a', b: 'b', c: 'c' } for (let attr in obj) { console.log(attr, '这是for in循环对象') } for (let val of obj) { console.log(val, '这是for of循环对象') }

此时我们可以看到for in循环对象没问题，但是for of的时候报错，提示这个对象obj是不可迭代的。我们分别在控制台输出arr和obj分别看下，我们可以发现arr有Symbol.iterator方法，但是obj没有。

3.实现一个迭代器

我们要实现一个可迭代对象，只需要给它实现【Symbol.iterator】方法，而迭代器的实现过程就是迭代协议。下面我们就来手撸一个迭代器。

let obi = { a: 1, b: 2, c: 3 }; obj[Symbol.iterator] = function(){ return {} } for(let val of obj){ }

此时我们运行下看看结果如何；

此时我们会发现这个对象缺少一个function。写迭代器一定要有一个next()方法，在next（）里面必须有返回值；

let obj = { a: 1, b: 2, c: 3 }; obj[Symbol.iterator] = function(){ return { next(){ return { done: false //done表示迭代是否完成 fasle 代表否 } } } } for(let val of obj){ }

此时在运行下，发现没有报错了，但是一直在执行，进入了一个死循环，舒服了。

下面我们来定义下规则，也就是迭代协议，就是你需要让它根据什么循环，就让它根据你的规定来循环。

let obj = { a: 1, b: 2, c: 3 }; obj[Symbol.iterator] = function(){ // 迭代协议 let values = Object.values(obj) let index = 0; console.log(values) return { next(){ if(index>= values.length){ //表示循环完成 return { // value: values[index++] 循环完成 done: true } }else{ return { done: false, value: values[index++] } } } } } for(let val of obj){ console.log(val) }

此时执行就会发现，这个对象变成了可迭代对象。

我们可以模拟下它执行的过程。这里的代码我稍微修改下，为了测试它的执行过程；

执行的结果：

到这我们就算实现了一个迭代器，for of就是相当于一直帮我们next()来执行这个迭代器。其中的迭代协议使我们自己定义的，现在只能输出value的值，那么我们可以让它同时输出key 和valule吗？当然可以。

输出一下看看效果：

到这里，咱们的迭代器已经实现了，主要就是通过迭代协议来给对象封装一个Symbol.iterator方法，从而实现对象迭代的效果。下一篇我们将通过generator函数来实现封装一个async await异步执行方法。

最新回复(0)