在现代的前端开发中，JavaScript 已经成为了不可或缺的一部分。而在 JavaScript 的语言规范中，ES6（ECMAScript 2015）是一个非常重要的版本，它引入了许多新的语言特性和功能，其中包括了迭代器和生成器。这两个功能虽然在代码中并不常见，但它们却是非常有用的，尤其是在处理大量数据或者进行异步操作的时候。在本文中，我们将会介绍 ES6 中的迭代器和生成器，并且提供详细的示例代码和指导意义。
迭代器
在 ES6 中，迭代器是一个对象，它可以通过 next() 方法依次访问一个数据集合中的每个元素。这个数据集合可以是一个数组、一个字符串、一个 Map 对象、一个 Set 对象等等。当迭代器访问完最后一个元素后，它会返回一个 done 属性为 true 的对象。
下面是一个使用迭代器遍历数组的示例代码：
let arr = [1, 2, 3];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: undefined, done: true }在上面的代码中，我们首先使用数组的 Symbol.iterator 属性获取到了一个迭代器对象 iter，然后通过不断调用它的 next() 方法来遍历数组中的每个元素。在第四次调用 next() 方法时，由于已经访问完了数组中的所有元素，所以迭代器返回了一个 done 属性为 true 的对象。
除了数组之外，我们还可以使用迭代器遍历字符串、Map 对象和 Set 对象。下面是一个遍历字符串的示例代码：
// javascriptcn.com 代码示例
let str = 'hello';
let iter = str[Symbol.iterator]();
console.log(iter.next()); // { value: "h", done: false }
console.log(iter.next()); // { value: "e", done: false }
console.log(iter.next()); // { value: "l", done: false }
console.log(iter.next()); // { value: "l", done: false }
console.log(iter.next()); // { value: "o", done: false }
console.log(iter.next()); // { value: undefined, done: true }生成器
在 ES6 中，生成器是一种特殊的函数，它可以通过 yield 语句暂停函数的执行，并返回一个中间结果。当生成器被再次调用时，它会从上一次暂停的位置继续执行，并返回下一个中间结果。当生成器执行完所有的语句后，它会返回一个 done 属性为 true 的对象。
下面是一个简单的生成器示例代码：
// javascriptcn.com 代码示例
function* generator() {
yield 1;
yield 2;
yield 3;
}
let gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }在上面的代码中，我们定义了一个名为 generator 的生成器函数，并在其中使用了三个 yield 语句来暂停函数的执行，并返回了三个中间结果。然后我们通过调用 generator() 函数来创建了一个生成器对象 gen，并通过不断调用 gen.next() 方法来遍历生成器中的每个中间结果。在第四次调用 gen.next() 方法时，由于生成器已经执行完所有的语句，所以它返回了一个 done 属性为 true 的对象。
除了简单的生成器之外，我们还可以使用生成器来进行异步操作，例如在 Promise 中使用生成器来实现异步操作的顺序执行。下面是一个使用生成器实现 Promise 顺序执行的示例代码：
// javascriptcn.com 代码示例
function* asyncTask() {
let result1 = yield fetch('https://api.example.com/data1');
let result2 = yield fetch('https://api.example.com/data2');
let result3 = yield fetch('https://api.example.com/data3');
return [result1, result2, result3];
}
function runAsyncTask(task) {
let gen = task();
function handleResult(result) {
if (result.done) {
return Promise.resolve(result.value);
} else {
return Promise.resolve(result.value)
.then(res => handleResult(gen.next(res)));
}
}
return handleResult(gen.next());
}
runAsyncTask(asyncTask).then(res => console.log(res));在上面的代码中，我们定义了一个名为 asyncTask 的生成器函数，并在其中使用了三个 yield 语句来暂停函数的执行，并使用 fetch 函数来进行异步操作。然后我们定义了一个名为 runAsyncTask 的函数，它接收一个生成器函数作为参数，并通过递归的方式依次执行生成器中的每个异步操作，直到所有操作执行完毕，并返回一个 Promise 对象。最后我们通过调用 runAsyncTask(asyncTask) 函数来执行该异步操作，并在操作执行完毕后输出结果。
总结
在本文中，我们介绍了 ES6 中的迭代器和生成器，并提供了详细的示例代码和指导意义。通过使用迭代器和生成器，我们可以更加方便地处理大量数据和进行异步操作，并且可以使代码更加简洁和易于维护。因此，掌握迭代器和生成器是每个前端开发人员必须具备的技能之一。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656a380bd2f5e1655d2aefd8