ES9: 异步迭代器自定义 iterable + 顺序的生成器-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2018 (ES9) 带来了一些新的功能和语言改进，其中包括异步迭代器和顺序的生成器，可以使处理异步数据集变得更加容易和直观。在本文中，我们将介绍这些新功能、如何使用它们以及其实现背后的一些细节。

异步迭代器

异步迭代器是一种允许我们处理异步数据集的迭代器。在以前，处理异步数据集通常需要使用回调函数或 Promise，这种方式看起来比较笨拙。而异步迭代器允许我们使用 for-await-of 循环与异步数据集进行交互，从而使异步数据集的处理变得更加容易和直观。

实现一个异步迭代器

实现一个异步迭代器的例子：

// javascriptcn.com 代码示例
const asyncIterable = {
  async *[Symbol.asyncIterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

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

代码中我们首先定义了一个对象 asyncIterable，它有一个属性，即 Symbol.asyncIterator。这个属性的值是一个生成异步迭代器的生成器函数，它使用 async 和 yield 关键字来产生值。这个迭代器对象可以使用 for-await-of 循环遍历，并以同步的方式处理异步操作。

自定义异步迭代器

上面的例子是一个简单的异步迭代器，但实际中我们可能需要更加自定义的迭代器。我们可以通过在迭代器对象上添加自定义方法来实现这个目标。

// javascriptcn.com 代码示例
const todoList = {
  tasks: [],
  async *[Symbol.asyncIterator]() {
    while (this.tasks.length > 0) {
      yield await this.tasks.shift();
    }
  },
  addTask(task) {
    this.tasks.push(task);
  },
  getSize() {
    return this.tasks.length;
  }
};

(async function () {
  todoList.addTask('Task 1');
  todoList.addTask('Task 2');
  todoList.addTask('Task 3');

  console.log(`Task list size: ${todoList.getSize()}`);

  for await (const task of todoList) {
    console.log(`Completed task: ${task}`);
  }
})();

在这个例子中，我们定义了一个 todoList 对象，它有一个 tasks 数组属性。我们将 Symbol.asyncIterator 属性设置为一个使用 while 循环的异步生成器，它从 tasks 数组中提取出值。addTask 方法用于添加任务到 tasks 数组中，getSize 方法用于获取数组的长度。

顺序生成器

顺序生成器是一种在 JavaScript 中生成顺序数据的方法。顺序生成器可以在需要时一次生成一个值，直到完成序列。这个功能的一种常见应用是在计算机科学中：生成器可以用来遍历无限数据集合，例如斐波那契数列。

实现一个顺序生成器

实现一个顺序生成器的例子：

// javascriptcn.com 代码示例
function* fibonacci() {
  let current = 0;
  let next = 1;
  while (true) {
    yield current;
    [current, next] = [next, current + next];
  }
}

const fib = fibonacci();
for (let i = 0; i < 10; i++) {
  console.log(fib.next().value);
}

这个代码定义了一个 fibonacci 生成器函数，它返回一个迭代器对象。这个迭代器一直生成斐波那契数列的下一个数字（除非被停止）。我们可以使用 for 循环调用这个迭代器，从而获得生成的值。

自定义顺序生成器

同样，我们可以通过不同的方式自定义顺序生成器，并使用它们为程序产生有序数据。

// javascriptcn.com 代码示例
function* countdown(count) {
  while (count > 0) {
    yield count--;
  }
}

const counter = countdown(5);
for (let i = 0; i < 5; i++) {
  console.log(counter.next().value);
}

这个例子定义了一个 countdown 生成器函数，它使用 while 循环从输入值往下计数。当计数器被停止时输出 undefined 的值。我们可以使用 for 循环调用这个函数的迭代器，并获得生成的值。

异步顺序生成器

我们也可以在生成器函数中使用 async 关键字来创建一个异步的顺序生成器。

// javascriptcn.com 代码示例
async function* asyncCountdown(count) {
  while (count > 0) {
    yield Promise.resolve(count--);
  }
}

(async function() {
  const counter = asyncCountdown(5);
  for await (const val of counter) {
    console.log(val);
  }
})();

在这个例子中，我们将一个异步函数转换为异步生成器函数。迭代器在从生成器函数中获取值时会等待值被解析后输出。使用 for-await-of 循环可以简单地处理异步顺序数据生成。这有助于简化异步逻辑，因为语法更类似同步代码。

总结

ES9 提供了一种新的方式来处理异步数据集和顺序生成器。这个功能使处理异步数据集变得更加容易和可读，并允许我们使用同步代码的编程模型处理异步数据。

本文介绍了异步迭代器与顺序生成器的基础知识，以及如何实现和使用它们。熟练掌握这些新功能可以提高开发效率，使代码更易于维护。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e76927d4982a6ebf7dd07