鍍金池/ 問答/HTML/ ES6 中 yield 的問題

ES6 中 yield 的問題

${yield} 是如何執(zhí)行的

我在學(xué)習(xí) Generator 的時候看到一段不錯的代碼，自己改了改不知道如何去讀，希望有人能解答一下，如下：

function* bar() {
  console.log('one');
  console.log('two');
  console.log('three');
  yield console.log('test');
  console.log(`1. ${yield}`);
  console.log(`2. ${yield}`);
  return 'result';
}
let barObj = bar();
barObj.next();
barObj.next('a');
barObj.next('b');

返回的結(jié)果為：

one
two
three
test
1. b
  • 第一次 next 的時候應(yīng)該走到了 yield console.log('test')
  • 第二次傳了一個 a 這個時候程序似乎沒有執(zhí)行
回答
編輯回答
乞許

自己又梳理了一下

我們可以把

barObj.next();
barObj.next('a');
barObj.next('b');

改為如下的形式，這樣看起來更加的方便

console.log(barObj.next(), barObj.next('a'), barObj.next('b'));

上面的代碼應(yīng)該這么來讀

首先要明白 console.log 的返回值是 undefined

next 1.
    console.log('one')...console.log('test');
    return { value: unfefined, done: false }
next 2.
    yield console.log('test') = 'a';
    ${ yield undefined } 寫括號是為了方便看，其實(shí)沒有括號
    return { value: undefined, done: false }
next 3.
    console.log(`1. ${'b'}`);
    return { value: undefined, done: false }
2017年7月20日 05:45
編輯回答
柒槿年

你需要知道next傳值與yield接收值并不是按順序?qū)?yīng)的，應(yīng)該是：

  1. 第一個next傳值沒有yield接收；
  2. 第二個next傳值由第一個yield接收；
  3. 第三個...由第二個...
  4. ...

另外，你可以在后面多調(diào)用兩個next()看輸出：

function* bar() {
  console.log('one');
  console.log('two');
  console.log('three');
  yield console.log('test');//第一個yield接收到第二個next傳的a
  console.log(`1. ${yield}`);//第二個yield接收到第三個next傳的b
  console.log(`2. ${yield}`);//第三個yield接收到第四個next傳的c
  return 'result';
}
let barObj = bar();
barObj.next();
barObj.next('a');
barObj.next('b');
barObj.next('c');
barObj.next();

輸出：

one
two
three
test
1. b
2. c
{value:undefined,done:true}
2017年9月11日 07:25
編輯回答
練命

首先明確的是a執(zhí)行了。

barObj.next(); //輸出test
barObj.next('a'); //a給了第一個yield，但是沒有使用
barObj.next('b'); //b給了第二yield，并輸出1. b
2018年5月16日 15:59