Generator

什么是 Generator 函數

•  Generator 函數是 ES6 提供的一種異步編程解決方案
•  Generator 函數內部可以封裝多個狀態，可以理解為是一個狀態機

Generator函數與普通函數的區別

• 調用 Generator 函數，無論該函數有沒有  return 返回值，都會返回一個迭代器對象 
• 調用  Generator 函數后，函數中封裝的代碼不會立即執行

定義一個Generator函數

function *gen() {}

• 只需要在  function 后加一個  * 星號，就代表這個函數是一個  Generator 函數

Generator函數結合 yield 關鍵字一起使用才有意義

function *gen() {
  console.log(1);
  yield 'generator1'; // 通過 yield 定義一個狀態
  console.log(2);
  yield 'generator2'; // 又定義一個狀態
}

• yield 只能在  Generator 函數中才能使用
• yield 會將  Generator 函數分割成多個部分執行，當前  yield 這行及其上一個 yield 之間的為一個部分

1.  第一個部分  console.log(1); yield 'generator1'; // 通過 yield 定義一個狀態 
2.  第二個部分   console.log(2); yield 'generator2'; // 又定義一個狀態 

• 調用  Generator 函數，返回一個可迭代對象   let it = gen();  通過這個可迭代對象的  next  來執行  yield 切割的部分

• // 1
  it.next(); // { value: 'generator1', done: false }

 

傳遞參數

function *gen() {
  console.log(1);
  const val1 = yield 'generator1'; // 調用可迭代對象的 next()函數時傳遞的參數放入 val1 中
  console.log(val1)
  console.log(2);
  const val2 = yield 'generator2'; // 再次調用可迭代對象的 next()函數時傳遞的參數放入 val2 中
  console.log(val2);
}
let it = gen(); // 調用Generator函數生成一個可迭代對象
it.next();      // 不能傳遞參數
it.next('one'); // 將 one 賦值給 val1 
it.next('two'); // 將 two 賦值給 val2

• 通過迭代對象第一次調用  next()  函數不能傳遞參數

通過 Generator 快速實現對象的 Iterator

let obj = {
  name: 'zhangsan',
  age: 66,
  [Symbol.iterator]: function *() {
    let keys = Object.keys(this);
    for (let i = 0; i < keys.length; i++) {
      yield this[keys[i]];
    }
  }
}
let it = obj[Symbol.iterator]();
it.next(); // { value: 'zhangsan', done: false }
it.next(); // { value: 66, done: false }
it.next(); // { value: undefined, done: true }