ES6是JavaScript的一个重要版本，其中包含了许多新的语法和特性，其中迭代器和生成器是其中非常重要的特性之一。本文将详细介绍迭代器和生成器的概念、用法以及注意事项。
目录
-
- [1. 是什么](#1. 是什么)
- [2. 为什么存在](#2. 为什么存在)
- [3. 怎么使用](#3. 怎么使用)
-
- [3.1 迭代器](#3.1 迭代器)
- [3.2 生成器](#3.2 生成器)
- [3.3 for...of循环](#3.3 for...of循环)
- [3.4 使用yield*关键字](#3.4 使用yield*关键字)
- [4. 结果能解决什么](#4. 结果能解决什么)
- [5. 使用注意点](#5. 使用注意点)
- [6. 代码和案例](#6. 代码和案例)
1. 是什么
迭代器和生成器是ES6中新增的两个重要特性，它们的作用是用于遍历数据集合。
迭代器是一种接口，用于定义遍历数据集合的方式，它提供了一种统一的方法来访问集合中的所有元素。在JavaScript中，迭代器通常是由一个对象实现的，该对象包含一个next()方法，该方法返回一个对象，该对象包含两个属性：value和done，分别表示当前遍历到的值和是否已经遍历完所有的值。
生成器是一种函数，用于生成一个迭代器对象，它可以通过yield关键字来暂停函数的执行，并返回一个值，然后在需要的时候再恢复函数的执行。
2. 为什么存在
在JavaScript中，遍历数据集合是一项非常常见的任务，例如遍历数组、遍历对象属性等。在ES5及之前的版本中，通常需要使用for循环或者forEach等方法来遍历数据集合，这种方式比较繁琐，而且不够灵活。迭代器和生成器的出现，使得遍历数据集合变得更加简单、灵活、可控。
3. 怎么使用
3.1 迭代器
在ES6中，我们可以通过Symbol.iterator属性来获取一个对象的迭代器。例如，对于一个数组对象，我们可以通过以下方式获取其迭代器：
javascript
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();然后我们可以通过调用next()方法来遍历数组中的元素：
javascript
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: undefined, done: true}3.2 生成器
生成器是一种函数，它可以通过yield关键字来暂停函数的执行，并返回一个值。例如，以下是一个简单的生成器函数：
javascript
function* generator() {
yield 1;
yield 2;
yield 3;
}我们可以通过调用该函数来获取一个迭代器对象，并遍历其中的值：
javascript
const iterator = generator();
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: undefined, done: true}3.3 for...of循环
在ES6中，我们可以使用for...of循环来遍历任何可迭代的对象，包括数组、字符串、Map、Set等。例如，以下是一个使用for...of循环遍历数组的例子：
javascript
const arr = [1, 2, 3];
for (const item of arr) {
console.log(item);
}输出结果为：
1
2
3
3.4 使用yield*关键字
在生成器函数中，我们可以使用yield关键字来委托给另一个生成器函数来生成值。例如，以下是一个使用yield关键字的例子：
javascript
function* generator1() {
yield 1;
yield 2;
}
function* generator2() {
yield* generator1();
yield 3;
}
const iterator = generator2();
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: undefined, done: true}4. 结果能解决什么
迭代器和生成器的出现，可以使得遍历数据集合变得更加简单、灵活、可控。通过使用迭代器和生成器，我们可以更方便地对数据集合进行遍历，从而更快地完成数据处理的任务。
5. 使用注意点
在使用迭代器和生成器时，需要注意以下几点：
- 使用yield关键字来暂停函数的执行，需要注意函数的执行顺序。
- 在生成器函数中，不能使用return关键字来返回值，否则会导致生成器函数结束。
- 在使用for...of循环遍历可迭代对象时，需要注意对象是否实现了Symbol.iterator接口。
6. 代码和案例
以下是一个使用生成器和迭代器实现斐波那契数列的例子：
javascript
function* fibonacci() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
const iterator = fibonacci();
console.log(iterator.next()); // {value: 0, done: false}
console.log(iterator.next()); // {value: 1, done: false}
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: 5, done: false}
console.log(iterator.next()); // {value: 8, done: false}上述代码中，我们定义了一个生成器函数fibonacci，它可以生成一个斐波那契数列的迭代器对象。然后我们可以通过调用next()方法来遍历数列中的值。