什么是迭代器和生成器
ES6 引入了两个新概念：迭代器和生成器。在 JavaScript 中，迭代器和生成器都是用于处理集合数据的，相对于传统操作数组的方式，迭代器和生成器提供了更加灵活、高效的操作方式。
迭代器是一个对象，它提供了一个 next() 方法，该方法返回一个包含两个属性的对象：value 和 done。value 属性表示当前所迭代元素的值，done 属性表示迭代器是否结束了。
生成器是一种特殊类型的函数，能够在函数的执行过程中暂停和恢复它的状态。通过在函数内部使用关键字 yield，生成器函数能够每次返回一个迭代器对象，函数执行到 yield 语句时会暂停，等待下一次的调用。
迭代器和生成器的使用场景
迭代器和生成器最常用的场景是处理集合数据。在迭代器和生成器出现之前，我们通常使用循环来遍历数组和其他集合数据，但这种方式需要手动控制循环变量，代码可读性低且容易出错。相对而言，迭代器和生成器提供了更加优雅的遍历方式。
另外，当需要遍历大型数据集合时，传统的循环方式常常会导致内存占用过高，甚至会导致浏览器或服务器崩溃。而基于迭代器和生成器的遍历方式则可以很好地解决这个问题。
迭代器的使用
下面是一个简单的数组迭代器的示例，使用迭代器遍历数组中的元素：
// javascriptcn.com 代码示例
const arr = [1, 2, 3, 4, 5];
function createIterator(array) {
let i = 0;
return {
next: function() {
return i < array.length ?
{ value: array[i++], done: false } :
{ value: undefined, done: true };
}
}
}
const iterator = createIterator(arr);
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }在这个示例中，我们首先定义了一个数组 arr，然后定义了一个迭代器 createIterator，该迭代器可以遍历 arr 数组中的元素。在 createIterator 函数内部，我们使用了一个变量 i 来记录当前迭代到的元素的下标。在 next() 方法中，我们使用 i 来获取当前元素，并将 i 递增。
在调用 iterator.next() 方法时，迭代器会返回一个对象，该对象包含两个属性：value 和 done。value 属性表示当前迭代的元素的值，done 属性表示迭代器是否已经遍历完了所有元素。
生成器的使用
下面是一个简单的生成器函数示例，使用生成器函数遍历数组中的元素：
// javascriptcn.com 代码示例
function* createGenerator(array) {
for (let i = 0; i < array.length; i++) {
yield array[i];
}
}
const arr = [1, 2, 3, 4, 5];
const generator = createGenerator(arr);
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: 4, done: false }
console.log(generator.next()); // { value: 5, done: false }
console.log(generator.next()); // { value: undefined, done: true }生成器函数 createGenerator 使用 for 循环遍历数组中的每一个元素，在遍历到每一个元素时使用 yield 关键字暂停执行，并返回当前元素的值。在调用 generator.next() 方法时，生成器函数会从上一次暂停的位置继续执行，并返回一个对象，该对象包含 value 和 done 属性。
ES7 中对迭代器和生成器的扩展
在 ES7 中，迭代器和生成器被进一步扩展，引入了两个新的概念：async 和 await。通过这两个关键字，我们可以很好地实现异步编程。
下面是一个使用 async/await 实现异步编程的示例，用于读取远程 JSON 数据：
// javascriptcn.com 代码示例
async function fetchJson(url) {
const response = await fetch(url);
const data = await response.json();
return data;
}
fetchJson('https://jsonplaceholder.typicode.com/todos/1')
.then(data => console.log(data))
.catch(error => console.error(error));在这个示例中，我们首先定义了一个 fetchJson 函数，该函数使用 async 声明。在函数内部，我们使用 await 来等待远程 JSON 数据的读取，并从服务器返回的响应中解析 JSON 数据。最终，该函数将获取到的 JSON 对象返回。
在调用 fetchJson 函数时，我们使用 then() 和 catch() 方法来处理获取 JSON 数据成功和失败的情况。
总结
迭代器和生成器是 ES6 中的新概念，它们提供了更加优雅、高效的遍历集合数据的方式。在 ES7 中，迭代器和生成器被进一步扩展，使得我们能够更好地实现异步编程。在实际开发中，掌握迭代器和生成器的使用方法和技巧对于我们提高代码质量、提升开发效率至关重要。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6537b5487d4982a6eb047acd