迭代器是符合迭代器协议的对象,拥有next方法,返回包含value和done属性的对象,用于顺序访问集合元素而不暴露内部结构。

JavaScript中的迭代器模式是一种设计模式,它提供一种统一的方式访问集合中的各个元素,同时不暴露其内部结构。核心思想是通过一个对象来按顺序获取数据,这个对象就是迭代器。
什么是迭代器(Iterator)?
在JavaScript中,迭代器是一个符合迭代器协议的对象,拥有一个 next() 方法,该方法返回一个包含 value 和 done 两个属性的结果对象:
- value:当前步骤的值,可以是任何类型
- done:布尔值,表示遍历是否结束
当 done 为 true 时,表示迭代完成;否则继续。
如何创建一个迭代器?
可以通过手动实现 next 方法来创建一个迭代器,也可以利用生成器函数简化过程。
手动实现迭代器:例如,为一个数组创建自定义迭代器:
function createIterator(arr) {
let index = 0;
return {
next: function() {
return index < arr.length ?
{ value: arr[index++], done: false } :
{ value: undefined, done: true };
}
};
}
const iter = createIterator([1, 2, 3]);
iter.next(); // { value: 1, done: false }
iter.next(); // { value: 2, done: false }
iter.next(); // { value: 3, done: false }
iter.next(); // { value: undefined, done: true }
使用生成器函数(更简洁):
技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作
生成器函数会自动返回一个迭代器对象:
function* genIterator() {
yield 1;
yield 2;
yield 3;
}
const g = genIterator();
g.next(); // { value: 1, done: false }
g.next(); // { value: 2, done: false }
可迭代协议与 for...of 的关系
一个对象如果实现了 [Symbol.iterator] 方法,并且该方法返回一个迭代器,那么它就是“可迭代的”。数组、字符串、Map、Set 等原生类型都实现了这个接口。
for...of 循环正是基于这个协议工作的:
const arr = [10, 20, 30];
for (const item of arr) {
console.log(item); // 依次输出 10, 20, 30
}
这背后其实是调用了 arr[Symbol.iterator]() 获取迭代器,然后不断调用 next() 遍历。
基本上就这些。迭代器模式让数据访问方式更一致,也支持惰性求值和无限序列等高级场景。理解它有助于掌握ES6的生成器和异步迭代等特性。不复杂但容易忽略细节。









