简述:ES6中Generator函数与yield关键字

2024-05-31 12:52

本文主要是介绍简述:ES6中Generator函数与yield关键字,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

ES6:Generator 函数 与 yield 关键字

一、Generator 函数 与 yield 引入

  1. 语法上:首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。
    执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。

  2. 形式上: Generator函数是一个普通函数,但是有两个特征:

    1. function 关键字与函数名之间有一个星号
    2. 函数体内部使用yield表达式,定义不同的内部状态( yield 在英语里的意思就是“产出”)。

示例:

function* count() {yield '1'; // yield表达式就是暂停标志,遇到 yield 表达式,就暂停执行后面的操作,并将紧跟在 yield 后面的那个表达式的值,作为返回的对象的 value 属性值。yield '2';yield '3';return '4';
}
var c = count(); // 函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。不同的是:调用 `Generator` 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是遍历器对象(Iterator Object)**。我们需要一步步调用执行状态。// 简单理解: `Generator` 函数是分段执行的,内部 `yield` 表达式是**暂停执行的标记**,而 `next` 方法可以恢复执行。所以`Generator`函数运行如下:
// console.log(c) // [[GeneratorState]] : "suspended" //暂停、中止状态c.next() // 由于yieid表达式暂停到此,调用 next 方法时,恢复执行,往下执行遇到下一个 yield 表达式,继续暂停。
// { value: '1', done: false }
c.next()
// { value: '2', done: false }
c.next()
// { value: '3', done: false }
c.next()
// { value: '4', done: true } // 此时的Generator函数状态 [[GeneratorState]] : "closed" // 关闭,表示状态已经执行完毕
c.next()
// { value: undefined, done: true } // 状态已经完成,返回对象的value为undefined, 后续调用next()都是这个值
  1. Generator 函数可以不用 yield 表达式,这时就变成了一个单纯的暂缓执行函数。
	function* f() {console.log('执行了!')}var generator = f();setTimeout(function () {generator.next()}, 2000);
  1. yield表达式只能用在 Generator 函数里面
  2. yield 表达式如果用在另一个表达式之中,必须放在圆括号里面。
	function* demo() {console.log('Hello' + yield); // SyntaxErrorconsole.log('Hello' + yield 123); // SyntaxErrorconsole.log('Hello' + (yield)); // OKconsole.log('Hello' + (yield 123)); // OK}

二、next()方法传参

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

示例:

function* foo(x) {const y = yield x;const z = '这是从第3个next获取的' + (yield y); // y需要自定义,从哪里来? next()传入,传入的参数是上一个yield表达式返回的值yield z; // z同理return 5
}
var a = foo(5);
console.log(a.next())
console.log(a.next(1)) // 如果不传参数,则输出undefined
console.log(a.next(2))

再看一个示例:

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} 不带参数,导致 y 的值等于 2 * undefined (即 NaN ),除以 3 以后还是 NaN
a.next() // Object{value:NaN, done:true} 不带参数,所以 z 等于 undefined ,返回对象的 value 属性等于 5 + NaN + undefined ,即 NaN 。var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

三、for...of遍历suspended状态的Generator 函数

for...of循环可以自动遍历 Generator 函数运行时生成的Iterator对象,且此时不再需要调用 next 方法。

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 属性为 truefor...of 循环就会中止,且不包含该返回对象,所以上面代码的 return 语句返回的 6 ,不包括在 for...of 循环之中。

做个示例:

function* fibonacci() {let [prev, curr] = [0, 1];for (; ;) {yield curr;[prev, curr] = [curr, prev + curr];}
}
for (let n of fibonacci()) {if (n > 1000) break;console.log(n); // 1 1 2 3 5 8 .... 987
}

for (; ;) {}表示无限循环或无条件循环,必须设置break终止循环

	var count = 1for (; ;) {console.log(count)count++if (count > 5) {break}}

四、thorw()抛出错误

Generator函数返回的遍历器对象,都有一个 throw方法,可以在函数体外抛出错误,然后在 Generator 函数体内捕获。

var g = function* () {try {yield;} catch (e) {console.log('内部捕获', e);}
};
var i = g();
i.next();
try {i.throw('a');i.throw('b');
} catch (e) {console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b

上面代码中,遍历器对象 i 连续抛出两个错误。第一个错误被 Generator 函数体内的 catch 语句捕获。 i 第二次抛出错误,由于 Generator 函数内部的 catch 语句已经执行过了,不会再捕捉到这个错误了,所以这个错误就被抛出了 Generator 函数体,被函数体外的 catch 语句捕获。
示例2:

var g = function* () {try {yield 1;} catch (e) {console.log('内部捕获', e);}try {yield 2;} catch (e) {console.log('内部捕获1', e);}
};
var i = g();
i.next()
i.next() // 执行到此,已经进入第2个suspended的try..catch
try {i.throw('a');i.throw('a1');i.throw('b');
} catch (e) {console.log('外部捕获', e);
}
// 内部捕获1 b
// 外部捕获 a1

throw 方法可以接受一个参数,该参数会被 catch 语句接收,建议抛出 Error 对象的实例。

var g = function* () {try {yield;} catch (e) {console.log(e);}
};
var i = g();
i.next();
i.throw(new Error('出错了!'));
// Error: 出错了!(…)

五、return()

Generator函数返回的遍历器对象,还有一个 return方法,可以返回给定的值,并且终结遍历 Generator 函数。

function* gen() {yield 1;yield 2;yield 3;
}
var g = gen();
g.next()        // { value: 1, done: false }
g.return(4) 	// { value: 4, done: true }  传入参数为终止时的返回值,如果不传则输出undefined
g.next()        // { value: undefined, done: true }// 等同于
function* gen() {yield 1;return 4yield 2;yield 3;
}

如果 Generator 函数内部有 try...finally 代码块,且正在执行 try 代码块,那么 return 方法会导致立刻进入 finally 代码块,执行完以后,整个函数才会结束。

function* numbers() {yield 1;try {yield 2;yield 3;} finally {yield 4;yield 5;}yield 6;
}
var g = numbers();
g.next() // { value: 1, done: false }
g.next() // { value: 2, done: false }
g.return(7) // { value: 4, done: false }
g.next() // { value: 5, done: false }
g.next() // { value: 7, done: true }

六、next()、throw()、return() 的共同点

next() 、throw() 、 return() 这三个方法本质上是同一件事,可以放在一起理解。它们的作用都是让 Generator 函数恢复执行,并且使用不同的语句替换 yield 表达式。

  1. next() 是将 yield 表达式替换成一个值。
const g = function* (x, y) {let result = yield x + y;return result;
};
const gen = g(1, 2);
gen.next(); // Object {value: 3, done: false}
gen.next(1); // Object {value: 1, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = 1;
  1. throw() 是将 yield 表达式替换成一个 throw 语句。
gen.throw(new Error('出错了')); // Uncaught Error: 出错了
// 相当于将 let result = yield x + y
// 替换成 let result = throw(new Error('出错了'));
  1. return() 是将 yield 表达式替换成一个 return 语句。
gen.return(2); // Object {value: 2, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = return 2;

七、yield*表达式

  1. 看一个示例: 如果在 Generator 函数内部,调用另一个 Generator 函数。需要在前者的函数体内部,自己手动完成遍历。
function* foo() {yield 'a';yield 'b';
}
function* bar() {yield 'x';// 手动遍历 foo()for (let i of foo()) {console.log(i);}yield 'y';
}
for (let v of bar()){console.log(v);
}
// x
// a
// b
// y
  1. 上面代码中,foobar 都是 Generator 函数,在 bar 里面调用 foo ,就需要手动遍历 foo 。如果有多个 Generator 函数嵌套,写起来就非常麻烦。所以我们可以用yield*代替for...of
function* bar() {yield 'x';yield* foo();yield 'y';
}
// 等同于
function* bar() {yield 'x';yield 'a';yield 'b';yield 'y';
}
// 等同于
function* bar() {yield 'x';for (let v of foo()) {yield v;}yield 'y';
}
for (let v of bar()) {console.log(v);}

八、用法

  1. 封装异步请求
function* main(url, cb) {// showLoading();try {yield request(url, cb);} catch (e) {console.log(e)}// hideLoading();
}
function request(url, cb) {console.log(url)setTimeout(() => {// it.next()cb && cb('data')it.throw(new Error('报错了...'))}, 1000)
}var it = main("http://some.url", (data) => {console.log(data)
});
it.next();
  1. Generator 与状态机
    Generator 是实现状态机的最佳结构。比如,下面的clock函数就是一个状态机。
var ticking = true;
var clock = function() {if (ticking)console.log('Tick!');elseconsole.log('Tock!');ticking = !ticking;
}

上面代码的 clock 函数一共有两种状态( TickTock ),每运行一次,就改变一次状态。这个函数如果用 Generator 实现,就是下面这样。

var clock = function* () {while (true) {console.log('Tick!');yield;console.log('Tock!');yield;}
};

上面的 Generator 实现与 ES5 实现对比,可以看到少了用来保存状态的外部变量 ticking ,这样就更简洁,更安全(状态不会被非法篡改)、更符合函数式编程的思想,在写法上也更优雅。Generator 之所以可以不用外部变量保存状态,是因为它本身就包含了一个状态信息,即目前是否处于暂停态
详情请点击了解

这篇关于简述:ES6中Generator函数与yield关键字的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1017983

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1171(母函数或多重背包)

题意:把物品分成两份,使得价值最接近 可以用背包,或者是母函数来解,母函数(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v) 其中指数为价值,每一项的数目为(该物品数+1)个 代码如下: #include<iostream>#include<algorithm>

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

C++操作符重载实例(独立函数)

C++操作符重载实例,我们把坐标值CVector的加法进行重载,计算c3=c1+c2时,也就是计算x3=x1+x2,y3=y1+y2,今天我们以独立函数的方式重载操作符+(加号),以下是C++代码: c1802.cpp源代码: D:\YcjWork\CppTour>vim c1802.cpp #include <iostream>using namespace std;/*** 以独立函数

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',