ES6中的yield的用法

47 阅读1分钟

yield需要配合Generator使用,一共两个特性。

  1. 直接调用Generator函数时不会执行任何操作,需要配合next()使用
  2. 在Generator函数中会分段执行。 例如:
let test = function* (number) {  //生成器函数
	console.log('1', number);
	let test1 = yield number;
	console.log('3', number);

	console.log('4', test1);

	let test2 = yield (number + test1);

	return test1 + test2;
}
test(5); //直接调用不会执行任何操作
let g = test(5);
//搭配next()使用
console.log(g.next());
console.log(g.next(15));
console.log(g.next(200));

image.png

运行顺序:

  1. go(5) 没有执行任何操作
  2. console.log(g.next()); 执行了
console.log('1', number);
let test1 = yield number;

并且在let test1 = yield number;处暂停住,并且返回yield后面的值number,并放入返回对象的value中。 yield会返回一个对象{value:1,done:false} value表示yield后面的值,done表示是否已经完成了Generator函数。 xgo(5)传入了5所以打印出来前两部是 5{value:10,done:false}

  1. console.log(g.next(15)); 继续执行
let test1 = yield number;
console.log('3', number);
console.log('4', test1);
let b = yield (number + test1);

let test1 = yield number处继续向下执行,test1 = yield number的值从g.next(15)传入15,因此test1=15number值不变依然为5。 打印 3 54 15 执行到 let test2 = yield (number + test1);,准确的说应该是yield (number + test1)。 返回{value: 20, done: false}

  1. console.log(g.next(200)); 执行最后一个yieldb等于g.next(200)传入的200 Generator函数返回 test1 + test2等于215 所以打印{value: 215, done: true}