ES6 generator

2017-09-27  本文已影响10人  别过经年

1. 今天在debug项目代码的时候发现generator函数arguments拿到的数据和传进来的request不一致,于是产生了怀疑,

yield call(option.before,request)

找了篇 ES6 中的生成器函数介绍用vscode对下面的代码进行debug

function* list() {
    for(var i = 0; i < arguments.length; i++) {
        yield arguments[i];
    }
    return "done.";
}

var o = list(1, 2, 3);
o.next(); // Object {value: 1, done: false}
o.next(); // Object {value: 2, done: false}
o.next(); // Object {value: 3, done: false}
o.next(); // Object {value: "done.", done: true}
o.next(); // Error: Generator has already finished

漫话JavaScript与异步·第三话——Generator:化异步为同步

2. 怎么去很好的理解generator内部的for循环

function* gee(age) {
  console.info('pp');
  for (var i = 0; i < 3; i++) {
    console.info('before');
    yield i;
    console.info('after');
  }
  yield 'lll';

  return 'xxx';
}

const it = gee(99);

console.info(it.next());
console.info(it.next());
console.info(it.next());
console.info(it.next());
console.info(it.next());

function* f() {
  console.log('执行了!');
}

var generator = f();

generator.next();

function* fn() {
  console.info("i:",i)
  for (var i = 0; true; i++) {
    var reset = yield i;
    console.info(reset)
    if (reset) {
      i = -1;
    }
  }
}

var g = fn();

console.info(g.next())
console.info(g.next())
console.info(g.next(true))
console.info(g.next())
console.info(g.next(true))
console.info(g.next())
console.info(g.next())

上述代码运行结果:
pp
before
{ value: 0, done: false }
after
before
{ value: 1, done: false }
after
before
{ value: 2, done: false }
after
{ value: 'lll', done: false }
{ value: 'xxx', done: true }
执行了!
i: undefined
{ value: 0, done: false } 1
undefined
{ value: 1, done: false } 2
true
{ value: 0, done: false } 3
undefined
{ value: 1, done: false } 4
true
{ value: 0, done: false } 5
undefined
{ value: 1, done: false } 6
undefined
{ value: 2, done: false } 7

最后一个例子可以看出除了第一次循环是从generator头部开始的,后面的循环都是在for循环中基于上一次的循环开始的(这个地方可以理解为串行的多个yield,不知道这么理解合不合适),

如果g.next(true)

function* fn() {
  console.info("i:",i)
  for (var i = 0; true; i++) { // 3. i加1, 为0
    var reset = yield i; // 1.从上一次循环的地方开始,reset 为true 
    // 4.回到这里,遇到了yield关键字,对外输出{ value: 0, done: false } ,暂停
    console.info(reset)
    if (reset) {
      i = -1; // 2.i为-1
    }
  }
}

最后一个例子来自于如阮一峰的ES6

上一篇 下一篇

猜你喜欢

热点阅读