深入理解 TypeScript 中的迭代器（Iterators）与生成器（Generators）

一、为什么需要迭代协议？

在现代 JavaScript/TypeScript 开发中，我们经常需要处理各种集合型数据：数组、Map、Set 甚至是自定义数据结构。ES6 引入的迭代协议（Iteration Protocols）正是为了解决统一遍历机制的问题。通过迭代器模式，我们可以：

1. 为不同的数据结构提供统一的访问接口

2. 实现惰性计算（Lazy Evaluation）

3. 支持现代语言特性（for...of, 扩展运算符等）

4. 构建异步迭代流程

二、迭代器（Iterator）的核心机制

2.1 迭代协议双接口

TypeScript 通过两个核心接口实现迭代协议：

// 可迭代接口
interface Iterable<T> {[Symbol.iterator](): Iterator<T>;
}// 迭代器接口
interface Iterator<T> {next(): IteratorResult<T>;
}interface IteratorResult<T> {value: T | undefined;done: boolean;
}

2.2 自定义迭代器实战

让我们实现一个简单的数字范围迭代器：

class RangeIterator implements Iterator<number> {private current: number;constructor(private readonly start: number,private readonly end: number,private readonly step: number = 1) {this.current = start;}next(): IteratorResult<number> {if (this.current <= this.end) {const value = this.current;this.current += this.step;return { value, done: false };}return { value: undefined, done: true };}
}// 使用示例
const range = new RangeIterator(1, 5);
let result = range.next();
while (!result.done) {console.log(result.value); // 1, 2, 3, 4, 5result = range.next();
}

2.3 内置可迭代对象

TypeScript 支持以下内置可迭代类型：

类型	迭代行为
Array	按索引顺序迭代元素
String	按字符迭代
Map	迭代 [key, value] 键值对
Set	按插入顺序迭代元素
NodeList	DOM 节点集合迭代
arguments	函数参数对象的迭代

三、生成器（Generator）的魔法

3.1 生成器基础语法

通过 function* 声明生成器函数：

function* simpleGenerator() {yield 1;yield 2;yield 3;
}const gen = simpleGenerator();
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 }

3.2 生成器高级特性

双向通信

function* twoWayCommunication() {const name = yield 'Please enter your name:';const age = yield 'Please enter your age:';return { name, age };
}const gen = twoWayCommunication();
console.log(gen.next());    // { value: 'Please enter your name:', done: false }
console.log(gen.next('Alice')); // { value: 'Please enter your age:', done: false }
console.log(gen.next(30));  // { value: { name: 'Alice', age: 30 }, done: true }

异常处理

function* errorHandling() {try {yield 'Normal execution';throw new Error('Generator error');} catch (err) {yield `Caught error: ${err.message}`;}
}const gen = errorHandling();
console.log(gen.next()); // { value: 'Normal execution', done: false }
console.log(gen.throw(new Error('External error'))); // { value: 'Caught error: External error', done: false }

3.3 生成器实现迭代器

生成器可以极大简化迭代器的实现：

function* rangeGenerator(start: number, end: number, step = 1) {for (let i = start; i <= end; i += step) {yield i;}
}// 使用 for...of 迭代
for (const num of rangeGenerator(1, 5)) {console.log(num); // 1, 2, 3, 4, 5
}

四、异步迭代与生成器

4.1 异步迭代协议

interface AsyncIterable<T> {[Symbol.asyncIterator](): AsyncIterator<T>;
}interface AsyncIterator<T> {next(): Promise<IteratorResult<T>>;
}

4.2 异步生成器实战

实现分页数据获取：

async function* paginatedFetcher(url: string, pageSize = 10) {let page = 1;let hasMore = true;while (hasMore) {const response = await fetch(`${url}?page=${page}&size=${pageSize}`);const data = await response.json();yield data.items;hasMore = data.hasMore;page++;}
}// 使用示例
(async () => {const pageIterator = paginatedFetcher('/api/data');for await (const items of pageIterator) {console.log('Received items:', items);}
})();

五、性能优化与最佳实践

1. 惰性计算优势：生成器只在需要时产生值，显著降低内存消耗

   function* fibonacci() {let [a, b] = [0, 1];while (true) {yield a;[a, b] = [b, a + b];}
   }// 仅计算需要的斐波那契数
   const fib = fibonacci();
   console.log(fib.next().value); // 0
   console.log(fib.next().value); // 1

2. 组合迭代器模式

   function* filter<T>(iterable: Iterable<T>, predicate: (item: T) => boolean) {for (const item of iterable) {if (predicate(item)) {yield item;}}
   }function* map<T, U>(iterable: Iterable<T>, mapper: (item: T) => U) {for (const item of iterable) {yield mapper(item);}
   }// 使用组合
   const numbers = [1, 2, 3, 4, 5];
   const result = map(filter(numbers, n => n % 2 === 0), n => n * 2);
   console.log([...result]); // [4, 8]

3. 内存优化对比

   方法	内存占用	执行方式
   传统数组处理	高	立即执行
   生成器管道	低	按需执行
   异步生成器	极低	事件驱动

六、在常见库中的应用

1. RxJS：Observable 与生成器的结合

   import { from, Observable } from 'rxjs';function* sensorData() {while (true) {yield Math.random() * 100;await sleep(1000);}
   }const observable$ = from(sensorData());
   observable$.subscribe(console.log);

2. Redux-Saga：使用生成器管理副作用

   import { call, put, takeEvery } from 'redux-saga/effects';function* fetchUser(action) {try {const user = yield call(fetch, `/api/users/${action.payload}`);yield put({ type: 'USER_FETCH_SUCCEEDED', payload: user });} catch (e) {yield put({ type: 'USER_FETCH_FAILED', message: e.message });}
   }function* mySaga() {yield takeEvery('USER_FETCH_REQUESTED', fetchUser);
   }

七、调试技巧与常见陷阱

7.1 调试建议

1. 使用 debugger 语句暂停生成器执行

   function* debugGenerator() {yield 'step 1';debugger; // 调试器将在此暂停yield 'step 2';
   }

2. 利用 VS Code 的调试配置：

   {"type": "node","request": "launch","name": "Debug Generator","skipFiles": ["<node_internals>/**"],"program": "${file}","runtimeArgs": ["--harmony-async-iteration"]
   }

7.2 常见错误处理

1. 提前终止迭代：

   function* numbers() {try {yield 1;yield 2;yield 3;} finally {console.log('Generator cleanup');}
   }const gen = numbers();
   console.log(gen.next()); // { value: 1, done: false }
   console.log(gen.return()); // 立即触发 finally 块

2. 处理迭代器耗尽：

   const gen = simpleGenerator();
   gen.next(); // { value: 1, done: false }
   gen.next(); // { value: 2, done: false }
   gen.next(); // { value: 3, done: false }
   gen.next(); // { value: undefined, done: true }// 安全检测
   function safeNext<T>(iterator: Iterator<T>) {const result = iterator.next();return result.done ? null : result.value;
   }

结语：迭代模式的未来

随着 JavaScript 语言的演进，迭代器和生成器正在成为现代 Web 开发的核心模式。从 React 的 Suspense 特性到 Node.js 的 Stream 处理，从大数据处理到机器学习管道，迭代协议提供了统一的抽象层。掌握这些特性不仅能够提升代码质量，更能帮助我们构建更高效、更易维护的应用程序。