Es6系列之generator基础篇

简介:

Ecmascript 6简称es6,是javascript下一代标准,还处在开发阶段,估计2014年底发布,有关更多浏览器对es6的支持情况,点击这里

今天说说es6里新增的Generators.

下面是Generator系列的相关文章链接


Generator

generator简单的说就是提供了一种控制函数内部执行状态的功能,以往的普通函数只要开始执行则就不能中止,而generator函数不一样,提供了一种可以中止函数的手段,下面说说它的一般用法.

  • function* 这是定义generator函数的语法
  • yield 定义在函数内部实现不同的状态

看下面一个简单的例子

function* build(){
    yield 'step1';
    yield 'step2';
    yield 'step3';
    return 'done';
}

var generator = build();
generator.next();  // => {value: 'step1', done: false}
generator.next();  // => {value: 'step2', done: false}
generator.next();  // => {value: 'step3', done: false}
generator.next();  // => {value: 'done', done: true}

首先我们执行generator函数来生成一个待遍历的函数,然后不断调用next方法来执行,它将返回一个对象包含value, done两个属性,前者是函数体内yield后面的值,后者代表函数遍历是否完成.

这里重点说下yield关键字

每次调用next方法时函数体内都会停留在碰到的下一个yield关键字那,并把关键字后面的内容作为返回值,下一次再调用next方法重复上面的操作直到最后没有遇到yield为止.假如函数体内不包含任何一个yield,则生成的遍历函数只是一个延迟执行的函数而以,像下面这样的

function* delay(){
    return 'hello feenan';
}

var iterator = delay();

iterator.next(); // => {value: 'hello feenan', done: true}
iterator.next(); // => {value: undefined, done: true}

另外yield表达式还可以返回值用来在下一个next里调用,返回值只能通过next函数来传递,不过第一次调用next时传递参数无效,因为在它之前不存在yield,看下面的例子

function * build(){
    yield 'step1';
    var step = yield 'step2';
    if(step == 3){
        yield 'step3';
    }else{
        yield 'step4';
    }
    yield 'step5';
    return '执行完毕!';
}

var generator = build();
console.log(generator.next());  // => {value: 'step1', done: false}
console.log(generator.next());  // => {value: 'step2', done: false}
console.log(generator.next(3));  // => {value: 'step3', done: false}
console.log(generator.next());  // => {value: 'step5', done: false}
console.log(generator.next());  // => {value: '执行完毕', done: true}

注意: next传递的参数值是传递给上一次yield表达式,所以上面例子里第三次调用next传递参数其实是把值传递给第二个yield表达式

generator 将会用在什么地方呢?

上面说了这么多generator的用法,那么它可以用在什么地方呢

  • 假如一个动作可以分成多步进行,并且想控制每步的时间的时候可以用generator函数

总结

今天只是简单的介绍generator的用法,更多的问题其实都没有说

  • 假如yield后面是异步函数怎么办?
  • 怎么处理yield的异常情况

这个以后会另起一篇文章你介绍,请保持关注.

本文参考这篇文章

The Basics Of ES6 Generators


目录
相关文章
|
3月前
|
前端开发
ES6之生成器(Generator)
生成器(Generator)是ES6引入的一种特殊的函数,它可以通过yield关键字来暂停函数的执行,并返回一个包含value和done属性的对象。生成器的概念、作用和原理如下所述:
32 0
|
4月前
ES6 Generator 函数
ES6 Generator 函数
|
4月前
ES6学习(九)—Generator 函数的语法
ES6学习(九)—Generator 函数的语法
|
5月前
|
JavaScript
ES6的基础用法
对js es6的用法进行简单介绍
|
8月前
es6如何使用padStart()和padEnd()方法
es6如何使用padStart()和padEnd()方法
59 0
|
10月前
|
前端开发
【ES6新特性】— Generator
【ES6新特性】— Generator
58 0
|
JavaScript 前端开发 Java
【ES6】Generator函数详解
【ES6】Generator函数详解
111 0
|
API
ES6 从入门到精通 # 16:Generator 的应用
ES6 从入门到精通 # 16:Generator 的应用
75 0
ES6 从入门到精通 # 16:Generator 的应用
ES6 从入门到精通 # 15:生成器 Generator 的用法
ES6 从入门到精通 # 15:生成器 Generator 的用法
73 0
ES6 从入门到精通 # 15:生成器 Generator 的用法