你知道生成器和迭代器是啥玩意吗

2024-09-02

839 字约 3 分钟

...

迭代器和生成器

迭代器和生成器是为了完成函数的中断效果而出现的。让原本只能一次性执行完的函数具备分段处理的功能。在本质上，这两者都属于函数的一种。

迭代器

官方介绍：在 JavaScript 中，迭代器是一个对象，它定义一个序列，并在终止时可能返回一个返回值。更具体地说，迭代器是通过使用 next() 方法实现 Iterator protocol 的任何一个对象，该方法返回具有两个属性的对象： value，这是序列中的 next 值；和 done ，如果已经迭代到序列中的最后一个值，则它为 true 。如果 value 和 done 一起存在，则它是迭代器的返回值。

简单的来说就是：迭代器本身就只是_具备闭包_和_对返回值有格式要求_的并且使用next()方法进行调用的一个函数而已。

让我们手撸一个了解一下。

//自定义迭代器
function makeRangeIterator(start = 0, end = Infinity, step = 1) {
    let nextIndex = start
    let iterationCount = 0

    const rangeIterator = {
       next: function() {
           let result
           //判断是否具备继续执行的条件
           if (nextIndex < end) {
               result = { value: nextIndex, done: false }
               nextIndex += step
               iterationCount++
               return result
           }
           return { value: iterationCount, done: true }
       }
    }
    //不同于寻常了解的闭包，这里返回的是一个对象而非函数
    return rangeIterator
}

//初始化按迭代器功能。
let it = makeRangeIterator(1, 10, 2)

//进行next的调用
let result = it.next()
//判断是否需要继续执行
while (!result.done) {
 console.log(result.value)
 result = it.next()
}

console.log("Iterated over sequence of size: ", result.value)

以上方形式出现的函数，就是被我称为迭代器的东西。

生成器

但这种自定义的迭代器有一个比较麻烦的地方是：需要我们自己去维护内部的状态，去编写内部的逻辑。

所以，_生成器_出现了。

生成器的官方介绍：生成器函数提供了一个强大的选择：它允许你定义一个包含自有迭代算法的函数，同时它可以自动维护自己的状态。生成器函数使用 function*语法编写。最初调用时，生成器函数不执行任何代码，而是返回一种称为 Generator 的迭代器。通过调用生成器的下一个方法消耗值时，Generator 函数将执行，直到遇到 yield 关键字。

生成器对迭代器进行了下一层的封装。生成器内置了迭代器的业务逻辑。并为我们提供了语法糖。

上方迭代器的案例以生成器的形式再完成一遍如下👇

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
    console.log(1);
      console.log(2);
    yield "第一次停顿，执行打印1,2";
      console.log(3);
      console.log(4);
     yield"第二次停顿，执行打印3,4";
      console.log(5);
      console.log(6);
     yield "第三次停顿，执行打印5,6";
      console.log(7);
}
var a = makeRangeIterator(1,10,2)

a.next() //打印1,2和{value: '第一次停顿，执行打印1,2', done: false}
a.next() //打印3,4和{value: '第二次停顿，执行打印3,4', done: false}
a.next() //打印5,6和{value: '第三次停顿，执行打印5,6', done: false}
a.next() //{value: undefined, done: true}