考慮以下場景:

var a = 1; var b = 2;function foo(){a++;b = b * a;a = b + 3; }function bar(){b--;a = 8 + b;b = a * 2; }foo(); bar(); console.log(a, b); // 11 22bar(); foo(); console.log(a, b); // 183 180

對于上面的兩個函數foo和bar,它們中的任何一個,一旦開始了就會一直執行下去直至完畢.
倘若,我們想在foo中a++后,暫停一下在去執行bar中的某個語句… 可以使用ES6提供的yield語句.
改變如下:

var a = 1; var b = 2;function *foo(){ // *是生成器的標志a++;yield;b = b * a;a = (yield b) +3; }function *bar(){b--;yield;a = (yield 8) + b;b = a * (yield 2); }// 調用:foo執行完,在執行bar() var s1 = foo(); // 初始化迭代器. s1.next(); console.log(a, b); // 2 2 s1.next(); console.log(a, b); // 2 4// 還有最后一個 a = (yield b) + 3; s1.next(); // "預計"執行后會得到 7 4 console.log(a, b); // 實際上 NaN 4// 誒???? // 實際執行yield b時,并得不到b的值因此會返回NaN. 于是a就是NaN// 改進如下(foo中有2個yield, 因此會有3個next) var s1 = foo(); var val1 = s1.next().value; console.log(a, b); val1 = s1.next(val1).value; console.log(a, b); val1 = s1.next(val1).value; console.log(a, b);// 運行bar,(bar中有3個yield,會有4個next調用) var s2 = bar(); var val2 = s2.next().value; console.log(a, b); val2 = s2.next(val2).value; console.log(a, b); val2 = s2.next(val2).value; console.log(a, b); val2 = s2.next(val2).value; console.log(a, b);

可以看到,和正常函數執行結果是一樣的…
還注意到.上述好多賦值語句是重復的,因此可以考慮構造一個輔助函數step,用于將yield返回的值原樣的傳入.

// step function step(gen){var it = gen();var last;return function(){last = it.next(last).value;} }

接下來使用step,先執行bar,后執行foo

var s1 = step(bar); var s2 = step(foo);s1(); // 1 1 s1(); // 1 1 s1(); // 9 1 s1(); // 9 18 s2(); // 10 18 s2(); // 10 180 s2(); // 183 180

回歸主題,交替執行bar和foo

var s1 = step(foo); var s2 = step(bar);s2(); // b-- ,yield s2(); // yield 8 s1(); // a++, yield s2(); // a = 8 + b, yield 2 s1(); // b= b * a, yield b s1(); // a = b + 3 s2(); // b = a * 2

可以看到,bar 和foo 都經過了多次的停止與啟動,且它們之間進行了交替操作.
參考《你不知道的JavaScript》(中卷)P241~P242

總結

以上是生活随笔為你收集整理的es6 --- 使用生成器交替执行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。