一、什么是生成器函数?

生成器函数是ES6的新特性之一,它是一个在执行时能中途暂时退出,后面重新调用又能重新进入继续执行的一种函数。

并且在函数内定义的变量的所有状态不受中途退出的影响。

二、语法

声明方式:

function* 函数名([参数1[, 参数2[, ... 参数n]]]) { JS语句 }

调用说明:

1) 调用生成器对象时会返回一个生成器的迭代器

2) 该迭代器中有一个next()方法,它返回一个包含value和done的对象

3) 每次调用next()方法遇到yied表达式位置暂停执行

4) value表示yied表达式的返回值,done表示该生成器最后一个值是否已经产生

5)如果给next()方法传递参数, 参数的值会代替yied表达式的返回值

6)  如果在生成器中调用return,生成器将提前完成

三、示例

1、定义一个自增生成器函数,每次next()调用返回自增的值

输出如下:

>1  false
>2 false
>3 false
>4 false //想想为什么是false?
>undefined true

我们做了什么事:

1)  声明一个生成器函数increment(n),每次判断小于n时自增

2) 每次自增用yield表达式,返回表达式的值,然后自增(因为是后缀++)

function* increment(n){
var index = 1;
while(index<n)
yield index++;
}

3) 调用生成器函数,返回一个迭代器对象,赋给变量it

var it = increment(5);

4)  for循环遍历

//为什么要多声明一个temp变量?
for(let i = 0; i<5; i++)
{
let temp = it.next();
console.log(temp.value);
console.log(temp.done);
}

直接使用it.next()

for(let i = 0; i<5; i++)
{
console.log(it.next().value);
console.log(it.next().done);
} //输出为:1, false, 3, false, undefined, true, undefined, true, undefined, true

2、给next()传递参数

function* increment(){
let index = 1;
console.log(yield index++);
console.log(yield index++);
console.log(yield index++);
} var it = increment(); it.next();
it.next(3);
it.next(9);

输出为:3,9

3、显式返回

function* increment(){
let index = 1;
yield index++;
return "complete";
yield index++;
yield index++;
} var it = increment(); console.log(it.next().value); { value: 1, done: false }
console.log(it.next().value); { value: "complete", done: true }
console.log(it.next().value); { value: undefined, done: true }

四、补充

yield*

语法:

yield* [[表达式]]

说明:

yield* expression 用于委托给另一个generator或可迭代对象。

栗子:

function* increment_slowly(){
let index = 1.1;
yield index = 1.2;
yield index += 0.11;
} function* increment(){
let index = 1;
yield index++;
yield* increment_slowly();
yield index++;
} var it = increment(); console.log(it.next().value); // >1
console.log(it.next().value); // >1.2
console.log(it.next().value); // >1.31
console.log(it.next().value); // >2

题外话:这个排版有点丑,打算去看看博客园怎么排版,下一篇文章做做排版,更加清晰地显示。

ES6新特性之生成器函数 (generator function): function*的更多相关文章

  1. 轻松学会ES6新特性之生成器

    生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...

  2. ES6新特性:Javascript中Generator(生成器)

    ES6的很多特性都跟Generator扯上关系,而且实际用处比较广, 包含了任何需要异步的模块, 比如ajax, filesystem, 或者数组对象遍历等都可以用到: Generator的使用: G ...

  3. ES6新特性之箭头函数与function的区别

    写法不同 // function的写法 function fn(a, b){ return a+b; } // 箭头函数的写法 let foo = (a, b) =>{ return a + b ...

  4. ES6新特性3:函数的扩展

    本文摘自ECMAScript6入门,转载请注明出处. 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') ...

  5. es6新特性之箭头函数

    <script> { // es3,es5 var evens = [1, 2, 3, 4, 5]; var odds = evens.map(function (v) { return ...

  6. ES6新特性三: Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

  7. ES6生成器函数generator

    ES6生成器函数generator generator是ES6新增的一个特殊函数,通过 function* 声明,函数体内通过 yield 来指明函数的暂停点,该函数返回一个迭代器,并且函数执行到 y ...

  8. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  9. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

随机推荐

  1. 【Android Developers Training】 72. 缩放一个视图

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  2. eclipse在多modules项目结构下避免模块间依赖引用的场景

    这个在单一classLoader时,不会有问题.如果多classloader下会有问题. 假设工程有两个模块,module2 依赖module1 当我们执行mvc eclipse:eclipse后,然 ...

  3. call, apply,bind 方法解析

    call(), apply(),bind() 三者皆为Function的方法 call(),apply()的作用是调用方法,并改变函数运行时的context(作用上下文) bind() 的作用是引用方 ...

  4. Linux 重启和关机命令

    shutdown -r  05:30   在凌晨五点30分关机     shutdown -r  05:30 &     后台执行     shutdown -c    取消前一个关机命令   ...

  5. [问题解决]linux sudo xxx:command not found

    题外话 软件的安装在linux下主要分为两种.一种是通过包管理器例如ubuntu的apt-get xxx,另一种是自己手动安装.通过包管理器安装的,基本开箱即用,无需配置,但是存在一个问题,有时候无法 ...

  6. Struts2从头到脚--学习笔记(自认为比较重要的)

    一. Struts2框架介绍 Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与 ...

  7. hdu_5868:Different Circle Permutation

    似乎是比较基础的一道用到polya定理的题,为了这道题扣了半天组合数学和数论. 等价的题意:可以当成是给正n边形的顶点染色,旋转同构,两种颜色,假设是红蓝,相邻顶点不能同时为蓝. 大概思路:在不考虑旋 ...

  8. [编辑器]vim常用操作

    我是ide的用户,对于vim一只停留在:打开.看.写.关闭基本操作,因为现在更多的接触linux服务器,所以为了提高 效率,用好vim是必备技能!下面罗列一些vim的常用操作,用做备忘(不断更新): ...

  9. vue怎么样创建组件呢??

    我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢?怎么用组件呢?怎么样创建自己的组件呢? 前面两个问题就不说了,这里来说说,后面的两个问题: 1)创建自己的组件 通过vue.extend( ...

  10. iOS App内存优化之 解决UIImagePickerController的图片对象占用RAM过高问题

    这个坑会在特定的情况下特别明显: 类似朋友圈的添加多张本地选择\拍照 的图片 并在界面上做一个预览功能 由于没有特别的相机\相册需求,则直接使用系统自带的UIImagePickerController ...