在现代前端开发中，ECMAScript（简称 ES）是一种必须掌握的技术，并且随着技术的不断发展，ES的新版本也不断出现，为我们提供了更多的方便和便利。在 ES2015 中，引入了一种新的概念——迭代器（Iterator），用于遍历数据集合，它为我们的代码带来了更加清晰和简单的方式来处理数据。在本文中，我们将会介绍 ECMAScript 2018 中的迭代器使用技巧及实践。
迭代器简介
在 ES2015 中，迭代器是 ES6 的一部分，其主要作用是遍历数据集合。迭代器可以调用集合中的每个项目，并在需要时返回一个值，这种方式被称为惰性计算（Lazy computation）。
ES2018 中引入了新的迭代器特性，包括尾调用优化（Tail call optimization）、异步生成器和异步迭代器。其中，我们将会介绍异步生成器和异步迭代器。
异步生成器和异步迭代器
在 ES2018 中，异步生成器和异步迭代器是另外两个非常有用的新特性。异步生成器和异步迭代器可以让我们更方便的处理异步数据，包括来自网络调用、用户界面等异步实体的回调函数。
异步生成器
异步生成器是一种特殊的生成器函数，用于生成一个异步数据集合。它的主要语法形式是异步函数声明async function* 和异步函数表达式async function*()。
使用异步生成器可以避免我们手动调用回调函数。下面是一个异步生成器的例子：
async function* asyncRange(start, end) {
for(let i = start; i <= end; i++) {
yield i;
}
}在上述代码中，我们定义了一个简单的异步生成器函数。它接收两个参数start和end，然后使用for循环遍历并依次产生每个值。使用异步生成器的语法，它将立即返回一个表示异步生成器的对象，而不是一个回调函数对象。
异步迭代器
异步迭代器是用于按需遍历异步数据集合的API，其中包含一个next()方法来获取下一个值，类似于同步迭代器的“Symbol.iterator”方法。异步迭代器还包含一个AsyncIterator接口，该接口采用next()方法的形式。
异步迭代器的实现方式与同步迭代器相似，但是它们是异步执行的，因此它们的返回值是一个Promise。下面是一个异步迭代器的例子：
async function* asyncRange(start, end) {
for(let i = start; i <= end; i++) {
await new Promise(resolve => setTimeout(resolve, 1000));
yield i;
}
}
(async () => {
const it = asyncRange(1, 5);
for await (const i of it) {
console.log(i);
}
})();在这个例子中，我们定义一个异步生成器函数asyncRange，函数内部使用了一个Promise来模拟异步操作，并按顺序生成了一组Promise结果。接下来，我们用for await...of循环，在每次异步生成器异步完成之后打印结果。
使用迭代器优化代码
使用迭代器可以优化网站性能并将代码更清晰地分离出来。在前端开发中，最常见的使用迭代器的场景是循环遍历数组、对象等数据类型。
下面是一个简单的使用迭代器的例子，计算平均数：
function average(iterator) {
let sum = 0;
let count = 0;
for (let val of iterator) {
sum += val;
count++;
}
return sum/count;
}
const arr = [1, 2, 3, 4, 5];
console.log(average(arr.values()));在这个例子中，我们通过使用arr.values()来遍历arr中的所有值，并在for...of循环中计算它们的平均值。这样做不仅简单，而且可以避免显式编写for循环的问题，因此它更清晰和简单。
总结
迭代器是ES2015引入的重要概念，在ES2018中进一步完善。使用迭代器处理数据在现代web开发中具有广泛的应用，它可以帮助我们更轻松地处理异步数据。本文重点介绍了异步生成器和异步迭代器两个特性，并提供了一些使用迭代器的技巧，希望读者能够掌握这些技能并能够将它们应用到实际工作中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b31416add4f0e0ffc252c9