ES6的迭代器(Iterator)和生成器(Generator)

引言

ES6引入了迭代器和生成器的概念，这两个特性为JavaScript带来了更强大的迭代和异步编程能力。本文将深入探讨ES6的迭代器和生成器，介绍它们的概念、用法以及在实际开发中的应用。

迭代器（Iterator）

迭代器（Iterator）是ES6引入的一种新的数据结构，它提供了一种统一的遍历机制，可以用来遍历各种不同类型的数据。迭代器的概念、作用和遍历原理如下所述：

1. 概念

迭代器是一种对象，它提供了一种顺序访问集合中每个元素的方式，而不暴露集合内部的表示。通过调用迭代器的next()方法，可以依次获取集合中的每个元素，并返回一个包含value和done属性的对象。value表示当前元素的值，done表示是否已经遍历完所有元素。

2. 作用

迭代器提供了一种统一的遍历机制，使得我们可以使用相同的方式来访问不同类型的数据结构。无论是数组、字符串、Set、Map还是自定义对象，只要实现了迭代器接口，就可以使用for...of循环或者手动调用next()方法来进行遍历。

3. 遍历原理

当我们使用for...of循环或者手动调用next()方法时，迭代器会按照预定的顺序依次返回集合中的每个元素。具体原理如下：

首先，在需要进行遍历操作时，我们通过调用集合对象上的Symbol.iterator方法获取到该集合对象对应的默认迭代器。
然后，在每次调用next()方法时，迭代器会执行相应的操作，并返回一个包含value和done属性的对象。
如果done为false，则表示还有更多的元素需要遍历，此时value属性表示当前遍历到的值。
如果done为true，则表示已经遍历完所有元素，此时value属性为undefined。

4. 使用示例

示例一：

代码语言：javascript复制

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

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 }

在上面的例子中，我们首先通过调用数组arr上的Symbol.iterator方法获取到数组的默认迭代器。然后，我们通过调用next()方法依次获取数组中的每个元素。在每次调用next()方法时，迭代器会返回一个包含当前元素值和是否遍历完所有元素的对象。

通过迭代器，我们可以方便地遍历不同类型的数据结构，并且可以自定义实现迭代器接口来实现特定的遍历方式。这为我们在实际开发中提供了更大的灵活性和便利性。

ES6 规定，默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。至于属性名Symbol.iterator，它是一个表达式，返回Symbol对象的iterator属性，这是一个预定义好的、类型为 Symbol 的特殊值，所以要放在方括号内。

详见 # ES6之原始数据类型Symbol

示例二：

自定义迭代器遍历斐波那契数列：

代码语言：javascript复制

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0,
      cur = 1
    return {
      next() {
        [pre, cur] = [cur, pre   cur]
        return { value: cur, done: false }
      }
    }
  }
}
for (let num of fibonacci) {
  if (num > 1000) break
  console.log(num)
}

// 输出：
// 1
// 2
// 3
// 5
// ...

在这个示例中，我们通过自定义迭代器接口来遍历斐波那契数列。在每次迭代时，迭代器会计算下一个斐波那契数，并返回给遍历循环。

简单原理实现示例

原理简单实现示例：

代码语言：javascript复制

function createIterator(arr) {
  let index = 0
  return {
    next() {
      if (index < arr.length) {
        return { value: arr[index  ], done: false }
      } else {
        return { value: undefined, done: true }
      }
    }
  }
}
let iterator = createIterator([1, 2, 3])
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 }

在这个示例中，我们通过自定义函数createIterator来实现一个迭代器。该函数返回一个包含next()方法的对象，每次调用next()方法时，会依次返回数组中的每个元素。

生成器（Generator）

生成器（Generator）是ES6引入的一种特殊的函数，它可以通过yield关键字来暂停函数的执行，并返回一个包含value和done属性的对象。生成器的概念、作用和原理如下所述：

1. 概念

生成器是一种特殊的函数，它使用function*语法进行定义。在生成器函数内部，可以使用yield关键字来暂停函数的执行，并返回一个包含value和done属性的对象。value表示yield表达式的值，done表示函数是否已经执行完毕。

2. 作用

生成器提供了一种更灵活、更可控的方式来处理异步编程。通过使用yield关键字，我们可以在函数执行过程中暂停和恢复，并且可以将异步操作以同步方式编写和理解。

3. 原理

当我们调用生成器函数时，实际上并不会立即执行函数体内部的代码。而是返回一个迭代器对象，该迭代器对象实现了next()方法。每次调用next()方法时，生成器会从上一次暂停的位置继续执行代码，直到遇到下一个yield关键字或者函数结束。

示例

下面通过一个例子来说明生成器的使用：

代码语言：javascript复制

function* generatorFunc() {
  yield 'Hello';
  yield 'World';
}
let generator = generatorFunc();
console.log(generator.next()); // { value: 'Hello', done: false }
console.log(generator.next()); // { value: 'World', done: false }
console.log(generator.next()); // { value: undefined, done: true }

在上面的例子中，我们定义了一个生成器函数generatorFunc。在函数体内部，我们使用yield关键字来暂停函数的执行，并返回一个包含value和done属性的对象。通过调用生成器函数，我们可以获取到一个迭代器对象generator。在每次调用next()方法时，生成器会从上一次暂停的位置继续执行代码，并返回相应的值。除了简单的示例，生成器还可以应用于异步编程中。

下面是一个使用生成器和Promise结合实现异步流程控制的示例

代码语言：javascript复制

function* asyncFunc() {
  let result1 = yield asyncTask1()
  let result2 = yield asyncTask2(result1)
  return result2
}
function asyncTask1() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('Result 1'), 1000)
  })
}
function asyncTask2(arg) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`Result 2 with ${arg}`), 1000)
  })
}
function runAsync(generator) {
  let iterator = generator()
  function iterate({ value, done }) {
    if (done) return value
    return Promise.resolve(value)
      .then((res) => iterate(iterator.next(res)))
      .catch((err) => iterator.throw(err))
  }
  try {
    return iterate(iterator.next())
  } catch (err) {
    return Promise.reject(err)
  }
}
runAsync(asyncFunc)
  .then((result) => console.log(result)) // 'Result 2 with Result 1'
  .catch((error) => console.error(error))

在这个示例中，我们定义了一个异步生成器函数asyncFunc。在函数体内部，我们使用yield关键字来暂停函数的执行，并通过Promise来处理异步操作。通过调用runAsync函数，我们可以运行异步生成器，并获取到最终的结果。通过生成器，我们可以以同步的方式编写异步代码，提高代码的可读性和可维护性。生成器为我们处理异步流程控制提供了更加优雅和简洁的解决方案。

通过生成器和Promise的结合，我们可以以同步的方式编写异步代码，提高代码的可读性和可维护性。

总结

ES6的迭代器和生成器为JavaScript带来了更强大的迭代和异步编程能力。迭代器提供了一种顺序访问集合中每个元素的方式，而生成器则允许函数在执行过程中暂停和恢复。它们在实际开发中有着广泛的应用，可以用于自定义遍历方式、简化异步流程控制等场景。通过深入了解迭代器和生成器，我们可以更好地利用它们来提升代码的质量和效率。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期

0 人点赞