JavaScript内核与高级编程之：`JavaScript` 的 `Symbol.asyncIterator`：其在异步迭代器中的作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊 JavaScript 里一个有点神秘，但又非常实用的家伙：Symbol.asyncIterator。

可能有些小伙伴听到“Symbol”就有点发怵，别怕，这玩意儿没那么可怕。咱们今天把它扒个精光，让它彻底为咱们所用。

一、啥是迭代器？异步迭代器又是啥玩意儿？

在深入 Symbol.asyncIterator 之前，咱们先得搞清楚迭代器是个啥。简单来说，迭代器就是一种可以让你逐个访问集合中元素的东西。想象一下，你有一堆苹果，迭代器就像一只手，每次帮你从这堆苹果里拿出一个。

JavaScript 里，我们通常用 for...of 循环来配合迭代器使用。例如：

const myArray = [1, 2, 3, 4, 5];

for (const element of myArray) {
  console.log(element);
}

在这个例子里，myArray 就是一个可迭代对象，它内部有一个迭代器，for...of 循环会不停地调用这个迭代器，直到所有元素都被访问完。

那么，异步迭代器又是啥？顾名思义，它就是异步版本的迭代器。这意味着每次从集合中取元素，可能需要等待一段时间，比如从网络请求获取数据，或者从数据库读取信息。

二、Symbol.asyncIterator：异步迭代器的灵魂

Symbol.asyncIterator 是一个特殊的 Symbol，它定义了一个对象上的方法，这个方法会返回一个异步迭代器对象。可以把它理解为异步迭代器的“身份证”，有了它，JavaScript 才能认出你是个异步迭代器。

一个对象要成为异步可迭代对象，就必须具有一个键为 Symbol.asyncIterator 的方法。这个方法需要返回一个符合异步迭代器协议的对象。

三、异步迭代器协议：next() 方法的异步之旅

异步迭代器协议规定，异步迭代器对象必须有一个 next() 方法。这个 next() 方法返回一个 Promise，Promise resolve 的值是一个包含 value 和 done 两个属性的对象。

value: 迭代器返回的当前值。
done: 一个布尔值，表示迭代是否完成。如果为 true，则迭代器已经到达集合的末尾。

咱们来看一个例子，创建一个简单的异步迭代器：

const asyncIterable = {
  [Symbol.asyncIterator]() {
    let i = 0;
    return {
      next() {
        return new Promise(resolve => {
          setTimeout(() => {
            if (i < 5) {
              resolve({ value: i++, done: false });
            } else {
              resolve({ value: undefined, done: true });
            }
          }, 500); // 模拟异步操作，延迟 500ms
        });
      }
    };
  }
};

async function iterate() {
  for await (const element of asyncIterable) {
    console.log(element);
  }
}

iterate(); // 输出 0, 1, 2, 3, 4 (每隔 500ms)

在这个例子中：

我们定义了一个对象 asyncIterable，它具有一个键为 Symbol.asyncIterator 的方法。
这个方法返回一个对象，该对象有一个 next() 方法。
next() 方法返回一个 Promise，Promise 在 500ms 后 resolve。
Promise resolve 的值是一个包含 value 和 done 属性的对象。
我们使用 for await...of 循环来遍历这个异步可迭代对象。

四、for await...of：异步迭代的正确姿势

for await...of 循环是专门用于遍历异步可迭代对象的。它会等待 next() 方法返回的 Promise resolve，然后将 resolve 的值赋给循环变量。

需要注意的是，for await...of 循环只能在 async 函数中使用。如果你在非 async 函数中使用它，会报错。

五、应用场景：让异步操作更优雅

Symbol.asyncIterator 在处理异步数据流时非常有用。比如：

从 API 获取数据： 我们可以创建一个异步迭代器，每次从 API 获取一批数据，直到所有数据都获取完毕。
读取大型文件： 可以创建一个异步迭代器，每次读取文件的一部分，避免一次性将整个文件加载到内存中。
处理 WebSocket 数据流： 可以创建一个异步迭代器，监听 WebSocket 连接，并在收到新数据时将其返回。

下面是一个从 API 获取数据的例子：

async function* fetchUsers() {
  let page = 1;
  let hasMore = true;

  while (hasMore) {
    const response = await fetch(`https://api.example.com/users?page=${page}`);
    const data = await response.json();

    if (data.users.length === 0) {
      hasMore = false;
      return;
    }

    for (const user of data.users) {
      yield user;
    }

    page++;
  }
}

async function processUsers() {
  for await (const user of fetchUsers()) {
    console.log(user.name);
  }
}

processUsers();

在这个例子中：

我们定义了一个异步生成器函数 fetchUsers。异步生成器函数是一种特殊的函数，它可以暂停执行，并在稍后恢复执行。
fetchUsers 函数使用 yield 关键字来返回每个用户。 yield 关键字会将函数暂停，并将指定的值返回给调用者。
我们使用 for await...of 循环来遍历 fetchUsers 函数返回的异步迭代器。

六、使用生成器函数简化异步迭代器的创建

手动创建异步迭代器比较繁琐，我们可以使用异步生成器函数来简化这个过程。异步生成器函数是一种特殊的函数，它可以暂停执行，并在稍后恢复执行。异步生成器函数使用 async function* 语法定义。

异步生成器函数会自动创建一个异步迭代器，并处理 next() 方法的实现。我们只需要使用 yield 关键字来返回每个元素即可。

咱们把上面的例子用异步生成器函数改写一下：

async function* generateNumbers(limit) {
  for (let i = 0; i < limit; i++) {
    await new Promise(resolve => setTimeout(resolve, 200)); // 模拟异步延迟
    yield i;
  }
}

async function consumeNumbers() {
  for await (const number of generateNumbers(5)) {
    console.log(number); // 输出 0, 1, 2, 3, 4 (每隔 200ms)
  }
}

consumeNumbers();

在这个例子里，generateNumbers 就是一个异步生成器函数。它内部使用 yield 关键字来产生数字，并使用 await 关键字来等待异步操作完成。 for await...of 循环会自动调用 generateNumbers 函数返回的异步迭代器的 next() 方法，并处理 Promise 的 resolve。

七、异步迭代器与 Promise 的结合：更强大的异步控制

异步迭代器和 Promise 结合使用，可以实现更复杂的异步控制。例如，我们可以使用 Promise.all 来并行执行多个异步迭代器，或者使用 Promise.race 来等待第一个完成的异步迭代器。

八、实际案例分析：流式处理大型数据集

假设我们需要处理一个非常大的 CSV 文件，该文件包含数百万行数据。如果我们一次性将整个文件加载到内存中，可能会导致内存溢出。我们可以使用异步迭代器来流式处理这个文件。

const fs = require('fs');
const readline = require('readline');

async function* readLines(filePath) {
  const fileStream = fs.createReadStream(filePath);

  const rl = readline.createInterface({
    input: fileStream,
    crlfDelay: Infinity // Recognize all instances of CR LF
  });

  for await (const line of rl) {
    yield line;
  }
}

async function processData() {
  const filePath = 'large_data.csv'; // 替换为你的 CSV 文件路径
  let rowCount = 0;
  for await (const line of readLines(filePath)) {
    // 在这里处理每一行数据
    console.log(`Processing line ${rowCount}: ${line.substring(0,50)}...`); // 打印前50个字符
    rowCount++;

    // 模拟耗时操作，避免快速处理导致阻塞
    await new Promise(resolve => setTimeout(resolve, 10));
  }

  console.log(`Total rows processed: ${rowCount}`);
}

processData();

在这个例子中：

我们使用 fs.createReadStream 创建一个文件读取流。
我们使用 readline.createInterface 创建一个行读取接口。
我们使用 for await...of 循环来遍历行读取接口，并逐行读取文件内容。
在循环中，我们可以对每一行数据进行处理，例如解析 CSV 数据，并将其存储到数据库中。

九、总结：Symbol.asyncIterator 的价值

Symbol.asyncIterator 是 JavaScript 中用于定义异步迭代器的关键 Symbol。它可以让我们更优雅地处理异步数据流，避免回调地狱，并提高代码的可读性和可维护性。

通过使用异步迭代器，我们可以：

逐个处理异步数据，避免一次性加载大量数据到内存中。
使用 for await...of 循环来简化异步迭代的代码。
使用异步生成器函数来快速创建异步迭代器。
将异步迭代器与 Promise 结合使用，实现更复杂的异步控制。

特性	描述	优点	使用场景
`Symbol.asyncIterator`	定义异步可迭代对象的 Symbol。	允许对象定义自己的异步迭代行为。	定义需要异步获取数据的集合的迭代方式。
异步迭代器协议	定义了 `next()` 方法，该方法返回一个 Promise，resolve 的值为 `{ value: any, done: boolean }`。	标准化异步迭代的方式，方便编写可复用的异步迭代逻辑。	任何需要异步迭代的场景，例如从API分页获取数据、流式读取文件。
`for await...of`	用于遍历异步可迭代对象的循环。	简化异步迭代的代码，使代码更易读。	遍历任何实现了异步迭代器协议的对象。
异步生成器函数	使用 `async function*` 定义的函数，可以暂停和恢复执行，并使用 `yield` 返回异步值。	简化异步迭代器的创建过程，使代码更简洁。	创建复杂的异步迭代器，例如从多个数据源获取数据并合并。
应用场景	处理异步数据流，例如从 API 获取数据、读取大型文件、处理 WebSocket 数据流。	提高代码的可读性和可维护性，避免回调地狱。	任何需要处理异步数据流的场景。

希望今天的讲座能帮助大家更好地理解 Symbol.asyncIterator。记住，实践是检验真理的唯一标准，赶紧动手试试吧！如果有任何问题，欢迎随时提问。谢谢大家！

发表回复 取消回复

发表回复取消回复