ES6中的yield

yield 关键字用来暂停和恢复一个生成器函数（(function* 或遗留的生成器函数）。

语法

[rv] = yield [expression];
复制代码

expression 定义经过迭代器协议从生成器函数返回的值。若是省略，则返回undefined。

rv 返回传递给生成器的next()方法的可选值，以恢复其执行。

描述

• yield关键字使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它能够被认为是一个基于生成器的版本的return关键字。

• yield关键字实际返回一个IteratorResult对象，它有两个属性，value和done。value属性是对yield表达式求值的结果，而done是false，表示生成器函数还没有彻底完成。

• 一旦遇到 yield 表达式，生成器的代码将被暂停运行，直到生成器的 next() 方法被调用。每次调用生成器的next()方法时，生成器都会恢复执行，直到达到如下某个值：

  • yield，致使生成器再次暂停并返回生成器的新值。 下一次调用next()时，在yield以后紧接着的语句继续执行。
  • throw用于从生成器中抛出异常。这让生成器彻底中止执行，并在调用者中继续执行，正如一般状况下抛出异常同样。
  • 到达生成器函数的结尾；在这种状况下，生成器的执行结束，而且IteratorResult给调用者返回undefined而且done为true。
  • 到达return 语句。在这种状况下，生成器的执行结束，并将IteratorResult返回给调用者，其值是由return语句指定的，而且done 为true。

• 若是将参数传递给生成器的next()方法，则该值将成为生成器当前yield操做返回的值。

• 在生成器的代码路径中的yield运算符，以及经过将其传递给Generator.prototype.next()指定新的起始值的能力之间，生成器提供了强大的控制力。

说明

• yield并不能直接生产值，而是产生一个等待输出的函数
• 除IE外，其余全部浏览器都可兼容（包括win10 的Edge）
• 某个函数包含了yield，意味着这个函数已是一个Generator
• 若是yield在其余表达式中，须要用()单独括起来
• yield表达式自己没有返回值，或者说老是返回undefined(由next返回)
• next()可无限调用，但既定循环完成以后老是返回undeinded

next()

• next()能够带一个参数，该参数会被认为是上一个yield总体的返回值，稍后将在代码中展现。

• 能够在不一样阶段从外部直接向内部注入不一样的值来调整函数的行为(这一点是其余循环很难作到的，或要付出较大的代价才能够作到)

简单例子

function* countAppleSales () {
  var saleList = [3, 7, 5];
  for (var i = 0; i < saleList.length; i++) {
    yield saleList[i];
  }
}

var appleStore = countAppleSales(); 
console.log(appleStore); // Generator { }
console.log(appleStore.next(countAppleSales())); // { value: 3, done: false }
console.log(appleStore.next()); // { value: 7, done: false }
console.log(appleStore.next()); // { value: 5, done: false }
console.log(appleStore.next()); // { value: undefined, done: true }
复制代码

参数对比

function* countAppleSales(){
    for(var i=0; true; i++){
        var reset = yield i;
        if(reset){
            i = -1;
        }
    }
}

var appleStore = countAppleSales();
console.log(appleStore.next()); //{ value: 0, done: false }
console.log(appleStore.next()); //{ value: 1, done: false }
console.log(appleStore.next()); //{ value: 2, done: false }
console.log(appleStore.next(true)); //{ value: 0, done: false }
console.log(appleStore.next()); //{ value: 1, done: false }
console.log(appleStore.next()); //{ value: 2, done: false }
复制代码

1. 调用next()，会产生许多i的值, 可是不会影响reset，由于yield直接将值return出来了。
2. 当传值true后，yield及他的参数总体变为true赋值给reset，这是reset会被执行，从而知足循环内的判断条件
3. 不会平白增长循环的时间复杂度，由于不传参的时候，并不会占用更多的内存

深刻理解

function* test(x){
    var y = 2 * (yield (x + 1));
    var z = yield(y/3);
    console.log("x=" + x + ",y=" + y + ",z=" + z);
    return (x + y + z);
}

var a = test(5);
a.next(); //{ value: 6, done: false }
a.next(); //{ value: NaN, done: false }
a.next(); //x=5,y=NaN,z=undefined web-517059656c042747f821.js:1:478047
          //{ value: NaN, done: true }
a.next();{ value: undefined, done: true }

var b = test(5);
b.next(); //{ value: 6, done: false }
b.next(12); //{ value: 8, done: false }
b.next(13); //x=5,y=24,z=13 web-517059656c042747f821.js:1:478047
            //{ value: 42, done: true }
b.next(); //{ value: undefined, done: true }
复制代码

A组

1. x恒为5，因此第一次调用传空没问题，可获得对应的第一个yield返回值:yield (x + 1)
2. 第二次调用，无参数传入，因此y为NaN(2* undefined)，天然得不到z
3. 第三次调用同上分析

B组

1. x恒为5，因此第一次调用传空没问题，可获得对应的第一个yield返回值:yield (x + 1)
2. 第二次调用，传入12，因此y为24(yield (x + 1)=入参)，获得第二个yield: yield (y / 3)=8
3. 第三次调用同上分析,获得最后的z值并return=42

参考文章：

MDN yield

深刻理解js中的yield