1. 迭代器与生成器基础概念解析在ES6标准中迭代器(Iterator)和生成器(Generator)是JavaScript语言层面提供的两个重要特性。它们共同构成了现代JavaScript异步编程和集合操作的基础设施。1.1 迭代器协议详解迭代器协议定义了如何顺序访问一个数据集合中的元素。具体来说任何实现了next()方法的对象都可以称为迭代器。这个next()方法必须返回包含两个属性的对象value当前迭代的值done布尔值表示迭代是否完成const simpleIterator { data: [1, 2, 3], index: 0, next() { return this.index this.data.length ? { value: this.data[this.index], done: false } : { value: undefined, done: true }; } };注意手动实现迭代器时必须确保在迭代完成后继续调用next()始终返回{done: true}否则可能导致无限循环。1.2 可迭代协议与Symbol.iterator一个对象要成为可迭代的(iterable)必须实现iterator方法即Symbol.iterator属性。当对象被用于for...of循环或展开运算符时JavaScript引擎会自动调用这个方法。const iterableObject { [Symbol.iterator]() { let step 0; return { next() { step; if (step 3) { return { value: step, done: false }; } return { value: undefined, done: true }; } }; } };1.3 生成器函数语法生成器函数是ES6引入的特殊函数通过function*语法定义。调用生成器函数不会立即执行函数体而是返回一个生成器对象这个对象同时符合可迭代协议和迭代器协议。function* simpleGenerator() { yield 1; yield 2; return 3; } const gen simpleGenerator(); console.log(gen.next()); // { value: 1, done: false }生成器函数的关键特性使用yield暂停执行并返回值通过next()恢复执行可以接收通过next()传入的值支持try...catch错误处理2. 核心应用场景深度剖析2.1 自定义数据结构的迭代当我们需要让自定义的数据结构支持for...of循环时实现Symbol.iterator是最佳选择。例如实现一个范围迭代器class Range { constructor(start, end, step 1) { this.start start; this.end end; this.step step; } *[Symbol.iterator]() { let current this.start; while (current this.end) { yield current; current this.step; } } } for (const num of new Range(1, 5)) { console.log(num); // 1, 2, 3, 4, 5 }2.2 异步编程与状态管理生成器函数特别适合处理异步操作和复杂的状态管理。结合Promise可以实现类似async/await的效果function* asyncGenerator() { const result1 yield fetchData1(); const result2 yield fetchData2(result1); return processResults(result2); } function runGenerator(gen) { const iterator gen(); function handle(result) { if (result.done) return result.value; return result.value.then(data { return handle(iterator.next(data)); }); } return handle(iterator.next()); }2.3 无限数据流处理生成器非常适合表示无限或非常大的数据序列因为它们是惰性求值的function* fibonacci() { let [prev, curr] [0, 1]; while (true) { yield curr; [prev, curr] [curr, prev curr]; } } const fib fibonacci(); console.log(fib.next().value); // 1 console.log(fib.next().value); // 1 console.log(fib.next().value); // 23. 高级用法与性能优化3.1 双向通信与值传递生成器不仅可以通过yield输出值还可以通过next()接收输入值function* twoWayGenerator() { const name yield What is your name?; const age yield Hello ${name}, how old are you?; return ${name} is ${age} years old; } const gen twoWayGenerator(); console.log(gen.next().value); // What is your name? console.log(gen.next(Alice).value); // Hello Alice, how old are you? console.log(gen.next(30).value); // Alice is 30 years old3.2 生成器委托与组合使用yield*语法可以将生成器委托给另一个生成器实现生成器的组合function* generator1() { yield 1; yield 2; } function* generator2() { yield* generator1(); yield 3; } for (const value of generator2()) { console.log(value); // 1, 2, 3 }3.3 性能考量与内存优化在处理大型数据集时生成器相比数组有显著的内存优势// 生成1到1百万的数字序列 function* bigSequence() { let i 0; while (i 1e6) { yield i; } } // 对比数组方式 const bigArray Array.from({length: 1e6}, (_, i) i);实测数据生成器实现的内存占用恒定在几KB而数组方式在Chrome中占用约8MB内存。4. 常见问题与解决方案4.1 迭代器复用问题一个常见的误区是尝试复用已完成的迭代器const arr [1, 2, 3]; const iterator arr[Symbol.iterator](); // 第一次迭代 for (const item of iterator) { console.log(item); // 1, 2, 3 } // 第二次尝试迭代 for (const item of iterator) { console.log(item); // 不会执行 }解决方案是每次需要迭代时获取新的迭代器function getFreshIterator(iterable) { return iterable[Symbol.iterator](); }4.2 生成器中的错误处理生成器内部可以使用try...catch捕获错误function* errorHandlingGenerator() { try { yield 1; throw new Error(Something went wrong); yield 2; } catch (err) { console.error(Caught inside:, err.message); yield 3; } } const gen errorHandlingGenerator(); console.log(gen.next()); // { value: 1, done: false } console.log(gen.next()); // Caught inside: Something went wrong // { value: 3, done: false }4.3 与异步/await的对比虽然生成器可以模拟async/await的行为但在现代JavaScript中直接使用async/await通常更简单// 使用生成器 function* fetchData() { const response yield fetch(/api/data); const data yield response.json(); return data; } // 使用async/await async function fetchData() { const response await fetch(/api/data); const data await response.json(); return data; }5. 实战案例实现分页数据获取下面是一个结合迭代器和生成器实现分页数据获取的完整示例async function* paginatedFetcher(url) { let page 1; let hasMore true; while (hasMore) { const response await fetch(${url}?page${page}); const data await response.json(); if (data.results.length 0) { hasMore false; } else { yield data.results; page; } } } // 使用示例 (async () { const pageIterator paginatedFetcher(/api/items); for await (const items of pageIterator) { console.log(Got items:, items); // 处理当前页数据 } })();这个实现的关键点使用async generator处理异步分页请求自动处理分页逻辑通过for await...of语法消费数据内存友好一次只加载一页数据6. 迭代器工具函数实现我们可以基于迭代器协议实现一些实用的工具函数6.1 迭代器映射函数function* mapIterator(iterator, mapper) { for (const item of iterator) { yield mapper(item); } } const numbers [1, 2, 3]; const squared mapIterator(numbers[Symbol.iterator](), x x * x); console.log([...squared]); // [1, 4, 9]6.2 迭代器过滤函数function* filterIterator(iterator, predicate) { for (const item of iterator) { if (predicate(item)) { yield item; } } } const evenNumbers filterIterator(numbers[Symbol.iterator](), x x % 2 0); console.log([...evenNumbers]); // [2]6.3 迭代器组合函数function* chainIterators(...iterators) { for (const iterator of iterators) { yield* iterator; } } const combined chainIterators( [1, 2][Symbol.iterator](), [3, 4][Symbol.iterator]() ); console.log([...combined]); // [1, 2, 3, 4]这些工具函数展示了如何基于迭代器协议构建可组合的数据处理管道这种模式在函数式编程中非常常见。