深入解析ES6+新语法：复杂的迭代器与天生器

 一、迭代器（Iterator）：数据遍历的同一协议  

1. 迭代器协议的本质

**迭代器协议（Iterator Protocol）** 是一种标准化的数据访问接口，它要求对象实现一个 `next()` 方法，每次调用返回包含 `{ value, done }` 的对象。  
- **`value`**: 当前遍历的值  
- **`done`**: 布尔值，表示遍历是否竣事  

1. const arrayIterator = {
2.   data: [1, 2, 3],
3.   index: 0,
4.   next() {
5.     return this.index < this.data.length 
6.       ? { value: this.data[this.index++], done: false }
7.       : { value: undefined, done: true };
8.   }
9. };
11. console.log(arrayIterator.next()); // { value: 1, done: false }

复制代码

此迭代器通过内部维护的 `index` 状态，渐渐遍历数组元素。
 2. 可迭代对象（Iterable）  

若对象实现了[Symbol.iterator]() 方法，则称为 可迭代对象。该方法返回一个迭代器，使得对象可被 `for...of` 等语法消费。
自定义可迭代链表：  

1. class LinkedList {
2.   constructor() {
3.     this.nodes = [];
4.   }
5.   add(node) {
6.     this.nodes.push(node);
7.   }
8.   [Symbol.iterator]() {
9.     let index = 0;
10.     return {
11.       next: () => ({
12.         value: this.nodes[index++],
13.         done: index > this.nodes.length
14.       })
15.     };
16.   }
17. }
19. const list = new LinkedList();
20. list.add('a'); list.add('b');
21. for (const node of list) {
22.   console.log(node); // 'a', 'b'
23. }

复制代码

 二、天生器（Generator）：迭代器的超级语法糖  

1. 天生器的核心机制

天生器函数（function*）返回一个 天生器对象，该对象既是迭代器，也是可迭代对象。其核心能力在于：  
- 暂停与恢复执行：通过 `yield` 关键字中断函数，保留上下文状态  
- 双向通讯：`yield` 可向外传递值，外部可通过 `next(arg)` 向内注入值  天生器执行流程  

1. function* gen() {
2.   const a = yield 1;
3.   const b = yield a + 2;
4.   yield b * 3;
5. }
7. const g = gen();
8. console.log(g.next());      // { value: 1, done: false }
9. console.log(g.next(10));    // { value: 12, done: false } (a = 10)
10. console.log(g.next(5));     // { value: 15, done: false } (b = 5)
11. console.log(g.next());      // { value: undefined, done: true }

复制代码

**关键点**：每次 `next(arg)` 的 `arg` 会赋值给左侧 `yield` 表达式的返回值。
2. 天生器的底层模型  

天生器本质是 **协程（Coroutine）** 的轻量级实现。与线程不同，协程的切换由开发者显式控制，且不涉及系统内核，因此极其高效。  
- 执行上下文栈：天生器暂停时，其执行上下文（变量、作用域链）被保存，恢复时重新压入栈顶  
- 状态机转换：Babel 等工具将天生器转换为带有 `switch-case` 的状态机代码  
 三、高级应用场景  

1. 异步流程控制：天生器的革命性贡献  

在 `async/await` 普及前，天生器 + Promise 是处理异步代码的终极方案，其核心模式如下：  

实现自动执行器  

1. function run(generator) {
2.   const g = generator();
3.   function handle(result) {
4.     if (result.done) return result.value;
5.     return result.value.then(
6.       data => handle(g.next(data)),
7.       err => handle(g.throw(err))
8.     );
9.   }
10.   return handle(g.next());
11. }
13. run(function* fetchUser() {
14.   const user = yield fetch('/api/user');
15.   const posts = yield fetch(`/api/posts?userId=${user.id}`);
16.   return { user, posts };
17. }).then(data => console.log(data));

复制代码

此模式直接催生了 `async/await` 的诞生，两者在 Babel 中被编译为类似的天生器代码。
 2. 无穷数据流与惰性盘算  

天生器天然恰当处理大规模或无穷序列，仅在需要时盘算值，避免内存爆炸。
斐波那契数列  

1. function* fibonacci() {
2.   let [prev, curr] = [0, 1];
3.   while (true) {
4.     yield curr;
5.     [prev, curr] = [curr, prev + curr];
6.   }
7. }
9. const seq = fibonacci();
10. console.log(seq.next().value); // 1
11. console.log(seq.next().value); // 1
12. console.log(seq.next().value); // 2
13. // 可无限调用，但每次只计算一个值

复制代码

3. 复杂状态机  

天生器通过 `yield` 管理状态转移，代码比传统状态机更轻便。
 交通灯状态机  

1. function* trafficLight() {
2.   while (true) {
3.     yield 'Red';          // 返回 'Red'
4.     yield delay(3000);   // 返回 Promise，暂停 3 秒
5.     yield 'Green';        // 返回 'Green'
6.     yield delay(2000);   // 返回 Promise，暂停 2 秒
7.     yield 'Yellow';       // 返回 'Yellow'
8.     yield delay(1000);   // 返回 Promise，暂停 1 秒
9.   }
10. }
12. function delay(ms) {
13.   return new Promise(resolve => setTimeout(resolve, ms));
14. }
16. // 使用
17. const light = trafficLight();
19. function runTrafficLight() {
20.   const { value, done } = light.next();
21.   if (done) return; // 如果生成器结束，退出
23.   if (typeof value === 'string') {
24.     console.log(value); // 更新 UI 为当前颜色
25.     runTrafficLight();  // 继续下一步
26.   } else if (value instanceof Promise) {
27.     value.then(() => runTrafficLight()); // 等待 Promise 完成后再继续
28.   }
29. }
31. runTrafficLight(); // 启动交通灯

复制代码

四、天生器与迭代器的未来  

1. 异步迭代器（Async Iterator）  

ES2018 引入的异步迭代器，答应迭代异步数据源（如数据库流、WebSocket）：  

1. async function* asyncCounter() {
2.   let i = 0;
3.   while (i < 3) {
4.     await sleep(1000);
5.     yield i++;
6.   }
7. }
8. (async () => {
9.   for await (const num of asyncCounter()) {
10.     console.log(num); // 0, 1, 2（每秒输出一个）
11.   }
12. })();

复制代码

 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。