ES6---對yield和yield*的理解

概念

yield和yield*都是配合Generator進行使用的。

yield

yield是關鍵字，其語法以下：

[rv] = yield [expression];複製代碼

1. expression：是Generator函數返回的遍歷器對象調用next方法是所獲得的值；
2. rv：是遍歷其對象調用next方法是傳遞給next方法的參數

這裏要簡單的說一下next方法，其語法以下：

gen.next(value)複製代碼

1. value：傳遞給Generator函數的值，也就是上文中的rv

這裏比較有意思的就是傳遞給next方法的值value，下面經過例子來看一下：

function* _testYieldExpression(){
    let value = '';
    value = yield 'yield value';
    console.info(`1 value is: ${value}`);//輸出1

    value = yield 'yield value';
    console.info(`2 value is: ${value}`);//輸出2
    return 'over';
}

let _testIterator = _testYieldExpression();
let _res = _testIterator.next();
console.info(`1:no params to next, result is: ${_res.value}`);//輸出3

_res = _testIterator.next('params from next');
console.info(`2:params to next, result is: ${_res.value}`);//輸出4

_res = _testIterator.next();
console.info(`3:params to next, result is: ${_res.value}`);//輸出512345678910111213141516171819複製代碼

輸出以下：

1:no params to next, result is: yield value
1 value is: params from next
2:params to next, result is: yield value
2 value is: undefined
3:params to next, result is: over12345複製代碼

註釋中標記了幾個輸出語句，

輸出1

是在第二次調用 next方法是執行，能夠看到，此時的 value值是傳遞給 next方法的參數，可是在 _testYieldExpression函數中能夠看到 value = yield 'yield value'，因此能夠理解爲，在第一次執行 next函數的時候，語句 yield 'yield value'沒有返回值，而且沒有賦值給 value，而在第二次調用 next時，纔將 next函數的參數賦值給value。雖然有些混亂，可是若是打斷點來看的話會更加清晰。

yield*

yield*是表達式，所以又返回值，其語法以下：

yield* [[expression]];1複製代碼

expression：是可遍歷對象，能夠是數組，也能夠是另一個Generator函數的執行表達式，等等

其實說簡單點，就是將多個yield語句根據某種規則合併爲一個，示例以下：

function* g3() {
  yield* [1, 2];
  yield* '34';
  yield* Array.from(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}複製代碼