ES9 迭代器和生成器的新特性-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 作为一门脚本语言，其语言特性的不断迭代和更新十分迅速。在 ECMAScript 2018 (ES9) 中，迭代器和生成器的新特性得到了升级和完善，这也成为了前端开发的一个重要趋势。

迭代器和生成器的基本概念

在 JavaScript 中，迭代器是一个对象，该对象实现了一个 next() 方法，可用于逐个访问复杂数据类型中的元素。而生成器是一种更方便的创建迭代器的语法，通过 function* 声明一个生成器函数，就可以使用 yield 关键字在函数内部返回值，并且暂停执行。

ES9 迭代器的新特性

for-await-of 循环

在 ES9 中，开发者可以使用 for-await-of 来循环异步代码，该循环可以在异步函数中顺序执行异步操作，并等待每个异步任务完成后进入下一步。这个功能同样也支持同步操作，本质上就是对普通 for-of 循环的一个扩展和升级。

下面是一个简单的 for-await-of 循环的例子：

// javascriptcn.com 代码示例
async function fetchData() {
  const data1 = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data2 = await fetch(`https://jsonplaceholder.typicode.com/todos/${data1.id + 1}`);
  const data3 = await fetch(`https://jsonplaceholder.typicode.com/todos/${data2.id + 1}`);
  return [await data1.json(), await data2.json(), await data3.json()];
}

(async function() {
  for await (const data of fetchData()) {
    console.log(data);
  }
})();

迭代器元数据

在 ES9 中，在迭代器对象上添加了一些与元数据相关的处理方法，包括获取已完成的迭代器操作数，以及在迭代器操作时维护元数据信息等。

例如，可以使用 Iterator.prototype.return() 方法在迭代器遇到错误时强制退出，并在 finally 中执行一些清理代码：

// javascriptcn.com 代码示例
function* foo() {
  try {
    yield 1;
    yield 2;
    yield 3;
  } finally {
    console.log('finally');
  }
}

const iterator = foo();
console.log(iterator.next());
// {value: 1, done: false}
console.log(iterator.return());
// finally
// {value: undefined, done: true}
console.log(iterator.next());
// {value: undefined, done: true}

对于 JavaScript Map 和 Set 新的迭代器

在 ES9 中，Map 和 Set 对象都新增了一种用于获取键或值的迭代器类型，分别为 Map.prototype.keys() 和 Set.prototype.values()。

const set = new Set([1, 2, 3]);
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

console.log([...set.values()]); // [1,2,3]
console.log([...map.keys()]); // ["a","b","c"]

ES9 生成器的新特性

Promise.prototype.finally()

在 ES9 中，Promise 内置了一个 finally() 方法，该方法在 Promise 进入 fulfilled 或 rejected 状态时，都会执行一些清理操作。该方法不改变 Promise 的状态，并且可以对拒绝和成功状态下的 Promise 进行清理操作。它是在链式 Promise 中使用起来更为方便。

下面是一个使用 finally() 方法的例子：

// javascriptcn.com 代码示例
Promise.resolve(1)
  .then(() => 2)
  .finally(() => console.log('finally'))
  .then(console.log);
// 2
// finally

Promise.reject(3)
  .catch(() => 4)
  .finally(() => console.log('finally'))
  .then(console.log);
// 4
// finally

异步生成器

在 ES9 中，开发者可以通过 async 关键字和 yield 关键字，在生成器函数中实现异步操作。

下面是一个异步生成器函数的例子：

// javascriptcn.com 代码示例
async function* counter() {
  let i = 0;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i++;
  }
}

(async function() {
  for await (let count of counter()) {
    console.log(count)
  }
})();

总结

在 ES9 中迭代器和生成器得到了升级和完善，增强了 JavaScript 强大的迭代和生成功能，使开发者可以在异步编程和生成数据时获得更多的技术支持，提高了代码的可读性和可维护性。在开发实践中，我们应该充分掌握这些新特性，并在使用时充分注意它们的语言规范和使用方法。

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