ES6学习笔记<三> 生成器函数与yield

时间:2023-12-14 15:39:38

为什么要把这个内容拿出来单独做一篇学习笔记?

  生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数。

标题为什么是生成器函数与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); //
console.log(no2); //
console.log(no3); //
console.log(no4); //

注意 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

ES6学习笔记<三> 生成器函数与yield

ES6学习笔记<四> default、rest、Multi-line Strings

ES6学习笔记<五> Module的操作——import、export、as