什么是JavaScript的迭代协议和异步迭代协议，以及它们如何统一遍历不同数据源的方式？

JavaScript的迭代协议和异步迭代协议为数据遍历提供了统一接口，通过Symbol.iterator和Symbol.asyncIterator使对象可被for...of和for await...of遍历，实现了同步与异步数据源的标准化处理，提升了代码通用性与可读性。

JavaScript的迭代协议和异步迭代协议，本质上是为JavaScript对象提供了一套统一的、可预测的遍历接口。它们让

for...of

for await...of

解决方案

要深入理解这两个协议，我们得先看它们各自的定义和作用，再来体会它们是如何携手统一数据遍历的。

迭代协议 (Iteration Protocol)

迭代协议是JavaScript中一个核心概念，它允许对象定义其自身的遍历行为。当一个对象实现了迭代协议，它就被称为“可迭代对象”（Iterable）。 一个对象要成为可迭代对象，必须满足以下条件：

1. 拥有一个键为

   Symbol.iterator

   登录后复制
   的方法。 这个方法必须是一个无参数的函数。

2. Symbol.iterator

   登录后复制
   方法必须返回一个“迭代器对象”（Iterator）。
3. 迭代器对象必须拥有一个

   next()

   登录后复制
   方法。

4. next()

   登录后复制
   方法必须返回一个包含

   value

   登录后复制
   和

   done

   登录后复制
   两个属性的对象。

   value

   登录后复制
   是当前迭代到的值，

   done

   登录后复制
   是一个布尔值，表示迭代是否结束（

   true

   登录后复制
   表示结束，

   false

   登录后复制
   表示还有更多值）。

当我们在代码中使用

for...of

立即学习“Java免费学习笔记（深入）”；

1. 调用可迭代对象的

   Symbol.iterator

   登录后复制
   方法，获取一个迭代器。
2. 反复调用迭代器的

   next()

   登录后复制
   方法。
3. 每次获取

   next()

   登录后复制
   返回的

   value

   登录后复制
   属性，直到

   done

   登录后复制
   属性为

   true

   登录后复制
   。

常见的内置可迭代对象包括：

Array

String

Map

Set

TypedArray

arguments

NodeList

for...of

const myArray = [1, 2, 3];
for (const item of myArray) {
  console.log(item); // 1, 2, 3
}

const myString = "hello";
for (const char of myString) {
  console.log(char); // h, e, l, l, o
}

异步迭代协议 (Asynchronous Iteration Protocol)

异步迭代协议是ES2018引入的，它将迭代的概念扩展到了异步数据源。当数据不是一次性全部可用，而是需要等待一段时间才能获取下一个值时，异步迭代协议就派上用场了。 一个对象要成为“异步可迭代对象”（Async Iterable），必须满足以下条件：

1. 拥有一个键为

   Symbol.asyncIterator

   登录后复制
   的方法。 这个方法必须是一个无参数的函数。

2. Symbol.asyncIterator

   登录后复制
   方法必须返回一个“异步迭代器对象”（Async Iterator）。
3. 异步迭代器对象必须拥有一个

   next()

   登录后复制
   方法。

4. next()

   登录后复制
   方法必须返回一个Promise。 这个Promise会最终解析（resolve）为一个包含

   value

   登录后复制
   和

   done

   登录后复制
   两个属性的对象。

与

for...of

for await...of

for await...of

1. 调用异步可迭代对象的

   Symbol.asyncIterator

   登录后复制
   方法，获取一个异步迭代器。
2. 反复调用异步迭代器的

   next()

   登录后复制
   方法，等待其返回的Promise解析。
3. 每次Promise解析后，获取其

   value

   登录后复制
   属性，直到解析后的对象

   done

   登录后复制
   属性为

   true

   登录后复制
   。

这对于处理像文件流、网络请求分页数据、WebSocket消息等场景非常有用，它们的数据是随着时间推移逐渐到达的。

async function processAsyncData(asyncIterable) {
  for await (const dataChunk of asyncIterable) {
    console.log("Received:", dataChunk);
    // 可以在这里处理每个数据块
  }
  console.log("Finished processing async data.");
}

// 假设有一个模拟的异步数据源
// ... (稍后在副标题中会给出具体实现)

如何统一遍历不同数据源？

核心在于抽象。无论是同步还是异步，这两个协议都提供了一个共同的“语言”——

next()

{ value, done }

{ value, done }

• 对于同步数据，

  for...of

  登录后复制
  循环无需关心数据是存在数组里，还是通过字符串的索引一个个取出，只要对象实现了

  Symbol.iterator

  登录后复制
  ，它就知道如何获取下一个值。
• 对于异步数据，

  for await...of

  登录后复制
  循环也同样无需关心数据是从网络来、从文件读，还是从某个事件队列中弹出，只要对象实现了

  Symbol.asyncIterator

  登录后复制
  ，它就知道如何等待并获取下一个值。

这种统一性让开发者可以用一套熟悉的循环语法，去处理各种各样的数据结构和数据流，极大地提升了代码的复用性和可维护性。在我看来，这就像是给JavaScript的所有“容器”或“数据流”颁发了一个通用的“通行证”，只要拿着这个证，就能被

for...of

for await...of

为什么我们需要迭代协议？它解决了哪些传统遍历的痛点？

回想一下JavaScript早期，遍历数据简直是“百家争鸣”。数组有

for

forEach

for...in

首先，缺乏统一的遍历接口。如果你想遍历一个自定义的数据结构，比如一个链表或者一棵树，你不得不为每种结构编写特定的遍历逻辑。这不仅增加了代码量，也降低了通用性。每次遇到新结构，都要重新发明轮子。

其次，

for...in

for...in

hasOwnProperty

const obj = { a: 1, b: 2 };
Object.prototype.c = 3; // 污染原型链

for (const key in obj) {
  console.log(key); // a, b, c (如果没加hasOwnProperty)
}

// 正确的做法
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key); // a, b
  }
}

这种额外的防御性编程，虽然必要，但确实是历史包袱。

再者，可读性与简洁性不足。对于简单的数组遍历，

for (let i = 0; i < arr.length; i++)

迭代协议的出现，恰好解决了这些痛点。它提供了一个标准化的、基于值的遍历机制。

• for...of

  登录后复制
  循环直接关注“值”，让遍历代码更简洁、更具可读性。
• 它为所有可迭代对象提供了一个统一的接口，无论底层数据结构如何，都可以用

  for...of

  登录后复制
  来遍历，极大地提升了代码的通用性和抽象能力。
• 最重要的是，它使得自定义对象也能轻松地被

  for...of

  登录后复制
  遍历，只要你实现

  Symbol.iterator

  登录后复制
  。这让开发者能够构建出更优雅、更符合JavaScript生态习惯的数据结构。比如，一个自定义的

  Range

  登录后复制
  对象，可以像数组一样被遍历，而无需暴露其内部实现细节。这种能力，在我看来，是JavaScript语言表达力的一次飞跃。

异步迭代协议在现代Web开发中扮演了什么角色？有哪些典型应用场景？

异步迭代协议在现代Web开发中扮演着越来越重要的角色，尤其是在处理数据流、实时通信和优化资源加载方面。它的核心价值在于，它提供了一种优雅、顺序地处理异步数据序列的方式，而无需陷入回调地狱或复杂的Promise链。

想象一下，我们不再是等待所有数据一次性加载完毕，而是像水流一样，数据来一点，处理一点。这对于用户体验和系统性能都至关重要。

典型应用场景：

1. 处理流式数据（Streaming Data）：

   • 文件读取：当处理大型文件时，例如用户上传的视频、音频或大型CSV文件，我们通常不希望一次性将整个文件加载到内存。通过异步迭代，可以分块读取文件内容，每读取一块就处理一块，从而节省内存并提高响应速度。例如，在Node.js环境中，

     fs.createReadStream()

     登录后复制
     返回的Readable Stream就是异步可迭代的。
   • 网络数据流：WebSocket消息、Server-Sent Events (SSE) 或Fetch API的响应体 (

     Response.body

     登录后复制
     ，当它是一个

     ReadableStream

     登录后复制
     时) 都可以作为异步可迭代对象来处理。这使得实时通信和渐进式数据加载变得非常直观。

   // 伪代码示例：处理一个Fetch API的响应流
   async function processResponseStream(url) {
     const response = await fetch(url);
     const reader = response.body.getReader(); // 获取ReadableStreamDefaultReader
   
     // 我们可以手动实现一个异步迭代器，或者如果浏览器支持，直接 for await (const chunk of response.body)
     const asyncIterable = {
       async *[Symbol.asyncIterator]() {
         while (true) {
           const { done, value } = await reader.read();
           if (done) return;
           yield value;
         }
       }
     };
   
     for await (const chunk of asyncIterable) {
       console.log("Received chunk:", new TextDecoder().decode(chunk));
       // 处理数据块，比如更新UI，或者拼接数据
     }
     console.log("Stream finished.");
   }
   // processResponseStream('some-large-data-api');

   登录后复制

2. 分页API数据的顺序获取： 许多RESTful API为了性能和避免一次性返回过多数据，会采用分页机制。通常我们需要循环调用API，直到所有页面数据都被获取。使用异步迭代协议，可以封装一个异步迭代器，每次

   next()

   登录后复制
   被调用时，它就去请求下一页数据，直到没有更多数据为止。这让处理分页逻辑变得异常简洁和富有表达力。

   // 假设一个API返回 { data: [...], nextPageToken: '...' }
   async function* fetchPaginatedData(initialUrl) {
     let url = initialUrl;
     while (url) {
       const response = await fetch(url);
       const result = await response.json();
       yield* result.data; // 每次返回当前页的所有数据
       url = result.nextPageToken ? `${initialUrl.split('?')[0]}?token=${result.nextPageToken}` : null;
     }
   }
   
   async function getAllItems() {
     for await (const item of fetchPaginatedData('/api/items?page=1')) {
       console.log("Processing item:", item);
     }
     console.log("All items fetched.");
   }
   // getAllItems();

   登录后复制

3. 事件序列处理： 虽然大多数DOM事件处理是通过回调函数完成的，但在某些高级场景，比如处理复杂的拖放手势、用户输入序列，或者来自Web Worker的连续消息，将事件视为一个异步序列来处理，可以简化逻辑。RxJS等响应式编程库就大量利用了类似的思想，而异步迭代协议提供了原生支持。

4. WebRTC数据通道： 在WebRTC中，

   RTCDataChannel

   登录后复制
   可以发送和接收任意数据。如果需要处理大量连续的数据包，异步迭代协议可以提供一种结构化的方式来消费这些数据。

总的来说，异步迭代协议让JavaScript能够以一种声明式、非阻塞的方式处理“随时间到达的数据”。它将异步操作的复杂性隐藏在

for await...of

讯飞听见会议

科大讯飞推出的AI智能会议系统

19

查看详情

如何为自定义对象实现迭代器和异步迭代器？有哪些实现上的技巧和注意事项？

为自定义对象实现迭代器和异步迭代器，是让它们融入JavaScript生态，被

for...of

for await...of

实现迭代器 (

Symbol.iterator

最直观的实现方式是手动创建一个迭代器对象，但更推荐使用生成器函数 (Generator Function)，它能极大地简化迭代器的编写。

示例1：手动实现一个简单的

Range

假设我们想创建一个

Range

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end; // 捕获end值，避免在next中引用this

    return {
      next() {
        if (current <= end) {
          return { value: current++, done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
}

const myRange = new Range(1, 5);
for (const num of myRange) {
  console.log(num); // 1, 2, 3, 4, 5
}

这里，

[Symbol.iterator]()

next()

current

end

示例2：使用生成器函数实现

Range

生成器函数通过

function*

yield

for...of

yield

class RangeGenerator {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  *[Symbol.iterator]() { // 注意这里的 *
    for (let i = this.start; i <= this.end; i++) {
      yield i; // 每次yield一个值
    }
  }
}

const myRangeGen = new RangeGenerator(1, 5);
for (const num of myRangeGen) {
  console.log(num); // 1, 2, 3, 4, 5
}

这种方式代码更简洁，内部状态管理（

i

实现异步迭代器 (

Symbol.asyncIterator

异步迭代器的实现与同步迭代器类似，但

next()

示例：模拟一个异步数据流

我们创建一个

AsyncDataStream

class AsyncDataStream {
  constructor(limit, delayMs) {
    this.limit = limit;
    this.delayMs = delayMs;
    this.count = 0;
  }

  async *[Symbol.asyncIterator]() { // 注意这里的 async *
    while (this.count < this.limit) {
      await new Promise(resolve => setTimeout(resolve, this.delayMs)); // 模拟异步延迟
      yield `Data-${++this.count}`; // 产出异步值
    }
  }
}

async function processStream() {
  const stream = new AsyncDataStream(3, 1000); // 产出3个值，每个间隔1秒
  console.log("Starting to process async stream...");
  for await (const data of stream) {
    console.log("Received:", data);
  }
  console.log("Async stream processing finished.");
}

// processStream();
// 预期输出：
// Starting to process async stream...
// (1秒后) Received: Data-1
// (1秒后) Received: Data-2
// (1秒后) Received: Data-3
// Async stream processing finished.

异步生成器函数通过

async function*

await

yield

实现上的技巧和注意事项：

1. 生成器函数是首选：无论是同步还是异步迭代器，生成器函数（

   function*

   登录后复制
   或

   async function*

   登录后复制
   ）都是实现迭代器的最佳实践。它们自动处理迭代状态，代码更简洁、更易读。

2. 迭代器是单次的：默认情况下，一个迭代器实例通常只能被遍历一次。每次调用

   [Symbol.iterator]()

   登录后复制
   或

   [Symbol.asyncIterator]()

   登录后复制
   都应该返回一个新的迭代器实例，以确保多次遍历的独立性。如果你返回

   this

   登录后复制
   作为迭代器，那么这个对象只能被遍历一次。

3. done: true

   登录后复制
   的重要性：确保在没有更多值时，

   next()

   登录后复制
   方法返回的对象中

   done

   登录后复制
   属性为

   true

   登录后复制
   。这是循环终止的信号。忘记设置

   done: true

   登录后复制
   会导致无限循环。

4. 错误处理：在生成器函数中，可以使用

   try...catch

   登录后复制
   来捕获异步操作中的错误。如果迭代器内部抛出错误，

   for...of

   登录后复制
   或

   for await...of

   登录后复制
   循环会终止，并将错误抛出到外部。

5. 资源清理 (

   return()

   登录后复制
   方法)：如果你的迭代器在内部持有资源（例如文件句柄、网络连接），并且希望在迭代提前终止（例如

   break

   登录后复制
   、

   return

   登录后复制
   或抛出错误）时进行清理，你可以在迭代器对象上实现一个可选的

   return()

   登录后复制
   方法。这个方法会在迭代器提前关闭时被调用。

   // 示例：带清理功能的迭代器
   function* myGeneratorWithCleanup() {
     try {
       console.log("Resource acquired.");
       yield 1;
       yield 2;
       yield 3;
     } finally {
       console.log("Resource released.");
     }
   }
   
   const gen = myGeneratorWithCleanup();
   console.log(gen.next()); // Resource acquired. { value: 1, done: false }
   gen.return(); // { value: undefined, done: true }，会触发 finally 块
   // Resource released.

   登录后复制

   对于异步迭代器，

   return()

   登录后复制
   方法也应该返回一个Promise。

6. 性能考虑：对于非常大的数据集，迭代器是惰性求值的，这本身就是

以上就是什么是JavaScript的迭代协议和异步迭代协议，以及它们如何统一遍历不同数据源的方式？的详细内容，更多请关注php中文网其它相关文章！