75年生人,程序员,在西安。

ES6 Generators 简单理解

ES6 Generators (点击看原文)简单理解:

function *foo(x) {

    var y = 2 * (yield (x + 1));

    var z = yield (y / 3);

    return (x + y + z);

}

var it = foo( 5 );

// note: not sending anything into `next()` here

console.log( it.next() );       // { value:6, done:false }

console.log( it.next( 12 ) );   // { value:8, done:false }

console.log( it.next( 13 ) );   // { value:42, done:true }

  • 方法名前加“*”表示为generator方法;

  • 方法体中有yield表示暂停并输出一次结果;

  • 调用方法时使用 var it = foo(5) 先声明,再用 it.next() 来进行一次调用,再次调用时 it.next(12) 将12传入上一次yield的位置做为参数。

上例将一个*foo方法分为几步来执行:

  • var it = foo(5); 先构造一个 iterator 迭代器;

  • it.next() => yield (x + 1); 第一次计算x=5; x+1 并返回 6,done: false;

  • it.next(12) => yield (y / 3); 第二次计算y=2*12=24; y/3 并返回 8,done: false;

  • it.next(13) => return (x + y + z); 第三次计算 z = 13; 5 + 24 +13 并返回 42,done: true;

还可用于(无限)循环,如下:

function *foo() {

    yield 1;

    yield 2;

    yield 3;

    yield 4;

    yield 5;

    return 6;

}

for (var v of foo()) {

    console.log( v );

}

// 1 2 3 4 5

console.log( v ); // still `5`, not `6` 😔

最后一个return 6 因为done:true,所以不被 for...of 执行。 


评论

© 世风十三 | Powered by LOFTER