使用 JavaScript 数组创建迭代器的实用指南

关键词: JavaScript迭代器、数组遍历、Symbol.iterator、生成器函数、可迭代协议
描述: 本文深入讲解如何通过原生数组方法、自定义迭代器和生成器函数实现JavaScript数组的灵活遍历，涵盖从基础用法到高级模式的全套实践方案。

一、为什么需要迭代器？

在处理数据集时，我们经常需要逐个访问元素。JavaScript数组虽然自带forEach等方法，但迭代器提供了更底层的控制能力。想象你要处理一个包含10万条订单的数组——直接加载所有数据可能造成内存溢出，而迭代器可以按需生成数据。

二、原生数组的迭代能力

所有JavaScript数组都内置迭代器，可通过三种方式激活：

javascript
const colors = ['red', 'green', 'blue'];

// 方法1：for...of循环
for (const color of colors) {
console.log(color);
}

// 方法2：手动调用迭代器
const iterator = colorsSymbol.iterator;
console.log(iterator.next().value); // 'red'

// 方法3：展开运算符
[...colors].forEach(color => console.log(color));

三、实现自定义迭代器

通过实现[Symbol.iterator]协议，我们可以创建更智能的迭代逻辑：

javascript
class PaginatedArray {
constructor(data, pageSize = 2) {
this.data = data;
this.pageSize = pageSize;
}

Symbol.iterator {
let index = 0;
return {
next: () => {
if (index >= this.data.length) {
return { done: true };
}
const page = this.data.slice(index, index + this.pageSize);
index += this.pageSize;
return { value: page, done: false };
}
};
}
}

// 使用示例
const pagedArray = new PaginatedArray([1,2,3,4,5]);
for (const page of pagedArray) {
console.log('当前页:', page);
// 输出: [1,2], [3,4], [5]
}

四、生成器函数的优雅实现

生成器函数（function*）能更简洁地创建迭代器。以下示例实现了一个支持条件过滤的迭代器：

javascript
function* filterIterator(array, condition) {
for (const item of array) {
if (condition(item)) {
yield item;
}
}
}

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = filterIterator(numbers, n => n % 2 === 0);

console.log([...evenNumbers]); // [2, 4]

五、实战应用场景

1. 懒加载数据流
   结合Ajax请求实现分块加载：
   javascript async function* fetchInBatches(url, batchSize) { let offset = 0; while (true) { const res = await fetch(`${url}?offset=${offset}&limit=${batchSize}`); const data = await res.json(); if (data.length === 0) break; yield data; offset += batchSize; } }

2. 无限序列生成
   创建斐波那契数列迭代器：
   javascript function* fibonacci() { let [a, b] = [0, 1]; while (true) { yield a; [a, b] = [b, a + b]; } } const sequence = fibonacci(); console.log(sequence.next().value); // 0 console.log(sequence.next().value); // 1

六、性能优化技巧

• 避免在迭代中修改原数组：这可能导致不可预期的行为
• 优先使用原生迭代：手动实现的迭代器通常比原生方法慢20-30%
• 考虑内存占用：大数据集应使用生成器而非缓存整个结果

通过掌握这些技术，你可以构建出既符合JavaScript语言特性又满足业务需求的迭代方案。关键在于理解迭代器协议的本质——它提供了一种标准化、可组合的数据访问方式。