es6之generator详解

generator小试牛刀

  • generator 简介

    generator:您可以将生成器视为可以暂停和恢复的进程(代码段),代码在执行的过程中可以主要交出控制权
    genearator 语法:function *是一个新的关键字用于生成器函数(也有生成器方法)。
    yield是generator可以自行暂停的运算符。此外,generator还可以通过yield接收输入和发送输出。

   function* genFunc() {
    // (A)
    console.log('First');
    yield;
    console.log('Second');
   }
    const genObj = genFunc();
    genObj.next();
    // Output: First
    genObj.next();
    // output: Second
1. 当您调用生成器函数genFunc()时,您将获得可用于控制进程的生成器对象genObj
   此时该生成器对象里面的代码还没有执行,该进程最初在行A中暂停。
2. genObj.next()恢复执行,
3. genFunc()中的yield将暂停执行

generator 函数的不同种类

  • generator 函数
 function* genFunc() { 
     ··· 
    }
 const genObj = genFunc();
  • generator函数表达式
 const genFunc = function* () { 
     ··· 
  };
 const genObj = genFunc();
  • 对象中的generator方法
 const obj = {
     * generatorMethod() {
         ···
     }
 };
 const genObj = obj.generatorMethod();
  • 类中的generator方法
 class MyClass {
     * generatorMethod() {
         ···
     }
 }
 const myInst = new MyClass();
 const genObj = myInst.generatorMethod();

使用案例

有人问了,这generator有什么用了,generator返回的对象是可迭代的;每个产量都有助于迭代值的序列。

  • 使用生成器实现迭代.
function * objectEntries(obj){
   const objKeys=Reflect.ownKeys(obj)
   for(const objKey of objKeys){
       yield [objKey,obj[objKey]]
   }
}

const jane = { first: 'Jane', last: 'Doe' };
for (const [key,value] of objectEntries(jane)) {
    console.log(`${key}: ${value}`);
}
  • 解决异步回调
    您可以使用generator极大地简化与Promises的工作。我们来看看一个基于Promise的函数fetchJson()以及如何通过generator进行改进。

推荐阅读更多精彩内容