你知道生成器和迭代器是啥玩意吗同学们好。不知道？没关系，就是一个可以暂停函数执行的小玩意儿。没了解过的同学可以进来学习哦

同学们好。

迭代器和生成器

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

迭代器

官方介绍：在 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); // 1 3 5 7 9
 result = it.next();
}

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

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

生成器

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

所以，生成器出现了。

生成器的官方介绍：生成器函数提供了一个强大的选择：它允许你定义一个包含自有迭代算法的函数，同时它可以自动维护自己的状态。生成器函数使用 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}

我想这个例子很直观。每调用过一次 .next() 函数，就会在同一个上下文被标记为yield的地方停顿等待。

yield是生成器函数的中断标记，当生成器函数运行到yield标记的地方时。必须使用next();才可以继续执行，直到遇见到下一个yield或函数结束为止。

最后

这玩意在工作中有什么用？对于95%的开发来说，这玩意都没什么用。知道知道面试答的上来就好了。想碰到用它的场景都很难。