异步编程是现代前端开发的重要课题，同时也是许多开发者头痛的难题。JavaScript 作为一门单线程语言，异步编程更是其不可或缺的特性之一。然而，传统的异步编程方式（如回调、Promise）在处理复杂场景时，代码可读性和可维护性十分糟糕。在 ES8 中，引入了迭代器和生成器这一新特性，提供了一种优雅的解决方案。
迭代器和生成器的概念
在了解迭代器和生成器之前，我们需要先了解 JavaScript 中两个重要的概念：可迭代对象和迭代器。
可迭代对象
可迭代对象是指具有 Symbol.iterator 属性的对象。该属性是一个函数，返回一个迭代器对象。例如，数组、Set、Map 等都是可迭代对象。
迭代器
迭代器是一个对象，具有 next 方法，该方法返回一个对象，包含了 done 和 value 两个属性。其中，done 表示是否已经迭代结束，value 表示当前值。调用 next 方法时，迭代器会返回该迭代器的下一个元素，直到 done 属性为 true。
生成器是一种特殊类型的迭代器，它们是用 function* 语法定义的函数。生成器不是普通函数，而是在被调用时返回一个迭代器对象，可用于实现异步编程。
使用生成器实现异步编程
简单例子
下面，我们以一个简单的例子来说明生成器的用法。
// javascriptcn.com 代码示例
function* helloWorld() {
yield 'hello';
yield 'world';
}
const gen = helloWorld();
console.log(gen.next()); // { value: 'hello', done: false }
console.log(gen.next()); // { value: 'world', done: false }
console.log(gen.next()); // { value: undefined, done: true }上面代码中，helloWorld 函数是一个生成器函数，当被调用时返回一个迭代器对象 gen。每次调用 gen.next() 方法时，都会输出下一个 yield 后面的值。
异步例子
下面，我们来看一个实际的应用。对于一个异步函数，函数执行时返回 Promise 对象，并在 Promise 对象内部实现异步逻辑。
function fetchData() {
return new Promise(resolve => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}我们可以使用生成器将该异步函数进行封装，使其像同步函数一样调用。
// javascriptcn.com 代码示例
function* fetchDataGenerator() {
const data = yield fetchData();
console.log(`data: ${data}`);
}
const gen = fetchDataGenerator();
const ret = gen.next();
ret.value.then(data => {
gen.next(data);
});上面代码中，fetchDataGenerator 函数是一个生成器函数，yield fetchData() 获取异步数据后，再输出到控制台。虽然看上去像同步代码的形式，但有一些区别：每次调用 gen.next() 都返回一个 Promise 对象，我们需要对该 Promise 对象的 resolve 管理好调用时机。这里使用了 ret.value.then 的方式将异步数据传入到生成器中。
迭代器和生成器的优势
相对于传统异步编程方式，使用迭代器和生成器的优势有哪些呢？
- 更直观的异步编程方式；
- 更好的编排异步流程；
- 更容易理解和维护的异步代码。
总结
迭代器和生成器是 ES8 中带来的重要新特性，能够简化异步编程，提高开发效率，并改善代码可读性和可维护性。搭配 Promise 或 async/await 使用，可以更好地进行异步编程。但同时，了解这一新特性也需要经历必要的学习和实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6539bdd47d4982a6eb337bf1