Es6 Generator函数详细解析

时间:2021-05-28

ECMAScript 6 (简称 ES6 )作为下一代 JavaScript 语言,将 JavaScript 异步编程带入了一个全新的阶段。

Generator函数跟普通函数的写法有非常大的区别:

一是,function关键字与函数名之间有一个星号;

二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是“产出”)。

本文重点给大家介绍Es6 Generator函数,具体内容如下所示:

//定义一个generator函数 其内部有3种状态 var helloGenerator = function *() { var next1 = yield 'hello'; yield 'world' + next1; return 'ending'; } //调用generator 函数和普通函数一样,直接加上双括号 () 但是跟普通函数的区别是generator不会立即执行, 返回的也不是函数的结果,而是内部的一个指针。 var newGenerator = helloGenerator(); //generator 函数是分段执行的 会从头部直到遇到下一个yield 表达式的时候停止下来。 console.log(newGenerator.next('hahh')); //Object {value: "hello", done: false} console.log(newGenerator.next()); // {value: "worldhahh", done: false} console.log(newGenerator.next()); //{value: "ending", done: true} done true| false true代表的意思内部yield 表达式已经执行完毕 false则相反 console.log(newGenerator.next()); //{value: "undefined", done: true} var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; console.log([...myIterable]) // [1, 2, 3] function* foo(x) { var y = 2 * (yield (x + 1)); var z = yield (y / 3); return (x + y + z); } var a = foo(5); a.next() // Object{value:6, done:false} a.next() // Object{value:NaN, done:false} a.next() // Object{value:NaN, done:true} var b = foo(5); b.next() // { value:6, done:false } b.next(12) // { value:8, done:false } b.next(13) // { value:42, done:true } function* foo() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6; } for (let v of foo()) { console.log(v); } // 1 2 3 4 5 //上面代码使用for...of循环,依次显示 5 个yield表达式的值。这里需要注意,一旦next方法的返回对象的done属性为true,for...of循环就会中止,且不包含该返回对象,所以上面代码的return语句返回的6,不包括在for...of循环之中。 //除了for...of循环以外,扩展运算符(...)、解构赋值和Array.from方法内部调用的,都是遍历器接口。这意味着,它们都可以将 Generator 函数返回的 Iterator 对象,作为参数。 function* numbers () { yield 1 yield 2 return 3 yield 4 } // 扩展运算符 [...numbers()] // [1, 2] // Array.from 方法 Array.from(numbers()) // [1, 2] // 解构赋值 let [x, y] = numbers(); x // 1 y // 2 // for...of 循环 for (let n of numbers()) { console.log(n) } // 1 // 2 function *testError(){ try{ yield ; }catch (e){ console.log(e) } } var testE = testError(); testE.throw(new Error('会出错吗?'));// 会出错吗? 这个错误是由generator 函数的内部捕获的。 function* gen() { yield 1; yield 2; yield 3; } var g = gen(); g.next() // { value: 1, done: false } g.return('foo') // { value: "foo", done: true } g.next() // { value: undefined, done: true }

总结

以上所述是小编给大家介绍的Es6 Generator函数详细解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章