讲解es6的迭代器和生成器1.是什么2.为什么存在3.怎么使用4.结果能解决什么5.使用注意点的结构6.代码和案例

ES6是JavaScript的一个重要版本，其中包含了许多新的语法和特性，其中迭代器和生成器是其中非常重要的特性之一。本文将详细介绍迭代器和生成器的概念、用法以及注意事项。

1. 是什么

迭代器和生成器是ES6中新增的两个重要特性，它们的作用是用于遍历数据集合。

迭代器是一种接口，用于定义遍历数据集合的方式，它提供了一种统一的方法来访问集合中的所有元素。在JavaScript中，迭代器通常是由一个对象实现的，该对象包含一个next()方法，该方法返回一个对象，该对象包含两个属性：value和done，分别表示当前遍历到的值和是否已经遍历完所有的值。

生成器是一种函数，用于生成一个迭代器对象，它可以通过yield关键字来暂停函数的执行，并返回一个值，然后在需要的时候再恢复函数的执行。

2. 为什么存在

在JavaScript中，遍历数据集合是一项非常常见的任务，例如遍历数组、遍历对象属性等。在ES5及之前的版本中，通常需要使用for循环或者forEach等方法来遍历数据集合，这种方式比较繁琐，而且不够灵活。迭代器和生成器的出现，使得遍历数据集合变得更加简单、灵活、可控。

3. 怎么使用

3.1 迭代器

在ES6中，我们可以通过Symbol.iterator属性来获取一个对象的迭代器。例如，对于一个数组对象，我们可以通过以下方式获取其迭代器：

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();

然后我们可以通过调用next()方法来遍历数组中的元素：

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关键字来暂停函数的执行，并返回一个值。例如，以下是一个简单的生成器函数：

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

我们可以通过调用该函数来获取一个迭代器对象，并遍历其中的值：

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循环遍历数组的例子：

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

输出结果为：

1
2
3

3.4 使用yield*关键字

在生成器函数中，我们可以使用yield关键字来委托给另一个生成器函数来生成值。例如，以下是一个使用yield关键字的例子：

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. 代码和案例

以下是一个使用生成器和迭代器实现斐波那契数列的例子：

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()方法来遍历数列中的值。