在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意!

如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/学习。


generator(生成器)是ES6标准引入的新的数据类型。一个generator看上去像一个函数,但可以返回多次。

我们先看一下函数的概念:

一个函数是一段完整的代码,调用一个函数就是传入参数,然后返回结果。

function foo(x) {
return x + x;
} var r = foo(1); // 调用foo函数

在函数执行过程中,如果没有遇到 return 语句,控制权无法交回被调用的代码。(函数末尾如果没有return,就是隐含的return undefined;

generator定义

function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}

generator与函数的区别

generator由 function* 定义(注意多出的*号),并且,除了 return 语句,还可以用 yield 返回多次。

举个例子就容易理解了:

著名的斐波拉切数列,它是由0,1开头:

0 1 1 2 3 5 8 13 21 34 ...

要编写一个产生斐波那契数列的函数,可以这么写:

function fib(max) {
var
t,
a = 0,
b = 1,
arr = [0, 1];
while (arr.length < max) {
[a, b] = [b, a + b];
arr.push(b);
}
return arr;
} // 测试:
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

函数只能返回一次,所以必须返回一个Array

但是,如果换成generator,就可以一次返回一个数,不断返回多次。用generator改写如下:

'use strict'
function* fib(max) {
var
t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}

直接调用:

fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}

我们发现,直接调用一个generator和调用函数不一样, fib(5) 仅仅是创建了一个generator对象,还没有去执行它。

调用generator对象有两个方法:

一是不断地调用generator对象的 next() 方法:

var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}

next() 方法会执行generator的代码,然后,每次遇到 yield x; 就返回一个对象 {value: x, done: true/false} ,然后“暂停”。返回的 value 就是 yield 的返回值, done 表示这个generator是否已经执行结束了。如果 done 为 true ,则 value 就是 return 的返回值。

当执行到 done 为 true 时,这个generator对象就已经全部执行完毕,不要再继续调用 next() 了。

二是直接用 for......of 循环迭代generator对象,这种方式不需要我们自己加判断 done :

for (var x of fib(10)) {
console.log(x); // 依次输出0, 1, 1, 2, 3, ...
}

generator优点

1.正是由于generator在执行过程中能多次返回,所以它看上去像一个可以记住执行状态的函数,利用这一点,可以通过写一个generator来实现需要用面向对象才能实现的功能。

比如,用一个对象来保存状态,我们一般是用对象的属性来保存。这样很繁琐:

var fib = {
a: 0,
b: 1,
n: 0,
max: 5,
next: function () {
var
r = this.a,
t = this.a + this.b;
this.a = this.b;
this.b = t;
if (this.n < this.max) {
this.n ++;
return r;
} else {
return undefined;
}
}
};

2.generator还有另一个巨大的好处,就是把异步回调代码变成“同步”代码。

没有generator时,用AJAX时需要这么写代码:

ajax('http://url-1', data1, function (err, result) {
if (err) {
return handle(err);
}
ajax('http://url-2', data2, function (err, result) {
if (err) {
return handle(err);
}
ajax('http://url-3', data3, function (err, result) {
if (err) {
return handle(err);
}
return success(result);
});
});
});

回调越多,代码越难看。

通过使用generator时,可以这么写:

try {
r1 = yield ajax('http://url-1', data1);
r2 = yield ajax('http://url-2', data2);
r3 = yield ajax('http://url-3', data3);
success(r3);
}
catch (err) {
handle(err);
}

看上去是同步的代码,实际上是异步的代码。

JavaScript学习笔记(十三)——生成器(generator)的更多相关文章

  1. Python学习笔记014——生成器Generator

    1 生成器定义 在Python中,一边循环一边计算的机制,称之为生成器(generator). 生成器是一个迭代器. 含有yield语句的函数是生成器函数,该函数被调用时返回一个生成器对象(yield ...

  2. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

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

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  4. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

  5. python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息,抓取政府网新闻内容

    python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI,采用Python语言编写 ...

  6. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  7. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  9. java之jvm学习笔记十三(jvm基本结构)

    java之jvm学习笔记十三(jvm基本结构) 这一节,主要来学习jvm的基本结构,也就是概述.说是概述,内容很多,而且概念量也很大,不过关于概念方面,你不用担心,我完全有信心,让概念在你的脑子里变成 ...

  10. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. 在SQL Server中实现关系模型的阶梯到级别3的t -SQL DML

    在SQL Server中实现关系模型的阶梯到级别3的t -SQL DML 格雷戈里·拉森(Gregory Larsen),2017/08/02(第一次出版:2011 /11/09) 原文链接:http ...

  2. eval函数的用法

    可以把list,tuple,dict和string相互转化. ################################################# 字符串转换成列表 >>&g ...

  3. 61、web框架

    每个编程语言都有它自己的框架,它是我们做项目总重要的一部分.python最重要的框架为django,到底什么是框架,今天先来了解了解 一.http协议 1.HTTP简介 HTTP协议是Hyper Te ...

  4. 深入Javascript之this

    前言 近期准备好好的读一读<你不知道的JavaScript(上卷)>这本书,俗话说的好,好记性不如烂笔头,读到this这章感觉是时候需要一些笔记了.文中如有错误之处,欢迎指出. 什么是th ...

  5. 关于JavaScript日期类型处理的总结

    在任何一门开发语言中,对日期时间类型的处理,必不可少也非常重要,长期以来对于JS的日期类型处理较为苍白.在这里做一个浅显的总结. Date 对象用于处理日期和时间.Date 对象用于处理日期和时间.D ...

  6. 用node.js实现ORM的一种思路

    ORM是O和R的映射.O代表面向对象,R代表关系型数据库.二者有相似之处同时也各有特色.就是因为这种即是又非的情况,才需要做映射的. 理想情况是,根据关系型数据库(含业务需求)的特点来设计数据库.同时 ...

  7. (转)UML类图与类的关系详解

    转载自:http://www.uml.org.cn/oobject/201104212.asp 在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Rea ...

  8. [JAVA第二课] java命名规则

    Java良好的命名规则以及代码风格可以看出来一个程序员的功底,好多公司也会注重这方面,他们招聘员工在有些时候往往就是根据一个人的代码风格来招人,所以下面就就我知道的代码风格作简要的说明一下.Java命 ...

  9. 【ASP.NET MVC 学习笔记】- 17 Model验证

    本文参考:http://www.cnblogs.com/willick/p/3434483.html 1.Model验证用于在实际项目中对用户提交的表单的信息进行验证,MVC对其提供了很好的支持. 2 ...

  10. 用 Smali 手写一个可运行的 HelloWorld!!!

    一.前言 Android 的 App 实际上并不是运行在 Java 虚拟机中,而是运行在 Dalvik 虚拟机中.Dalvik 虚拟机对 Java 虚拟机做了一些额外的优化,让它更适用于移动设备.而 ...