轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历。
在说具体的ES6生成器之前,我觉得我们应该先来看一个例子,因为它真的很晦涩,我们需要先增加一下兴趣会说话的猫
ES6生成器可以说是ES6新特性中最具魔力的特性,它可以极大的简化代码,并且贯穿了整个ES6的使用。它与我们以前学过的js特性都不同,它可以在函数的内部随时暂停。
那么我们从最简单的定义生成器说起,这可能会相对容易一些,以下是会说话的猫的生成器代码:
function* quips(name) {
yield "hello " + name + "!";
yield "i hope you are enjoying the blog posts";
if (name.toLowerCase().startsWith("x")) {
yield "hey, it's cool how your name starts with an X, " + name;
}
yield "see you later!";
}
它看起来像一个函数,但是也有一些不同
- 它使用function*来声明,而不是function。
- 它使用yield来返回,而不是return。生成器函数可以yield多次而不会退出程序,在执行过程中遇到yield表达式立刻暂停,后续可恢复执行状态,而return直接退出程序。
var meow_iter = quips("Xingu");
//[object Generator]
meow_iter.next();
//{value:"hello Xingu!",done:false}
meow_iter.next();
//{value:"i hope you are enjoying the blog posts",done:false}
meow_iter.next();
//{value:"hey, it's cool how your name starts with an X, Xingu",done:false}
meow_iter.next();
//{value:"see you later!",done:false}
meow_iter.next();
//{value:undefied,done:true}
以上就是会说话的猫生成器的执行过程,看过ES6迭代器的同学可能基本上能看懂这段代码了。但是当你调用一个生成器的时候,它并非立即执行,而是在生成器函数第一句代码执行之前返回一个生成器对象(就是上面的meow_iter),这个时候函数冻结了。当你调用对象的.next()方法的时候,函数调用将其自身解冻并一直运行到下一个yield表达式,再次暂停。 当调用最后一个.next()的时候,返回的done为true,调用结束。这就是基本的生成器执行过程了。
function* num(){
yield 1;
yield 2;
return 3;
yield 4;
}
var itr = num();
console.log(itr.next());
console.log(itr.next());
console.log(itr.next());
console.log(itr.next());
console.log(itr.next());
// Object { value: 1, done: false }
// Object { value: 2, done: false }
// Object { value: 3, done: true }
// Object { value: undefined, done: true }
// Object { value: undefined, done: true }
事实胜于雄辩,当我们在生成器中使用return的时候,那么return的值将会作为最后的返回值,而return后面的yield语句不会生效。
function* num(){
yield 1;
yield 2;
return 3;
yield 4;
}
for(var i of num()){
console.log(i);
}
//1
//2
可以看到for-of并不会遍历到return的值,也不会遍历到return之后yield的值。
function* num(){
console.log("start");
for(var i = 0; i < 3; i++){
yield i;
}
console.log("end");
}
for(var i of num()){
console.log(i);
}
// start
// 0
// 1
// 2
// end
官方对与循环中yield是这样解释的:在循环中,每当生成器执行yields语句,生成器的堆栈结构(本地变量、参数、临时值、生成器内部当前的执行位置)被移出堆栈。然而,生成器对象保留了对这个堆栈结构的引用(备份),所以稍后调用.next()可以重新激活堆栈结构并且继续执行。什么东西?好像很高深的样子。说了这么长一串,无非就是说循环中的yield和正常语句的yield在使用上没有区别。
function* num(){
yield 1;
yield 2;
}
function* num1(){
yield 3;
yield* num();
yield 4
}
for(var i of num1()){
console.log(i);
}
// 3
// 1
// 2
// 4
.next()传参
function* add(num){
var x = yield (num + 1);
console.log(x);
var y = yield (x + 1);
return x + y;
}
var a = add(1);
console.log(a.next());
console.log(a.next());
console.log(a.next());
// Object { value: 2, done: false }
// undefined
// Object { value: NaN, done: false }
// Object { value: NaN, done: true }
这是一个传入参数的例子
function* add(num){
var x = yield (num + 1);
console.log(x);
var y = yield (x + 1);
return x + y;
}
var a = add(1);
console.log(a.next());
console.log(a.next(2));
console.log(a.next(3));
// Object { value: 2, done: false }
// 2
// Object { value: 3, done: false }
// Object { value: 5, done: true }
可见,我们在生成器中yield的返回值不能初始化左边的变量,实际上给.next()方法传参数, 那么这个参数将会作为上一次yield语句的返回值,如上我们传入2作为参数,那么上一个yield(num+1)就相当于返回了2,不然我们无法使用它的返回值,如例1。这样说还是有点难懂,一些复杂的问题往往因为一些简单的举例而变得容易理解。实际上这种给.next()传参的做法常常用来代替异步方式的Ajax请求,看完下面的例子你可能会恍然大悟。
"use strict";
function* main() {
var result = yield request("http://www.filltext.com?rows=10&f={firstName}");
console.log(result);
//do 别的ajax请求;
} function request(url) {
var r = new XMLHttpRequest();
r.open("GET", url, true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
var data = JSON.parse(r.responseText);
//数据成功返回以后, 代码就能够继续往下走了;
it.next(data);
};
r.send();
} var it = main();
it.next();
console.log("执行到这儿啦");
it.next(data)将data作为上一次yield的返回值赋值给result,然后打印result,这种用同步的方式实现了和异步编程一样的效果,真是令人惊讶!
function* producevalues() {
setup();
try {
// ... 生成一些值
} finally {
cleanup();
}
}
for (var value of producevalues()) {
work(value);
}
我们希望无论如何都在cleanup()中释放一些资源,但这里有一些情况:
- 我们没在 try 代码块中调用 work(value) ,如果它抛出异常怎么办?
- 或者假设 for-of 循环包含一条 break 语句或 return 语句。清理步骤又会如何执行呢?
function* num() {
try {
for(var i = 0; i < 3; i++){
yield i;
}
} finally {
console.log("finally run");
}
}
function work(value){
if(value != 1){
console.log(value);
}else{
throw(new Error("error"));
}
}
for(var value of num()) {
work(value);
}
// 0
// finally run
// Error: error
循环中抛出异常,finally照常执行
function* num() {
try {
for(var i = 0; i < 3; i++){
yield i;
}
} finally {
console.log("finally run");
}
}
function work(value){
console.log(value);
}
for(var value of num()) {
if(value == 1){
break;
}
work(value);
}
// 0
// finally run
循环中break或return,finally照常执行。
function* num() {
try {
for(var i = 0; i < 3; i++){
yield i;
}
} finally {
console.log("finally run");
}
}
function work(value){
console.log(value);
}
var a = num();
for(var value of a) {
if(value == 1){
a.return();
}
work(value);
}
// 0
// finally run
// 1
下面我们介绍.throw()方法
function* num(){
try{
yield 1
}catch(e){
console.log("内部捕获")
}
}
var a = num();
a.next();
try{
a.throw("a");
}catch(e){
console.log("外部捕获")
}
//内部捕获
function* num(){
try{
yield 1
}catch(e){
console.log("内部捕获")
}
yield 2
}
var a = num();
a.next();
a.next();
try{
a.throw("a");
}catch(e){
console.log("外部捕获")
}
//外部捕获
最后补充一点关于生成器中的this以及它的原型
- 生成器中的this就是它的调用者。
- 生成器生成的Iterator,不但继承了Iterator的原型, 也继承了Generator的原型。
轻松学会ES6新特性之生成器的更多相关文章
- ES6新特性之生成器函数 (generator function): function*
一.什么是生成器函数(generator function)? 生成器函数是ES6的新特性之一,它是一个在执行时能中途暂时退出,后面重新调用又能重新进入继续执行的一种函数. 并且在函数内定义的变量的所 ...
- ES6新特性三: Generator(生成器)函数详解
本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- 34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...
- ES6新特性概览1
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
随机推荐
- Android 字体修改,所有的细节都在这里 | 开篇
版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 每周会统一更新到这里,如果喜欢,可关注公众号获取最新文章. 未经允许,不得转载. 序 在 Android 下使 ...
- spring依赖注入中接口的问题
问题描述:一个接口,有俩个实现类当注入时候名字不同时,会出现不同的情况 action层: @Controller("userAction") @Scope("protot ...
- 深入理解计算机系统chapter9
从概念上来讲:虚拟存储器被组织为一个存放在磁盘上的N个连续的字节大小的单元组成的数组. 磁盘上数组的内容被缓存到主存中 1. 读写内存的安全性 物理内存本身是不限制访问的,任何地址都可以读写,而操作系 ...
- JDFS:一款分布式文件管理系统,第四篇(流式云存储续篇)
一 前言 本篇博客是JDFS系列博客的第四篇,从最初简单的上传.下载,到后来加入分布式功能,背后经历了大量的调试,尤其当实验的虚拟计算结点数目增加后,一些潜在的隐藏很深的bug就陆续爆发.在此之前笔者 ...
- 强大的桌面用 PDF 重排工具:K2pdfopt 简明教程
用 Kindle 阅读 PDF 一直以来都遭到小伙伴们的无限吐槽,在那 Kindle 还能越狱的时代,我们有 Koreader 之类优秀的 Kindle 第三方插件实现 PDF 文档的实时重排,但是随 ...
- 关于js浮点数计算精度不准确问题的解决办法
今天在计算商品价格的时候再次遇到js浮点数计算出现误差的问题,以前就一直碰到这个问题,都是简单的使用tofixed方法进行处理一下,这对于一个程序员来说是及其不严谨的.因此在网上收集了一些处理浮点数精 ...
- Qt 打开文件的默认路径 QFileDialog::getOpenFileName()
为了说明QFileDialog::getOpenFileName()函数的用法,还是先把函数签名放在这里: QString QFileDialog::getOpenFileName ( ...
- Laravel5 控制器
Request 一.取值 1.取值 echo $request->input('name','这是默认值'); 2.取得所有值 $array=$request->all(); 3.判断值是 ...
- NOIP2017SummerTraining0713
个人感受:这套题是真的难,以至于,拿了130分就第三了(说来羞耻,真的不想---) 问题 A: 乐曲创作 时间限制: 1 Sec 内存限制: 256 MB提交: 370 解决: 58[提交][状态 ...
- 【转】DSCP 与IP 优先级IP优先级
在IPv4的报文头中,TOS字段是1字节,如下图所示.根据RFC1122的定义,IP优先级(IPPrecedence)使用最高3比特(第0-2比特).+++++++++++++++++++++++++ ...