Es6系列之generator基础篇

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_34204722

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量90

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/53399

本文介绍了ES6中的Generator特性，详细解释了如何使用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}