变革进阶，ES6 Iterator遍历器/Generator揭秘！

2023-09-08 03:26:29

在ES6中，Iterator遍历器和Generator生成器作为两项重要的新特性，为我们提供了更简便和强大的数据遍历方式。它们将数据遍历和生成操作提升到了一个新的层次，让编程变得更加灵活和高效。现在，就让我们一起揭开这两项新特性的神秘面纱，探索它们丰富的功能和应用场景。

一、Iterator遍历器：轻松遍历数据

Iterator遍历器是一种接口，它为不同的数据结构提供了统一的访问机制。有了Iterator遍历器，我们可以轻松地遍历数组、对象、Map、Set等数据结构，而无需关心它们的底层实现细节。

为了使用Iterator遍历器，我们需要先获取一个迭代器对象。我们可以使用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 }

当我们使用next()方法时，它会返回一个包含value和done两个属性的对象。其中，value属性是当前元素的值，done属性是一个布尔值，表示遍历是否已完成。

二、Generator生成器：轻松创建迭代器

Generator生成器是一种函数，它可以生成一个迭代器对象。Generator生成器的语法与普通函数略有不同，它使用function*定义，并在函数体内使用yield关键字来生成值。

function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const generator = generateSequence(1, 10);

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: 6, done: false }
console.log(generator.next()); // { value: 7, done: false }
console.log(generator.next()); // { value: 8, done: false }
console.log(generator.next()); // { value: 9, done: false }
console.log(generator.next()); // { value: 10, done: false }
console.log(generator.next()); // { value: undefined, done: true }