【JS015】ES6的学习笔记之生成器（Generator）

日期：2021年9月13日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006
如果您想了解更多有关javascript的知识，那么请点《javascript学习的奇妙之旅》

---

---

一、生成器初识

说明：生成器（Generator）函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

• function关键字与函数名之间有一个星号*，因为ES6并没有规定*位置的具体位置，所以*只要在function关键字与函数名之间就可以（写法推荐靠近function）；

序号	语法	说明
1	function* fn(x,y,z) { ··· }	强烈推荐，*左写，其中fn为函数名称
2	function * fn(x,y,z) { ··· }	*居中，其中fn为函数名称
3	function *fn(x,y,z) { ··· }	*右写，其中fn为函数名称
4	function*fn(x,y,z) { ··· }	*紧靠写法，其中fn为函数名称

• 函数体内部使用yield表达式（yield译为产出），定义不同的内部状态；

比较	Generator函数	普通函数
调用方法	函数名后面加上一对圆括号()	函数名后面加上一对圆括号()
执行情况	调用后，函数并不执行	调用后，函数立即执行
返回情况	返回一个指向内部状态的指针对象，即迭代器对象	返回函数运行结果

function* gen(){
    console.log("Hello World");
};

//返回的迭代器（遍历器）对象
let iterator = gen();
console.log(iterator);
//控制台输出：
//gen {<suspended>}

console.log(iterator.next);
//控制台输出：
//ƒ next() { [native code] }

console.log(iterator.next());
//控制台输出：
//Hello World
//{value: undefined, done: true}

可以看出，gen()并没有立即执行，调用iterator.next()（即gen().next()）才执行代码，function* gen()是一个暂缓执行的函数。

function* gen(){
    yield "111";
    yield "222";
};

//返回的迭代器（遍历器）对象
let iterator = gen();
console.log(iterator);
//控制台输出：
//gen {<suspended>}

//第一次调用next()：
console.log("第一次调用next()：",iterator.next());
//第一次调用next()： {value: '111', done: false}

//第二次调用next()：
console.log("第二次调用next()：",iterator.next());
//第二次调用next()： {value: '222', done: false}

//第三次调用next()：
console.log("第三次调用next()：",iterator.next());
//第三次调用next()： {value: undefined, done: true}

可以看出， 函数返回的迭代器（遍历器）对象，只有调用next()方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数，yield表达式就是暂停标志。因此，JavaScript提供了手动的惰性求值（Lazy Evaluation）的语法功能；

知识加油站：不熟悉迭代器（遍历器）对象的同学们，可以参看上一章《【JS014】ES6的学习笔记之迭代器（Iterator）》

function* gen(one){
    console.log(`one = ${one}`);
    let two = yield "111";
    console.log(`two = ${two}`);
    let three = yield "222";
    console.log(`three = ${three}`);
};

let iterator = gen("1");
console.log(iterator);
//控制台输出：
//gen {<suspended>}

//第一次调用next()：
console.log("第一次调用next()：",iterator.next());
//one = 1 //--> 说明：第一次调用next()，gen()中的参数传入
//第一次调用next()： {value: '111', done: false}

//第二次调用next()：
console.log("第二次调用next()：",iterator.next("2"));
//two = 2
//第二次调用next()： {value: '222', done: false}

//第三次调用next()：
console.log("第三次调用next()：",iterator.next("3"));
//three = 3
//第三次调用next()： {value: undefined, done: true}

yield表达式本身没有返回值，或者说总是返回undefined。next()方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

二、生成器的方法

方法	含义
Generator.prototype.next()	返回一个包含属性 done 和 value 的对象。该方法也可以通过接受一个参数用以向生成器传值。
Generator.prototype.return()	返回给定的值并结束生成器。
Generator.prototype.throw()	用来向生成器抛出异常，并恢复生成器的执行，返回带有 done 及 value 两个属性的对象。

• 语法：iterator.next(value)

function* gen(){
    yield "111";
    yield "222";
};

let iterator = gen();

console.log(iterator.next());
//{value: '111', done: false}
console.log(iterator.next());
//{value: '222', done: false}
console.log(iterator.next());
//{value: undefined, done: true}

• 语法：iterator.return(value)

function* gen(){
    yield "111";
    yield "222";
};

let iterator = gen();

console.log(iterator.next());
//{value: '111', done: false}
console.log(iterator.return("来了一个return"));
//{value: '来了一个return', done: true}
console.log(iterator.next());
//{value: undefined, done: true}

• 语法：iterator.throw(exception)

function* gen(){
    try {
        yield 123;
    } catch (error) {
        console.log(`内部错误捕获：${error}`);
    }
};

let iterator = gen();
iterator.next();

try {
    iterator.throw("err1");
    iterator.throw("err2");
} catch (error) {
    console.log(`外部错误捕获：${error}`);
}
//控制台输出：
//内部错误捕获：err1
//外部错误捕获：err2

---

参考文章：
1、《Web 开发技术》之Generator
2、《ECMAScript 6 入门》之Generator 函数的语法

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/120177908