JavaScript 迭代器教程

什么是迭代器？

迭代器是一种特殊的对象，它提供了一种方法来遍历一个容器对象中的元素，而不需要暴露该对象的内部表示。在 JavaScript 中，迭代器对象必须实现一个 next() 方法，该方法返回一个包含两个属性的对象：

value: 当前迭代的值
done: 一个布尔值，表示迭代是否已完成

基础用法

1. 创建一个简单的迭代器

function createIterator(array) {let index = 0;return {next: function() {return index < array.length ? { value: array[index++], done: false } :{ value: undefined, done: true };}};
}// 使用示例
const iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

2. 可迭代对象

一个对象要成为可迭代对象，必须实现 @@iterator 方法，即对象必须有一个 Symbol.iterator 键的属性：

const iterableObject = {data: [1, 2, 3],[Symbol.iterator]() {let index = 0;return {next: () => {return index < this.data.length ?{ value: this.data[index++], done: false } :{ value: undefined, done: true };}};}
};// 使用 for...of 循环
for (const item of iterableObject) {console.log(item); // 1, 2, 3
}

高级用法

1. 生成器函数

生成器是创建迭代器的一种更简单的方式：

function* numberGenerator() {yield 1;yield 2;yield 3;
}const gen = numberGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

2. 无限序列生成器

function* infiniteSequence() {let i = 0;while (true) {yield i++;}
}const numbers = infiniteSequence();
console.log(numbers.next().value); // 0
console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2

3. 实现可迭代的类

class Collection {constructor(items) {this.items = items;}*[Symbol.iterator]() {for (let item of this.items) {yield item;}}
}const collection = new Collection([1, 2, 3]);
for (const item of collection) {console.log(item); // 1, 2, 3
}

实际应用场景

1. 分页数据处理

function* createPageIterator(totalItems, pageSize) {const totalPages = Math.ceil(totalItems.length / pageSize);for (let page = 0; page < totalPages; page++) {const start = page * pageSize;const end = start + pageSize;yield totalItems.slice(start, end);}
}const items = [1, 2, 3, 4, 5, 6, 7];
const pageIterator = createPageIterator(items, 3);for (const page of pageIterator) {console.log('当前页数据:', page);
}

2. 树结构遍历

class TreeNode {constructor(value) {this.value = value;this.left = null;this.right = null;}
}function* inorderTraversal(node) {if (node) {yield* inorderTraversal(node.left);yield node.value;yield* inorderTraversal(node.right);}
}// 创建树结构
const root = new TreeNode(1);
root.left = new TreeNode(2);
root.right = new TreeNode(3);// 遍历树
for (const value of inorderTraversal(root)) {console.log(value);
}

最佳实践与注意事项

性能考虑
- 迭代器是惰性的，只有在需要时才会计算下一个值
- 对于大数据集，使用迭代器可以避免一次性加载所有数据
错误处理
- 在迭代器中应该正确处理异常情况
- 可以使用 try-catch 块来捕获迭代过程中的错误

function* errorHandlingGenerator() {try {yield 1;throw new Error('Generator error');} catch (e) {console.log('Error caught:', e.message);yield 'error handled';}
}