yield 与 yield*介绍

一、yeild关键字

1. ES6的新关键词, 用来使生成器函数执行、暂停
2. yield关键字后面的表达式的值返回给生成器的调用者
3. yield关键字返回一个 迭代器对象 { value：xxx, done：xxx },
   value: xxx当前遍历器暂停时返回的结果,
   done：boolean false表示遍历器未结束, true表示遍历器已结束
4. yield无法单独工作, 需要配合generator（生成器）的其他函数, 如next(), 懒汉式加载...

1、yeild并不能直接生产值, 而是产生一个等待输出的函数

var f = function *(){
  var x = 1;
  var y = yield(x+1);
   console.log(y)
  var z = yield(x+y);
   console.log(z)
  return z;
}
const fGeno = f() 
console.log(fGeno.next()) 
console.log(fGeno.next(3))
console.log(fGeno.next(4))

运行结果：
1: 第1次执行暂停与yield(x+1)。返回(x+1)等于2
2: 第2次执行暂停与yield(x+y)。next(3)中的参数3作为上一个yeild执行结果即 y=3, 所以z=4
3: 第3次执行暂停与return z。等于4

image.png

2、next()可以带一个参数，该参数会被认为是上一个yield整体的返回值

function* counter(value) {
 let step;

 while (true) {
   console.log('qqqqqq  ', value, step)
   step = yield ++value;
   console.log('ddddd  ', value, step)

   if (step) {
     value += step;
     console.log('vvvvvv  ', value, step)
   }
 }
}

const generatorFunc = counter(0);
console.log(generatorFunc.next().value);   // 1
console.log(generatorFunc.next().value);   // 2
console.log(generatorFunc.next().value);   // 3
console.log(generatorFunc.next(10).value); // 14
console.log(generatorFunc.next().value);   // 15
console.log(generatorFunc.next(10).value); // 26

运行结果解析：
图片中的1、2、3、4、5、6 对应以上的console.log()顺序
注意：next()可以带一个参数，该参数会被认为是上一个yield整体的返回值参看第4个console.log()

image.png

遍历器函数中的for..of

function *foo(){
  yield 1;
  yield 2;
  yield 3;
  return;
}
for(let v of foo()){
  console.log(v);
}
// 1
// 2
// 3

二、yeild*表达式

1. yield* [[expression]] expression:是可遍历对象,可以是数组、字符串、Generator函数的执行表达式等等
2. yield*返回一个可迭代对象的表达式

1、yield* 是一个表达式，不是语句，所以它会有自己的值。

function* g4() {
  yield* [1, 2, 3];
  return "foo";
}

var result;

function* g5() {
  result = yield* g4();
}

var iterator = g5();

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: undefined, done: true },
                              // 此时 g4() 返回了 { value: "foo", done: true }

console.log(result);          // "foo"

2、yield* 还可以 yield 其它任意的可迭代对象，比如说数组、字符串、arguments 对象等等

function* g3() {
  yield* [1, 2];
  yield* "34";
  yield* arguments;
}

var iterator = g3(5, 6);

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: "4", done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: 6, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

三、yield 与 yield*区别

1、g1() yield 出去的每个值都会在 g2() 的 next() 方法中返回，就像那些 yield 语句是写在 g2() 里一样

function* g1() {
  yield (1 + 1);
  yield 3;
  yield 4;
}

function* g2() {
  yield 1;
  yield* g1();
  yield 5;
}

var iterator = g2();

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: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

2、把上面g2()方法中的yield* g1() 改为yield g1() ,输出结果截然不同...

function* g1() {
  yield (1 + 1);
  yield 3;
  yield 4;
}

function* g2() {
  yield 1;
  yield g1();
  yield 5;
}

var iterator = g2();

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: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

输出结果：

image.png