期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

ES6生成器 返回迭代器的函数

  生成器是一种返回迭代器的函数,通过function关键字后的星号(*)来表示,函数中会用到新的关键字yield。星号可以紧挨着function关键字,也可以在中间添加一个空格

// 生成器

function *createIterator() {

    yield 1;

    yield 2;

    yield 3;

}

// 生成器能像正规函数那样被调用,但会返回一个迭代器

let iterator = createIterator();

console.log(iterator.next().value); // 1

console.log(iterator.next().value); // 2

console.log(iterator.next().value); // 3

  在这个示例中,createlterator()前的星号表明它是一个生成器;yield关键字也是ES6的新特性,可以通过它来指定调用迭代器的next()方法时的返回值及返回顺序。生成迭代器后,连续3次调用它的next()方法返回3个不同的值,分别是1、2和3。生成器的调用过程与其他函数一样,最终返回的是创建好的迭代器

  生成器函数最有趣的部分是,每当执行完一条yield语句后函数就会自动停止执行。举个例子,在上面这段代码中,执行完语句yield 1之后,函数便不再执行其他任何语句,直到再次调用迭代器的next()方法才会继续执行yield 2语句。生成器函数的这种中止函数执行的能力有很多有趣的应用

  使用yield关键字可以返回任何值或表达式,所以可以通过生成器函数批量地给迭代器添加元素。例如,可以在循环中使用yield关键字

function *createIterator(items) {

    for (let i = 0; i < items.length; i++) {

        yield items[i];

    }

}

let iterator = createIterator([1, 2, 3]);

console.log(iterator.next()); // "{ value: 1, done: false }"

console.log(iterator.next()); // "{ value: 2, done: false }"

console.log(iterator.next()); // "{ value: 3, done: false }"

console.log(iterator.next()); // "{ value: undefined, done: true }"

// 之后的所有调用

console.log(iterator.next()); // "{ value: undefined, done: true }"

  在此示例中,给生成器函数createlterator()传入一个items数组,而在函数内部,for循环不断从数组中生成新的元素放入迭代器中,每遇到一个yield语句循环都会停止;每次调用迭代器的next()方法,循环会继续运行并执行下一条yield语句

  生成器函数是ES6中的一个重要特性,可以将其用于所有支持函数使用的地方

使用限制

  yield关键字只可在生成器内部使用,在其他地方使用会导致程序抛出错误

function *createIterator(items) {

    items.forEach(function(item) {

        // 语法错误

        yield item + 1;

    });

}

  从字面上看,yield关键字确实在createlterator()函数内部,但是它与return关键字一样,二者都不能穿透函数边界。嵌套函数中的return语句不能用作外部函数的返回语句,而此处嵌套函数中的yield语句会导致程序抛出语法错误

生成器函数表达式

  也可以通过函数表达式来创建生成器,只需在function关键字和小括号中间添加一个星号(*)即可

let createIterator = function *(items) {

    for (let i = 0; i < items.length; i++) {

        yield items[i];

    }

};

let iterator = createIterator([1, 2, 3]);

console.log(iterator.next()); // "{ value: 1, done: false }"

console.log(iterator.next()); // "{ value: 2, done: false }"

console.log(iterator.next()); // "{ value: 3, done: false }"

console.log(iterator.next()); // "{ value: undefined, done: true }"

// 之后的所有调用

console.log(iterator.next()); // "{ value: undefined, done: true }"

  在这段代码中,createlterator()是一个生成器函数表达式,而不是一个函数声明。由于函数表达式是匿名的,因此星号直接放在function关键字和小括号之间。此外,这个示例基本与前例相同,使用的也是for循环

  [注意]不能用箭头函数来创建生成器

生成器对象的方法

  由于生成器本身就是函数,因而可以将它们添加到对象中。例如,在ES5风格的对象字面量中,可以通过函数表达式来创建生成器

var o = {

    createIterator: function *(items) {

            for (let i = 0; i < items.length; i++) {

                yield items[i];

            }

        }

};

let iterator = o.createIterator([1, 2, 3]);

  也可以用ES6的函数方法的简写方式来创建生成器,只需在函数名前添加一个星号(*)

var o = {

    *createIterator(items) {

            for (let i = 0; i < items.length; i++) {

                yield items[i];

            }

        }

};

let iterator = o.createIterator([1, 2, 3]);

  这些示例使用了不同于之前的语法,但它们的功能实际上是等价的。在简写版本中,由于不使用function关键字来定义createlterator()方法,因此尽管可以在星号和方法名之间留白,但还是将星号紧贴在方法名之前

状态机

  生成器的一个常用功能是生成状态机

let state = function*(){

    while(1){

        yield 'A';

        yield 'B';

        yield 'C';

    }

}

let status = state();

console.log(status.next().value);//'A'

console.log(status.next().value);//'B'

console.log(status.next().value);//'C'

console.log(status.next().value);//'A'

console.log(status.next().value);//'B'

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册