美文网首页
ES6 generator

ES6 generator

作者: 别过经年 | 来源:发表于2017-09-27 17:12 被阅读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

    相关文章

      网友评论

          本文标题:ES6 generator

          本文链接:https://www.haomeiwen.com/subject/rwiuextx.html