您现在的位置是:首页 > Javascript
当前栏目
详解JavaScript的生成器函数(function*)
2023-04-18 16:06:02 时间
一、生成器函数是什么?
用 function *
定义的函数称之为生成器函数,返回值是一个 Generator 对象,不能直接使用,需要通过调用 next() 方法来使用。
1、语法
// 语法
function* name([param[, param[, ... param]]]) { statements }
2、简单实例
// 实例
function* generator(i) {
return i+1;
}
const gen = generator(10);
console.log(gen.next());
// 输出:{value: 11, done: true}
3、不能作为构造函数
function* f() {}
var obj = new f; // throws "TypeError: f is not a constructor"
二、其他特性
1、yield
yield
关键字可以让生成器函数变成异步函数。yield 作用是暂停运行代码,直至下一次 next() 方法被调用。
function* generator(i) {
yield i;
yield i + 10;
}
const gen = generator(10);
console.log(gen.next().value);
// 输出: 10
console.log(gen.next().value);
// 输出: 20
2、yield*
yield*
表示移交代码执行权。
function* anotherGenerator(i) {
yield i + 1;
yield i + 2;
yield i + 3;
}
function* generator(i){
yield i;
yield* anotherGenerator(i);// 移交执行权
yield i + 10;
}
var gen = generator(10);
console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20
3、return
return
表示无需等待,直接返回。
function* yieldAndReturn() {
yield "Y";
return "R";//显式返回处,可以观察到 done 也立即变为了 true
yield "unreachable";// 不会被执行了
}
var gen = yieldAndReturn()
console.log(gen.next()); // { value: "Y", done: false }
console.log(gen.next()); // { value: "R", done: true }
console.log(gen.next()); // { value: undefined, done: true }
三、更多使用场景
1、完整调用
function* idMaker(){
var index = 0;
while(index<3)
yield index++;
}
var gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined
2、构造时传递参数
// 可以接受参数
function* idMaker(){
var index = arguments[0] || 0;
while(true)
yield index++;
}
var gen = idMaker(5);
console.log(gen.next().value); // 5
console.log(gen.next().value); // 6
3、运行时传递参数
// 传递参数
function *createIterator() {
let first = yield 1;
let second = yield first + 2; // 4 + 2
// first =4 是next(4)将参数赋给上一条的
yield second + 3; // 5 + 3
}
let iterator = createIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next(4)); // "{ value: 6, done: false }"
console.log(iterator.next(5)); // "{ value: 8, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
4、遍历
// 二维数组变成一维数组
function* iterArr(arr) { //迭代器返回一个迭代器对象
if (Array.isArray(arr)) { // 内节点
for(let i=0; i < arr.length; i++) {
yield* iterArr(arr[i]); // (*)递归
}
} else { // 离开
yield arr;
}
}
// 使用 for-of 遍历:
var arr = ['a', ['b', 'c'], ['d', 'e']];
for(var x of iterArr(arr)) {
console.log(x); // a b c d e
}
// 或者直接将迭代器展开:
var arr = [ 'a', ['b',[ 'c', ['d', 'e']]]];
var gen = iterArr(arr);
arr = [...gen]; // ["a", "b", "c", "d", "e"]
四、另外两种生成器函数
1、生成器函数表达式
生成器函数表达式 可以省略函数名,而生成器函数不可以。
// 语法
function* [name]([param1[, param2[, ..., paramN]]]) {
statements
}
// 实例
const foo = function*() {
yield 'a';
yield 'b';
yield 'c';
};
let str = '';
for (const val of foo()) {
str = str + val;
}
console.log(str);
// expected output: "abc"
2、GeneratorFunction
- GeneratorFunction 并不是一个全局对象,只能通过
Object.getPrototypeOf(function*(){}).constructor
创建; - 在JavaScript中,生成器函数实际上都是 GeneratorFunction 的实例对象;
- GeneratorFunction 创建的生成器函数 效率低于
function*
定义的生成器函数,且只能使用本地变量和全部变量。
// 语法
new GeneratorFunction ([arg1[, arg2[, ...argN]],] functionBody)
// 实例
var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
var g = new GeneratorFunction("a", "yield a * 2");
var iterator = g(10);
console.log(iterator.next().value); // 20
五、参考文档
相关文章
- 使用 Tektoncd Operator 管理 Tekton 组件
- 字节一面:网站显示不出来,怎么排查?
- 云原生架构成功的六大原则
- 4G改变生活,5G改变社会,那么6G改变什么?
- 仅仅因为利润巨大吗?谷歌布局Web3意欲何为
- 计算机不会骗人,事出反常必有妖!
- 终于有人把Knative讲明白了
- 性能提升一倍!云原生网关支持 TLS 硬件加速
- 上网老有小广告?原来运营商和路由器都可能坑你
- 一文详解微服务架构
- 十倍效能提升——Web 基础研发体系的建立
- 设计稿自动生成可用页面的展望
- 【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~
- javascript的api设计原则
- 【CSS进阶】伪元素的妙用--单标签之美
- 视错觉:从一个看似简单的自定义控件说起
- 通往全栈工程师的捷径 —— react
- 高性能Javascript--脚本的无阻塞加载策略
- 写给面试者——前端面试【有感而发】
- 从登录框看前端