js--生成器总结

前言

　　生成器gengrator是es6 新增的函数功能，它允许你定义一个包含自有迭代算法的函数， 同时它可以自动维护自己的状态。 本文来总结一下JavaScript 中生成器的相关知识点。

正文

　　1、 生成器是什么

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

　　2、 生成器实例（ 通过yield 中断执行）

　　（1）普通生成器函数

　　调用生成器函数会产生一个类似于迭代器的生成器对象，。生成器对象一开始处于暂停执行（suspended）的状态。与迭代器相似，生成器对象也实现了 Iterator 接口，它们默认的迭代器是自引用的,因此具有 next() 方法。调用这个方法会让生成器开始执行，遇到yield关键字函数暂停，再次调用next()继续执行函数，yield并不回像return 一样立即结束函数，只是暂停这个生成器函数。

　　注意：箭头函数不能用来定义生成器函数

        function* createIterator() {
            yield 1;
            yield 2;
            yield 3;
        }
        console.log(createIterator());// createIterator {<suspended>}
        console.log(createIterator()[Symbol.iterator]());// createIterator {<suspended>}，因此可以通过生成器创建迭代器函数
        let iterator = createIterator()
        console.log(iterator.next().value);//1
        console.log(iterator.next().value);//2
        console.log(iterator.next().value);//3

　　（2）函数表达式的生成器函数,使用函数表达式来创建一个生成器

        let myIterator = function* (items) {
            for (let i = 0; i < items.length; i++) {
                yield items[i]
            }
        }
        let myIterator1 = myIterator([1, 2, 3])
        console.log(myIterator1.next().value);//1
        console.log(myIterator1.next().value);//2
        console.log(myIterator1.next().value);//3

　　（3）对象类型的生成器函数

        var obj = {
            createIterator: function* (item) {
                for (let i = 0; i < items.length; i++) {
                    yield items[i]
                }
            }
        }
        // 也可以
        var obj = {
            *createIterator(items) {
                for (let i = 0; i < items.length; i++) {
                    yield items[i]
                }
            }
        }

　　生成器会在每个yield 语句后停止执行，在函数中停止执行的能力是极其强大的，yield 关键字指定了迭代器在被调用next的方法是应当按顺序返回的值，在没有调用next() 方法的时候，生成器函数里的的代码并不会执行，同时也可用通过return 返回生成器函数的返回值，如下：

        function* generatorFn() {
            console.log("start")
            yield 'foo';
            yield;
            yield 'bar';
            return 'baz';
        }
        let generatorObject = generatorFn();
        console.log(generatorObject.next()); //start   { done: false, value: 'foo' }
        console.log(generatorObject.next()); // { done: false, value: undefined }
        console.log(generatorObject.next()); // { done: false, value: 'bar' }
        console.log(generatorObject.next()); // { done: true, value: 'baz' }

　　3、 yield关键字详解

　　（1） yield 关键字可以和值或者是表达式在一起使用，因此可以通过生成器给迭代器添加项目，而不是机械化地将项目一个个列出。

        // for循环内部使用yield关键字
        function* createIterator2(items) {
            //let 块级作用域
            for (let i = 0; i < items.length; i++) {
                yield items[i]
            }
        }
        let iterator2 = createIterator2([1, 2, 3])
        console.log(iterator2.next());//{value:1,done:false}
        console.log(iterator2.next());//{value:2,done:false}
        console.log(iterator2.next());//{value:3,done:false}
        console.log(iterator2.next());//{value:undefined,done:true}

　　注意 ：yield 关键字只能用于生成器内部，用于其他位置会出现语法错误，即使在生成器内部的函数中也不行，下面的代码报错。

        // yield无法穿越函数边界,在一个嵌套函数中无法将值返回给包含它的函数
        // function* createIterator2(items) {
        //     items.forEach(item => {
        //         yield item +1//语法错误
        //     });
        // }

　　（2） yield 关键字还可以作为函数的中间参数使用

　　使用 yield 实现输入和输出, yield 关键字还可以作为函数的中间参数使用,上一次让生成器函数暂停的 yield 关键字会接收到传给 next() 方法的第一个值。第一次调用 next() 传入的值不会被使用，因为这一次调用是为了开始执行生成器函数

        function* generatorFn(initial) {
            console.log(initial);
            console.log(yield);
            console.log(yield);
        }
        let generatorObject = generatorFn('foo');
        generatorObject.next('bar'); // foo
        generatorObject.next('baz'); // baz
        generatorObject.next('qux'); // qux
        // yield 关键字可以同时用于输入和输出，如下
        function* generatorFn() {
            return yield 'foo';
        }
        let generatorObject = generatorFn();
        console.log(generatorObject.next()); // { done: false, value: 'foo' }
        console.log(generatorObject.next('bar')); // { done: true, value: 'bar' }

　　4、 yield* 委托给其他生成器或者可迭代对象

　　（1）yield* 委托给其他可迭代对象

　　可以使用星号增强 yield 的行为，让它能够迭代一个可迭代对象，从而一次产出一个值，因为 yield * 实际上只是将一个可迭代对象序列化为一连串可以单独产出的值，所以这跟把 yield 放到一个循环里没什么不同。下面两个生成器函数的行为是等价的：

        function* generatorFnA() {
            for (const x of [1, 2, 3]) {
                yield x;
            }
        }
        console.log(generatorFnA());
        for (const x of generatorFnA()) {
            console.log(x);
        }
        // 1
        // 2
        // 3
        function* generatorFnB() {
            yield* [1, 2, 3];
        }
        for (const x of generatorFnB()) {
            console.log(x);
        }
        // 1
        // 2
        // 3

　　（2）yield* 委托给其他生成器

        function* createNumberIterator() {
            yield 1;
            yield 2;
            return 3;
        }
        function* createRepeatingIterator(count) {
            for (let i = 0; i < count; i++) {
                yield "repeat";
            }
        }
        function* createCombinedIterator() {
            let result = yield* createNumberIterator();
            yield result;
            yield* createRepeatingIterator(result);
        }

        var iterator = createCombinedIterator();
        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: "repeat", done: false }"
        console.log(iterator.next()); // "{ value: "repeat", done: false }"
        console.log(iterator.next()); // "{ value: "repeat", done: false }"
        console.log(iterator.next()); // "{ value: undefined, done: true }"

　　上面的代码中createCombinedIterator（）生成器委托了 createNumberIterator 生成器，并将它的返回值赋值给了result变量，yeild result 输入该变量值3，result变量接下来作为参数传递 createRepeatingIterator（）生成器，提示同一字符串需要调用3次。

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。