为什么要把这个内容拿出来单独做一篇学习笔记?
生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数。
标题为什么是生成器函数与yield?
生成器函数类似其他服务器端语音中的接口(Interface),yield则是生成器函数中表示 返回 或 继续 执行的关键字。
弄清楚这两个概念后,先看一个例子:
function* fun(val) { yield 1*val; yield 2*val; yield 3*val; yield 4*val; return 5*val; } var add = fun(5); // 调用函数后不会运行,而是返回指向函数内部状态的指针 add.next(); // {value: 5, done: false} add.next(); // {value: 10, done: false} add.next(); // {value: 15, done: false} add.next(); // {value: 20, done: false} add.next(); // {value: 25, done: true}
生成器函数 yield 描述
根据语法规范,yield 关键字用来暂停和继续执行一个生成器函数。当外部调用生成器的 next() 方法时,yield 关键字右侧的表达式才会执行。
执行结果会转化为一个对象(包含两个属性, value 和 done),作为 next() 方法的返回值。
生成器函数 yield 理解
生成器函数类似服务器端语言的接口(Interface),生成器函数不可直接调用,必须赋值给为变量 或 赋值的变量通过 next() 调用执行 或 destructuring解构。
生成器函数执行过程分解:
首次执行到第一个 yield 返回结果并继续执行后续代码,但不会返回后续yield的值,生成器函数且储存之前变量及运算结果;
下次执行跳过上次 yield 结果返回最近一个 yield 结果... ...
... ... 依次执行直到没有 yield 或 有return为止。
function* fun(val) { console.log("调用生成器函数"); yield console.log(1*val); yield 2*val; yield 3*val; yield 4*val; return 5*val; } var add = fun(5); fun(5); // 不输出任何结果
function* fun(){ var a = 1; var b = 2; yield a; [a, b] = [b, a + b]; yield a; [a, b] = [b, a + b]; yield a; [a, b] = [b, a + b]; yield a; [a, b] = [b, a + b]; } var [no1,no2,no3,no4] = fun(); console.log(no1); // 1 console.log(no2); // 2 console.log(no3); // 3 console.log(no4); // 5
注意 destructuring解构变量不可调用next(); 这个百度没查到为什么 不能调用next(),有大神知道为什么谢谢留言告诉下。
for... of ... 用法
function* fun(){ let a = 1,b = 2,c = 3; yield a; yield b; yield c; } for(let i of fun()){ console.log(i); // 1 2 3 }
for…of循环可以自动遍历Generator函数时生成的Iterator对象。
ES6学习笔记目录
ES6学习笔记<一> let const class extends super
ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring