返回

赋能JS开发的宝藏神器——Generator和Iterator介绍

前端

简介

Generator和Iterator都是ES6中引入的特性,它们使我们能够编写更简洁、更强大的代码。Generator可以看作是一种特殊的函数,它可以被暂停和恢复,而Iterator则是一种数据结构,它可以被遍历。

Generator

Generator函数是一种特殊的函数,它可以被暂停和恢复。要创建一个Generator函数,只需在函数前面加上一个星号(*)即可。例如:

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

这个Generator函数可以被用来生成一个数字序列。要使用这个Generator函数,我们可以使用yield关键字。yield关键字会暂停Generator函数的执行,并返回一个值。当我们再次调用Generator函数时,它将从上次暂停的地方继续执行。

例如:

const generator = myGenerator();

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: undefined, done: true }

Iterator

Iterator是一种数据结构,它可以被遍历。要创建一个Iterator,我们可以使用Generator函数。例如:

const myIterator = myGenerator();

这个Iterator可以被用来遍历数字序列。要遍历这个Iterator,我们可以使用for...of循环。例如:

for (const number of myIterator) {
  console.log(number);
}

惰性求值

惰性求值是一种编程范式,它允许我们在需要的时候才计算值。Generator和Iterator都支持惰性求值。这意味着我们可以使用它们来编写更简洁、更高效的代码。

例如,我们可以使用Generator来实现一个斐波那契数列。斐波那契数列是一个数字序列,其中每个数字都是前两个数字的和。例如:

function* fibonacci() {
  let [a, b] = [0, 1];

  while (true) {
    yield a;

    [a, b] = [b, a + b];
  }
}

这个Generator函数可以被用来生成斐波那契数列。要使用这个Generator函数,我们可以使用yield关键字。yield关键字会暂停Generator函数的执行,并返回一个值。当我们再次调用Generator函数时,它将从上次暂停的地方继续执行。

例如:

const fibonacciGenerator = fibonacci();

console.log(fibonacciGenerator.next()); // { value: 0, done: false }
console.log(fibonacciGenerator.next()); // { value: 1, done: false }
console.log(fibonacciGenerator.next()); // { value: 1, done: false }
console.log(fibonacciGenerator.next()); // { value: 2, done: false }
console.log(fibonacciGenerator.next()); // { value: 3, done: false }

管道和链式调用

Generator和Iterator还可以被用来编写管道和链式调用。管道是一种编程技术,它允许我们将多个函数组合在一起,以创建一个新的函数。链式调用是一种编程技术,它允许我们将多个函数调用组合在一起,以创建一个新的函数。

例如,我们可以使用管道来实现一个将数字平方并求和的函数。例如:

const squareAndSum = numbers => numbers.map(number => number * number).reduce((a, b) => a + b);

这个函数可以被用来将一个数字数组平方并求和。例如:

console.log(squareAndSum([1, 2, 3, 4, 5])); // 55

我们也可以使用链式调用来实现一个将数字平方并求和的函数。例如:

const squareAndSum = numbers => numbers.map(number => number * number).reduce((a, b) => a + b);

console.log(squareAndSum([1, 2, 3, 4, 5])); // 55

结语

Generator和Iterator是ES6中引入的两个非常强大的特性。它们使我们能够编写更简洁、更强大的代码。如果您是JavaScript开发人员,或者对函数式编程或惰性求值感兴趣,那么我强烈建议您学习Generator和Iterator。