JavaScript之生成器_动力节点Java学院整理

2024-11-30 23:55:38

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返回多次。

大多数同学立刻就晕了，generator就是能够返回多次的“函数”？返回多次有啥用？

还是举个栗子吧。

我们以一个著名的斐波那契数列为例，它由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) {
  t = a + b;
  a = b;
  b = t;
  arr.push(t);
 }
 return arr;
}

// 测试:
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

函数只能返回一次，所以必须返回一个Array。但是，如果换成generator，就可以一次返回一个数，不断返回多次。用generator改写如下：

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

直接调用试试：

代码如下:

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: 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(5)) {
 console.log(x); // 依次输出0, 1, 1, 2, 3
}

generator和普通函数相比，有什么用？

因为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;
  }
 }
};

用对象的属性来保存状态，相当繁琐。

generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。这个好处要等到后面学了AJAX以后才能体会到。

没有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的美好时代，用AJAX时可以这么写：

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);
}

看上去是同步的代码，实际执行是异步的。

练习

要生成一个自增的ID，可以编写一个next_id()函数

JavaScript实现的微信二维码图片生成器的示例

jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. QRCode.js QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5的 Canvas,低版本IE使用table元素绘制),而且QRCode.js没有任何依赖.只需要引用一个JS. 此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb.因为它是直
js之弹出式窗口代码生成器

弹出式窗口代码生成器要完成此效果把如下代码加入到区域中 -1){ space=txt.indexOf(wrd); txt=txt.substring(0,space)+smut+txt.substring((space+wrdl),txt.length);} smut=">"; replacewords="> "; space=replacewords.indexOf(" "); wrd=replacewords.substring
JavaScript中的迭代器和生成器详解

处理集合里的每一项是一个非常普通的操作,JavaScript提供了许多方法来迭代一个集合,从简单的for和for each循环到 map(),filter() 和 array comprehensions(数组推导式).在JavaScript 1.7中,迭代器和生成器在JavaScript核心语法中带来了新的迭代机制,而且还提供了定制 for-in 和 for each 循环行为的机制. 迭代器迭代器是一个每次访问集合序列中一个元素的对象,并跟踪该序列中迭代的当前位置.在JavaScript中
javascript实现的鼠标链接提示效果生成器代码

链接注释演示源代码效果演示"+form.body.value+""; txt=""+form.a.value+""+form.b.value+""+form.c.value+""; txt+=""+form.d.value+""+form.e.value+""+form.f.value+""; tx
EditPlus注册码生成器(js代码实现)

今天同事惊奇的告诉我,说找到个在线的EditPlus注册码生成器,我赶紧去看了看,还真是,在这里. exe的注册机病毒太多,纯js的在线注册机可就放心了. 作者是从别人的注册机反汇编然后找出算法的,更令我惊奇的是,这作者Demon竟然是搞法律的,才刚拿到法律职业资格证书,佩服. 主要的一个js函数是这样的: 复制代码代码如下: function generate_editplus_regcode(username){ var list = [0,49345,49537,320,49921,96
JS简单编号生成器实现方法(附demo源码下载)

本文实例讲述了JS简单编号生成器实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>编号生成器</title> </head> <body&g
JavaScript之生成器_动力节点Java学院整理

generator(生成器)是ES6标准引入的新的数据类型.一个generator看上去像一个函数,但可以返回多次. 我们先复习函数的概念.一个函数是一段完整的代码,调用一个函数就是传入参数,然后返回结果: function foo(x) { return x + x; } var r = foo(1); // 调用foo函数函数在执行过程中,如果没有遇到return语句(函数末尾如果没有return,就是隐含的return undefined;),控制权无法交回被调用的代码. generat
JavaScript操作表单_动力节点Java学院整理

用JavaScript操作表单和操作DOM是类似的,因为表单本身也是DOM树. 不过表单的输入框.下拉框等可以接收用户输入,所以用JavaScript来操作表单,可以获得用户输入的内容,或者对一个输入框设置新的内容. HTML表单的输入控件主要有以下几种: 文本框,对应的<input type="text">,用于输入文本: 口令框,对应的<input type="password">,用于输入口令: 单选框,对应的<input
JavaScript原型继承_动力节点Java学院整理

在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型. 但是办法还是有的.我们先回顾Student构造函数: function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototyp
JavaScript之面向对象_动力节点Java学院整理

JavaScript的所有数据都可以看成对象,那是不是我们已经在使用面向对象编程了呢? 当然不是.如果我们只使用Number.Array.string以及基本的{...}定义的对象,还无法发挥出面向对象编程的威力. JavaScript的面向对象编程和大多数其他语言如Java.C#的面向对象编程都不太一样.如果你熟悉Java或C#,很好,你一定明白面向对象的两个基本概念: 1.类:类是对象的类型模板,例如,定义Student类来表示学生,类本身是一种类型,Student表示学生类型,但不表示任何
JavaScript基本语法_动力节点Java学院整理

语法 JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{...}.但是,JavaScript并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;. 注意:让JavaScript引擎自动加分号在某些情况下会改变程序的语义,导致运行结果与期望不一致.在本教程中,我们不会省略;,所有语句都会添加;. 例如,下面的一行代码就是一个完整的赋值语句: var x = 1; 下面的一行代码是一个字符串,但仍然可以视为一个完整的语句
JavaScript变量作用域_动力节点Java学院整理

在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量: 'use strict'; function foo() { var x = 1; x = x + 1; } x = x + 2; // ReferenceError! 无法在函数体外引用变量x 如果两个不同的函数各自申明了同一个变量,那么该变量只在各自的函数体内起作用.换句话说,不同函数内部的同名变量互相独立,互不影响: 'use stric
JavaScript条件判断_动力节点Java学院整理

JavaScript使用if () { ... } else { ... }来进行条件判断.例如,根据年龄显示不同内容,可以用if语句实现如下: var age = 20; if (age >= 18) { // 如果age >= 18为true,则执行if语句块 alert('adult'); } else { // 否则执行else语句块 alert('teenager'); } 其中else语句是可选的.如果语句块只包含一条语句,那么可以省略{}: var age = 20; if (a
JavaScript箭头函数_动力节点Java学院整理

ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arrow Function 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句
JavaScript操作文件_动力节点Java学院整理

在HTML表单中,可以上传文件的唯一控件就是<input type="file">. 注意:当一个表单包含<input type="file">时,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才能正确编码并以multipart/form-data格式发送表单的数据. 出于安全考虑,浏览器只允许用户点击<input type="file">来选择本地
JavaScript定义函数_动力节点Java学院整理

在JavaScript中,定义函数的方式如下: function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述abs()函数的定义如下: function指出这是一个函数定义: abs是函数的名称: (x)括号内列出函数的参数,多个参数以,分隔: { ... }之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句. 请注意,函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回.因此

JavaScript之生成器_动力节点Java学院整理

相关推荐

随机推荐