Generator

• 概念: Generator 函數(shù)返回的遍歷器對(duì)象

• 基本用法

      // 定義生成器函數(shù)
      function* g() {
        yield "a";
        yield "b";
        yield "c";
        return "ending";
      }
      // 返回Generator對(duì)象
      console.log(g()); // g {<suspended>}
      console.log(g().toString()); // [object Generator]
  

• 每次next執(zhí)行一次yield, 并返回 {value: "a", done: false}

      function* g() {
        yield "a";
        yield "b";
        yield "c";
        return "ending";
      }
      
      var gen = g();
      // console.log(gen.next()); // {value: "a", done: false}
      // console.log(gen.next()); // {value: "b", done: false}
      // console.log(gen.next()); // {value: "c", done: false}
      // console.log(gen.next()); // {value: "ending", done: true}
      // 沒(méi)有return時(shí), 最后也會(huì)打印`{value: undefined, done: false}`
      
      
      // next方法代替上面手動(dòng)next()
      function next() {
        let { value, done } = gen.next();
        console.log(value); // 依次打印輸出 a b c end
        if (!done) next(); // 直到全部完成
      }
      next();
  
  

• 傳參問(wèn)題

      function* say(foo) {
        let a = yield foo;
        console.log(a);
        let b = yield "2";
        console.log(b);
      }
      
      let it = say("bar"); // 返回迭代器
      
      // a的值并非yield返回值，而是下次next參數(shù)
      // 此次執(zhí)行, 只到y(tǒng)ield, 沒(méi)有到賦值a
      console.log(it.next());
      // 輸出 { value: 'bar', done: false }
      
      // 第二次的next(參數(shù)), 才會(huì)賦值到a
      console.log(it.next("我是被傳進(jìn)來(lái)的1"));
      // 輸出'我是被傳進(jìn)來(lái)的1'
      // 輸出{ value: '2', done: false }
      
      console.log(it.next("我是被傳進(jìn)來(lái)的2"));
      // 輸出'我是被傳進(jìn)來(lái)的2'
      // 輸出{ value: undefined, done: true }
  

• 搭配promise, 處理異步(異步一的回調(diào)當(dāng)參數(shù)傳給異步二)

      // 使用Generator順序執(zhí)行兩次異步操作
      function* r(num) {
        // 此次yield返回 {value: promise, done: false }
        const r1 = yield compute(num);
        yield compute(r1);
      }
      
      // compute為異步操作，結(jié)合Promise使用可以輕松實(shí)現(xiàn)異步操作隊(duì)列
      function compute(num) {
        return new Promise(resolve => {
          setTimeout(() => {
            const ret = num * num;
            console.log(ret); // 輸出處理結(jié)果
            resolve(ret); // 操作成功
          }, 1000);
        });
      }
      
      // 不使用遞歸函數(shù)調(diào)用
      let it = r(2);
      // {value: promise,done:false}
      // it.next().value.then(num => it.next(num));
      
      // 修改為可處理Promise的next
      function next(data) {
        let { value, done } = it.next(data); // 啟動(dòng)
        if (!done) {
          value.then(num => {
            next(num);
          });
        }
      }
      
      next();
  

• async-await

  1. 區(qū)別: 是generator的一種特殊形式的語(yǔ)法糖, 并沒(méi)有完全實(shí)現(xiàn)generator異步流程的控制