JavaScript 迭代器协议深入：从 Symbol.iterator 到异步生成器

前言#

迭代（Iteration）是编程中最基础的操作之一。JavaScript 通过**迭代器协议（Iterator Protocol）和可迭代协议（Iterable Protocol）**定义了一套统一的迭代标准，让 for...of、展开运算符、解构赋值等语法特性能够与任何自定义数据结构无缝协作。

本文将从协议的底层原理讲起，逐步深入到生成器、惰性求值、异步迭代器和 for-await-of，帮你全面掌握 JavaScript 迭代体系。

迭代器协议（Iterator Protocol）#

一个对象要成为迭代器，必须实现一个 next() 方法，该方法返回一个包含 value 和 done 属性的对象：

1
// 手动实现一个迭代器
2
function createRangeIterator(start, end) {
3
  let current = start;
4
  return {
5
    next() {
6
      if (current <= end) {
7
        return { value: current++, done: false };
8
      }
9
      return { value: undefined, done: true };
10
    }
11
  };
12
}
13

14
const iter = createRangeIterator(1, 3);
15
console.log(iter.next()); // { value: 1, done: false }
16
console.log(iter.next()); // { value: 2, done: false }
17
console.log(iter.next()); // { value: 3, done: false }
18
console.log(iter.next()); // { value: undefined, done: true }

迭代器是有状态的——每次调用 next() 都会推进内部状态。一旦 done: true，后续调用应持续返回 { done: true }。

可迭代协议（Iterable Protocol）#

一个对象要成为可迭代的，必须实现 Symbol.iterator 方法，该方法返回一个迭代器：

1
class Range {
2
  constructor(start, end) {
3
    this.start = start;
4
    this.end = end;
5
  }
6

7
  [Symbol.iterator]() {
8
    let current = this.start;
9
    const end = this.end;
10

11
    return {
12
      next() {
13
        if (current <= end) {
14
          return { value: current++, done: false };
15
        }
16
        return { value: undefined, done: true };
17
      }
18
    };
19
  }
20
}
21

22
const range = new Range(1, 5);
23

24
// for...of 自动调用 Symbol.iterator
25
for (const num of range) {
26
  console.log(num); // 1, 2, 3, 4, 5
27
}
28

29
// 展开运算符
30
console.log([...range]); // [1, 2, 3, 4, 5]
31

32
// 解构赋值
33
const [first, second, ...rest] = range;
34
console.log(first, second, rest); // 1 2 [3, 4, 5]
35

36
// Array.from
37
console.log(Array.from(range)); // [1, 2, 3, 4, 5]

可迭代协议的消费者#

以下语法和 API 都依赖可迭代协议：

消费者	示例
`for...of`	`for (const x of iterable)`
展开运算符	`[...iterable]`, `fn(...iterable)`
解构赋值	`const [a, b] = iterable`
`Array.from()`	`Array.from(iterable)`
`new Map()` / `new Set()`	`new Set(iterable)`
`Promise.all()`	`Promise.all(iterable)`
`yield*`	`yield* iterable`

生成器函数（Generator Functions）#

手动实现迭代器比较繁琐，生成器函数（function*）提供了更优雅的方式：

1
function* range(start, end) {
2
  for (let i = start; i <= end; i++) {
3
    yield i;
4
  }
5
}
6

7
for (const num of range(1, 5)) {
8
  console.log(num); // 1, 2, 3, 4, 5
9
}

生成器函数返回的对象同时满足迭代器协议和可迭代协议：

1
const gen = range(1, 3);
2

3
// 它是一个迭代器（有 next 方法）
4
console.log(gen.next()); // { value: 1, done: false }
5

6
// 它也是可迭代的（有 Symbol.iterator 方法）
7
console.log(gen[Symbol.iterator]() === gen); // true

yield* 委托#

yield* 可以将迭代委托给另一个可迭代对象：

1
function* concat(...iterables) {
2
  for (const iterable of iterables) {
3
    yield* iterable;
4
  }
5
}
6

7
console.log([...concat([1, 2], [3, 4], [5])]); // [1, 2, 3, 4, 5]
8

9
// 递归生成器——遍历树结构
10
function* traverseTree(node) {
11
  yield node.value;
12
  if (node.children) {
13
    for (const child of node.children) {
14
      yield* traverseTree(child);
15
    }
16
  }
17
}
18

19
const tree = {
20
  value: 1,
21
  children: [
22
    { value: 2, children: [{ value: 4 }, { value: 5 }] },
23
    { value: 3, children: [{ value: 6 }] }
24
  ]
25
};
26

27
console.log([...traverseTree(tree)]); // [1, 2, 4, 5, 3, 6]

双向通信：next() 传值与 return/throw#

生成器不仅仅是”产出值”，它还支持双向通信：

1
function* calculator() {
2
  let result = 0;
3
  while (true) {
4
    const input = yield result;
5
    if (input === null) break;
6
    result += input;
7
  }
8
  return result; // return 值出现在最后的 { value, done: true } 中
9
}
10

11
const calc = calculator();
12
console.log(calc.next());     // { value: 0, done: false } — 启动生成器
13
console.log(calc.next(10));   // { value: 10, done: false }
14
console.log(calc.next(20));   // { value: 30, done: false }
15
console.log(calc.next(5));    // { value: 35, done: false }
16
console.log(calc.next(null)); // { value: 35, done: true }

return() 和 throw() 方法用于从外部控制生成器：

1
function* gen() {
2
  try {
3
    yield 1;
4
    yield 2;
5
    yield 3;
6
  } finally {
7
    console.log('cleanup');
8
  }
9
}
10

11
const g = gen();
12
console.log(g.next());    // { value: 1, done: false }
13
console.log(g.return(42)); // cleanup → { value: 42, done: true }
14

15
const g2 = gen();
16
g2.next();
17
g2.throw(new Error('boom')); // cleanup → Error: boom

惰性求值（Lazy Evaluation）#

迭代器的一个核心优势是惰性求值——值只在需要时才被计算，不会预先创建整个集合。

无限序列#

1
function* naturals() {
2
  let n = 1;
3
  while (true) {
4
    yield n++;
5
  }
6
}
7

8
function* fibonacci() {
9
  let [a, b] = [0, 1];
10
  while (true) {
11
    yield a;
12
    [a, b] = [b, a + b];
13
  }
14
}
15

16
// 取前 10 个斐波那契数
17
function take(n, iterable) {
18
  const result = [];
19
  for (const value of iterable) {
20
    result.push(value);
21
    if (result.length >= n) break;
22
  }
23
  return result;
24
}
25

26
console.log(take(10, fibonacci())); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

惰性管道操作#

通过组合生成器，可以构建高效的数据处理管道：

1
function* map(fn, iterable) {
2
  for (const value of iterable) {
3
    yield fn(value);
4
  }
5
}
6

7
function* filter(predicate, iterable) {
8
  for (const value of iterable) {
9
    if (predicate(value)) {
10
      yield value;
11
    }
12
  }
13
}
14

15
function* takeWhile(predicate, iterable) {
16
  for (const value of iterable) {
17
    if (!predicate(value)) break;
18
    yield value;
19
  }
20
}
21

22
function* flatMap(fn, iterable) {
23
  for (const value of iterable) {
24
    yield* fn(value);
25
  }
26
}
27

28
// 组合使用：找出前 5 个大于 100 的斐波那契数
29
const result = take(5,
30
  filter(
31
    n => n > 100,
32
    fibonacci()
33
  )
34
);
35

36
console.log(result); // [144, 233, 377, 610, 987]

与数组方法的区别在于：惰性管道不会创建中间数组，每个元素”流过”整条管道后才处理下一个。

构建流式 API#

1
class LazySequence {
2
  #source;
3

4
  constructor(source) {
5
    this.#source = source;
6
  }
7

8
  static from(iterable) {
9
    return new LazySequence(iterable);
10
  }
11

12
  static range(start, end) {
13
    return new LazySequence(function* () {
14
      for (let i = start; i <= end; i++) yield i;
15
    }());
16
  }
17

18
  static infinite(fn) {
19
    return new LazySequence(function* () {
20
      let i = 0;
21
      while (true) yield fn(i++);
22
    }());
23
  }
24

25
  map(fn) {
26
    const source = this.#source;
27
    return new LazySequence(function* () {
28
      for (const value of source) {
29
        yield fn(value);
30
      }
31
    }());
32
  }
33

34
  filter(predicate) {
35
    const source = this.#source;
36
    return new LazySequence(function* () {
37
      for (const value of source) {
38
        if (predicate(value)) yield value;
39
      }
40
    }());
41
  }
42

43
  take(n) {
44
    const source = this.#source;
45
    return new LazySequence(function* () {
46
      let count = 0;
47
      for (const value of source) {
48
        if (count++ >= n) break;
49
        yield value;
50
      }
51
    }());
52
  }
53

54
  reduce(fn, initial) {
55
    let acc = initial;
56
    for (const value of this.#source) {
57
      acc = fn(acc, value);
58
    }
59
    return acc;
60
  }
61

62
  toArray() {
63
    return [...this.#source];
64
  }
65

66
  [Symbol.iterator]() {
67
    return this.#source[Symbol.iterator]();
68
  }
69
}
70

71
// 使用
72
const result2 = LazySequence
73
  .range(1, 1_000_000)
74
  .filter(n => n % 2 === 0)
75
  .map(n => n * n)
76
  .take(5)
77
  .toArray();
78

79
console.log(result2); // [4, 16, 36, 64, 100]
80
// 只计算了 10 个数字，而不是 100 万个

异步迭代器（Async Iterator）#

当数据源是异步的（网络请求、文件读取、事件流），同步迭代器就不够用了。ES2018 引入了异步迭代器协议。

异步迭代器协议#

1
// 异步可迭代对象需要实现 Symbol.asyncIterator
2
const asyncRange = {
3
  from: 1,
4
  to: 5,
5

6
  [Symbol.asyncIterator]() {
7
    let current = this.from;
8
    const last = this.to;
9

10
    return {
11
      async next() {
12
        // 模拟异步操作
13
        await new Promise(resolve => setTimeout(resolve, 100));
14

15
        if (current <= last) {
16
          return { value: current++, done: false };
17
        }
18
        return { value: undefined, done: true };
19
      }
20
    };
21
  }
22
};
23

24
// 使用 for-await-of 消费
25
async function main() {
26
  for await (const num of asyncRange) {
27
    console.log(num); // 1, 2, 3, 4, 5（每个间隔 100ms）
28
  }
29
}
30

31
main();

异步生成器（Async Generator）#

就像同步生成器简化了迭代器实现，异步生成器简化了异步迭代器：

1
async function* fetchPages(baseUrl, maxPages = 10) {
2
  let page = 1;
3
  let hasMore = true;
4

5
  while (hasMore && page <= maxPages) {
6
    const response = await fetch(`${baseUrl}?page=${page}`);
7
    const data = await response.json();
8

9
    yield data.items;
10

11
    hasMore = data.hasNextPage;
12
    page++;
13
  }
14
}
15

16
// 消费分页 API
17
async function getAllItems() {
18
  const allItems = [];
19

20
  for await (const items of fetchPages('https://api.example.com/posts')) {
21
    allItems.push(...items);
22
    console.log(`Fetched ${items.length} items, total: ${allItems.length}`);
23
  }
24

25
  return allItems;
26
}

实战：事件流转异步迭代器#

将 EventEmitter 或 DOM 事件转换为异步迭代器是一个非常实用的模式：

1
function eventToAsyncIterator(emitter, eventName) {
2
  const queue = [];
3
  let resolve = null;
4
  let done = false;
5

6
  emitter.addEventListener(eventName, (event) => {
7
    if (resolve) {
8
      resolve({ value: event, done: false });
9
      resolve = null;
10
    } else {
11
      queue.push(event);
12
    }
13
  });
14

15
  return {
16
    [Symbol.asyncIterator]() {
17
      return this;
18
    },
19

20
    next() {
21
      if (queue.length > 0) {
22
        return Promise.resolve({ value: queue.shift(), done: false });
23
      }
24
      if (done) {
25
        return Promise.resolve({ value: undefined, done: true });
26
      }
27
      return new Promise(r => { resolve = r; });
28
    },
29

30
    return() {
31
      done = true;
32
      return Promise.resolve({ value: undefined, done: true });
33
    }
34
  };
35
}
36

37
// 使用示例
38
async function handleClicks() {
39
  const clicks = eventToAsyncIterator(document, 'click');
40

41
  for await (const event of clicks) {
42
    console.log(`Clicked at (${event.clientX}, ${event.clientY})`);
43
  }
44
}

异步生成器实战：流式读取大文件#

1
async function* readFileChunks(filePath, chunkSize = 64 * 1024) {
2
  const fs = await import('fs');
3
  const fh = await fs.promises.open(filePath, 'r');
4

5
  try {
6
    const buffer = Buffer.alloc(chunkSize);
7
    let bytesRead;
8

9
    do {
10
      const result = await fh.read(buffer, 0, chunkSize);
11
      bytesRead = result.bytesRead;
12

13
      if (bytesRead > 0) {
14
        yield buffer.subarray(0, bytesRead);
15
      }
16
    } while (bytesRead === chunkSize);
17
  } finally {
18
    await fh.close();
19
  }
20
}
21

22
async function* readLines(filePath) {
23
  let leftover = '';
24

25
  for await (const chunk of readFileChunks(filePath)) {
26
    const text = leftover + chunk.toString('utf-8');
27
    const lines = text.split('\n');
28
    leftover = lines.pop() || '';
29

30
    for (const line of lines) {
31
      yield line;
32
    }
33
  }
34

35
  if (leftover) {
36
    yield leftover;
37
  }
38
}
39

40
// 使用
41
async function processLog() {
42
  let lineCount = 0;
43
  let errorCount = 0;
44

45
  for await (const line of readLines('/var/log/app.log')) {
46
    lineCount++;
47
    if (line.includes('ERROR')) {
48
      errorCount++;
49
      console.log(`Line ${lineCount}: ${line}`);
50
    }
51
  }
52

53
  console.log(`Total: ${lineCount} lines, ${errorCount} errors`);
54
}

异步管道操作#

1
async function* asyncMap(fn, asyncIterable) {
2
  for await (const value of asyncIterable) {
3
    yield await fn(value);
4
  }
5
}
6

7
async function* asyncFilter(predicate, asyncIterable) {
8
  for await (const value of asyncIterable) {
9
    if (await predicate(value)) {
10
      yield value;
11
    }
12
  }
13
}
14

15
async function* asyncTake(n, asyncIterable) {
16
  let count = 0;
17
  for await (const value of asyncIterable) {
18
    if (count++ >= n) break;
19
    yield value;
20
  }
21
}
22

23
async function* asyncBatch(size, asyncIterable) {
24
  let batch = [];
25
  for await (const value of asyncIterable) {
26
    batch.push(value);
27
    if (batch.length >= size) {
28
      yield batch;
29
      batch = [];
30
    }
31
  }
32
  if (batch.length > 0) {
33
    yield batch;
34
  }
35
}
36

37
// 组合使用：批量处理 API 数据
38
async function processAPIData() {
39
  const pages = fetchPages('https://api.example.com/users');
40

41
  const pipeline = asyncBatch(10,
42
    asyncFilter(
43
      async user => user.active,
44
      asyncMap(
45
        async items => items.flat(),
46
        pages
47
      )
48
    )
49
  );
50

51
  for await (const batch of pipeline) {
52
    console.log(`Processing batch of ${batch.length} users`);
53
    await saveBatch(batch);
54
  }
55
}

Iterator Helpers（提案 Stage 3）#

TC39 的 Iterator Helpers 提案为迭代器添加了内置的链式操作方法，不再需要手动编写工具函数：

1
// Iterator Helpers — 现代浏览器已开始支持
2
const result3 = Iterator.from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
3
  .filter(n => n % 2 === 0)
4
  .map(n => n ** 2)
5
  .take(3)
6
  .toArray();
7

8
console.log(result3); // [4, 16, 36]
9

10
// 无限序列也能安全使用
11
function* primes() {
12
  const seen = [];
13
  let n = 2;
14
  while (true) {
15
    if (seen.every(p => n % p !== 0)) {
16
      seen.push(n);
17
      yield n;
18
    }
19
    n++;
20
  }
21
}
22

23
// 前 10 个质数
24
const first10Primes = Iterator.from(primes())
25
  .take(10)
26
  .toArray();
27

28
console.log(first10Primes); // [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
29

30
// reduce
31
const sum = Iterator.from(naturals())
32
  .take(100)
33
  .reduce((acc, n) => acc + n, 0);
34

35
console.log(sum); // 5050
36

37
// forEach
38
Iterator.from([1, 2, 3])
39
  .map(n => n * 10)
40
  .forEach(n => console.log(n)); // 10, 20, 30
41

42
// some / every / find
43
const hasEven = Iterator.from([1, 3, 4, 7])
44
  .some(n => n % 2 === 0);
45
console.log(hasEven); // true

自定义可迭代数据结构#

链表#

1
class LinkedList {
2
  #head = null;
3
  #size = 0;
4

5
  append(value) {
6
    const node = { value, next: null };
7
    if (!this.#head) {
8
      this.#head = node;
9
    } else {
10
      let current = this.#head;
11
      while (current.next) current = current.next;
12
      current.next = node;
13
    }
14
    this.#size++;
15
    return this;
16
  }
17

18
  get size() {
19
    return this.#size;
20
  }
21

22
  *[Symbol.iterator]() {
23
    let current = this.#head;
24
    while (current) {
25
      yield current.value;
26
      current = current.next;
27
    }
28
  }
29

30
  // 反向迭代
31
  *reversed() {
32
    const values = [...this];
33
    for (let i = values.length - 1; i >= 0; i--) {
34
      yield values[i];
35
    }
36
  }
37
}
38

39
const list = new LinkedList();
40
list.append(1).append(2).append(3);
41

42
for (const value of list) {
43
  console.log(value); // 1, 2, 3
44
}
45

46
console.log([...list.reversed()]); // [3, 2, 1]

二叉搜索树#

1
class BST {
2
  #root = null;
3

4
  insert(value) {
5
    const node = { value, left: null, right: null };
6
    if (!this.#root) {
7
      this.#root = node;
8
      return this;
9
    }
10

11
    let current = this.#root;
12
    while (true) {
13
      if (value < current.value) {
14
        if (!current.left) { current.left = node; break; }
15
        current = current.left;
16
      } else {
17
        if (!current.right) { current.right = node; break; }
18
        current = current.right;
19
      }
20
    }
21
    return this;
22
  }
23

24
  // 中序遍历 — 自动排序输出
25
  *[Symbol.iterator]() {
26
    yield* this.#inorder(this.#root);
27
  }
28

29
  *#inorder(node) {
30
    if (!node) return;
31
    yield* this.#inorder(node.left);
32
    yield node.value;
33
    yield* this.#inorder(node.right);
34
  }
35

36
  // 层序遍历
37
  *bfs() {
38
    if (!this.#root) return;
39
    const queue = [this.#root];
40

41
    while (queue.length) {
42
      const node = queue.shift();
43
      yield node.value;
44
      if (node.left) queue.push(node.left);
45
      if (node.right) queue.push(node.right);
46
    }
47
  }
48
}
49

50
const tree2 = new BST();
51
tree2.insert(5).insert(3).insert(7).insert(1).insert(4).insert(6).insert(8);
52

53
console.log([...tree2]);       // [1, 3, 4, 5, 6, 7, 8] — 中序
54
console.log([...tree2.bfs()]); // [5, 3, 7, 1, 4, 6, 8] — 层序

性能考量#

生成器的开销：生成器函数每次调用 next() 都涉及上下文切换，对于简单的数值循环，for 循环比 for...of + 生成器快 2-5 倍
内存优势：当处理大量数据时，惰性迭代器的内存优势远大于性能开销。100 万条数据的数组链式操作会创建多个中间数组，而迭代器管道几乎不占额外内存
异步迭代器的微任务开销：每次 await 都会产生微任务，在高频场景下需要注意。可以通过批处理（batching）减少 await 次数

总结#

JavaScript 的迭代器体系是一个精心设计的抽象层：

Iterator Protocol 定义了”如何逐个产出值”
Iterable Protocol 定义了”如何获取迭代器”
Generator 简化了迭代器的实现
Async Iterator / Generator 将迭代扩展到异步领域
Iterator Helpers 提供了开箱即用的函数式操作

理解并熟练运用这些协议，不仅能写出更优雅的代码，还能在处理大数据集、流式数据、异步事件流等场景下获得显著的性能和内存优势。

音乐

音乐

前言#