ES6 生成器 generator

2018-03-16  本文已影响0人  sandy2017

ES6 生成器是一种顺序、看似同步的异步流程控制表达风格,它可以打破代码执行的完整性,试看下方代码。

function foo(x,y) {
        return (x+y);
}
var it = foo(1,2);
    console.log(it); //3
function *foo(x,y) {
        return (x+y);
}
var it = foo(1,2);
       console.log(it);
var result = it.next();
      console.log(result.value); //3

从中我可以知道这个生成器打破了代码执行的完整性。var it = foo()这行代码只是构造了 it 一个迭代器,并没有执行生成器。真正执行生成器的代码是 var result = it.next();

 1.function *foo() {}
 2.function* foo() {}
 3.function*foo() {}

下面介绍 生成器 具体使用

function *foo(x) {
    var y = x * (yield) * (yield);
    return y;
    }
    var it = foo( 6 );
    // 启动foo(..)
    it.next();
    it.next(7);
    var res = it.next( 8 );
    console.log(res.value); //336
var arr = [1,2,3,4];
    var it = arr[Symbol.iterator]();
    console.log(it.next().value); //1
    console.log(it.next().value); //2
    console.log(it.next().value); //3
function *something() {
        var setVal;
        while(true) {
            if(setVal == undefined) {
                setVal = 1;
            } else {
                setVal = setVal*3+12;
            }
            yield setVal;
        }
    }
    var it = something();
    console.log(it.next().value); //1
    console.log(it.next().value); //15

上述代码使用 while(true)使函数能够产生无限个数字序列。若 while (true)没有使用yield,循环会一直下去,这使得 while(true)在javascript 的使用减少,使用 yield 可以改善这一局面,当执行到 yield 时,返回到主程序中或者是循环队列中。

function *something() {
        try{
            var setVal;
            while(true) {
                if(setVal == undefined) {
                    setVal = 1;
                } else {
                    setVal = setVal*3+12;
                }
                yield setVal;
            }
        } finally {
            console.log("清理");
        }
    }
    var it = something();
    for (var val of it) {
        console.log(val);
        if (val > 200) {
            console.log(it.return("val的值大于200了").value);
            //此处不需要 break 来结束这个循环
        }
    }

调用 it.return(..) 之后,它会立即终止生成器,这当然会运行 finally 语句。另外,它还会把返回的 value 设置为传入 return(..) 的内容,这就是 "val的值大于200了" 被传出去的过程。现在我们也不需要包含 break 语句了,因为生成器的迭代器已经被设置为done:true,所以 for..of 循环会在下一个迭代终止。

function foo(x,y) {
ajax(
    "http://some.url.1/?x=" + x + "&y=" + y,
    function(err,data){
      if (err) {
         // 向*main()抛出一个错误
         it.throw( err );
      }
      else {
         // 用收到的data恢复*main()
         it.next( data );
     }
   }
);
}
function *main() {
   try {
      var text = yield foo( 11, 31 );
      console.log( text );
   }
   catch (err) {
       console.error( err );
   }
}
var it = main();
// 这里启动!
it.next();

这段代码的闪光点就是yield foo(11,31);当我们执行 foo ()函数的时候,返回 undefined,遇到 yield 的时候停顿了,其实就是在思考一个问题“应该返回什么值给 text ”,回观 foo (),如果这个 Ajax 函数执行成功的话,执行 it.next(),这会响应数据恢复生成器,意味着们暂停的 yield 表达式直接接收到了这个值。然后随着生成器代码继续运行,这个值被赋给局部变量 text。从而实现异步操作。

上一篇 下一篇

猜你喜欢

热点阅读