ES6新特性 iterators and Generators

蚀窗接口
• 阅读 2104

ES6新特性 iterators and Generators

ES6中引入了许多新特性,目前大量的JavaScript项目已经使用了ES6来进行开发,那么熟悉这些新的特性是十分必要的,例如Redux-Saga中大量的使用了Iterator和generator。这篇文章总结和介绍一下ES6中的Iterator和Generator。

iterators and Generators

第一个问题什么是iterator?答案很简单, Iterator是一个object,但是含有特定的接口,它有next method可以返回一个result object,这个result object有两个属性第一个是value,代表这个迭代的值, 第二个是done,代表迭代是否结束。如果我们自己来简单实现一个Iterator,它是这样的。

function createIterator(items) {
    var i = 0;
    return {
        next : function () {

            var done = i >= (items.length)
            var value = items[i++]

            return {
                done: done,
                value: value
            }
        }
    }
}

const items = [1,2,3]
const iteratorA = createIterator(items)
iteratorA.next() // {result:1, done: false}

那么Generator又是什么?Generator 是一个函数可以产生iterator。Generator函数用function关键字后边带*来表示。在函数定义上使用yield关键字来表示next方法调用时返回的值。例如

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

iterables

上边介绍了什么是Iterator,什么是generator,下边再介绍一个概念iterable。iterable是一个有Symbol.iterator属性的object。这个symbol指向一个generator函数,这个函数返回关于这个对象的iterator。在ES6中所有的集合类对象(array, set, maps)和字符串都是iterable,并且有自己默认的iterator。当我们在使用 for-of时候实际上是利用了这些对象上的iterator,每次调用了next方法,将返回的result上的value返回回来。

let values = [1, 2, 3];
for (let num of values) { 
    console.log(num);
}

例如这段简单的代码,实际上调用了values上的iterator的next方法,将result上的value拿出来赋给num。既然是这样我们可以采用这样的方法来获得默认的iterator。

let values = [1, 2, 3];
let iterator = values[Symbol.iterator]();

在ES6中对于集合类型的Object,其上定义了一些内置的iterator,分别是;

  • entries() - 返回一个返回key-value pair的iterator

  • values() - 返回一个返回collection对应值的iterator // chrome not supported
    MDN

  • keys() - 返回一个返回collecttion对应key的iterator

以上就是iterator和generator的一些基本概念,下边我们来看一下一些高阶应用。

向iterator中传递参数

上边的例子中我们在调用iterator的next方法都是无参数调用的,但是我们同样可以向next方法中传递参数。例如这样。

function* createIterator() {
    let first = yield 1;
    let second = yield first + 2;
    yield second + 3;
}

let i= createItreator()

i.next() // {value:1 done: false}
i.next(5) // {value: 7 done: false}
i.next(3) // {value: 6 done: false}

我们看上边这个例子,在第二次调用中我们传进去了5,返回值是7,这个传进去的参数可以理解为上一次yield的返回值。注意yield本身是不返回任何值的,它只向外部产生值。如果我们查看yield在英语词典中的意思,produce or generate (a result, gain, or financial return 所以yield的值是向外产生值。所以在第一次next后 first的值依旧是undefined。但是向next中传递参数,这个参数代表我们想要上一次yield在generator函数中的值。所以在第二次next后 返回值的value就是7(5+2)了。第三例子同理。所以基于上边的原因我们向第一个next函数中传入任何值都是没有意义的。我们变化一下再看

function* createIterator() {
    yield 1;
    let first;
    let second = yield first + 2;
    yield second + 3;
}

i.next() // {value:1 done: false}
i.next(5) // {value: NaN done: false}
i.next(3) // {value: 6 done: false}

在第二个next中我们的返回是NaN, 为什么呢?这是因为first是Undefined,第一次的yield并没有给first赋值。所以在yeild中的执行顺序是每一次执行到相应的yield就完了,下次继续向下执行。

在Iterator中Throw Error

在iterator中我们可以来throw error 来达到控制执行的目的。例如上边一个例子。

function* createIterator() {
    let first = yield 1;
    let second = yield first + 2;
    yield second + 3;
}

let i= createItreator()

i.next() // {value:1 done: false}
i.next(5) // {value: 7 done: false}
i.throw(new Error('error')) // error thrown done is set to true after throw error

Generator function中的Return

同样在generator 我们可以使用 return来返回。

function* createIterator() {
    yield 1;
    return;
    yield 2;
    yield 3;
}
let iterator = createIterator();
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"

第一次next后已经结束了所以 我们第二次next后done就已经是true了。

Generator 和 Iterator的应用实例:Task Runner

我们可以使用generator和Iterator来实现一个task runner,可以让我们不用手动的next,而是一次执行结束。代码如下:

function run(taskDef) {
    let task = taskDef();
    let value = task.next()

    function step() {
        if (!value.done) {
            value = task.next(value.value)
            step()
        }
    }

    step()
}

run(function*(){
    let first = yield 1;
    let second = yield first + 3;
    yield second + 4;
})

上边就是一个例子,这样定义的run function就可以顺序执行这些generator定义的步骤。

实际上generator和Iterator最为实际的作用是可以控制异步函数的执行,下边我们可以简单的例子。

function run(taskDef) {
    let task = taskDef();
    let result = task.next()

    function step() {
        if (!result.done) {
            if (typeof result.value === "function") {
                result.value(function(err, data) {
                    if (err) {
                        console.log('err', err);
                        task.throw(err)
                        return
                    }
                    console.log('err', data);  
                    result = task.next(data);
                    step()
                    
                })
            } else {
                result = task.next(result.value)
                step()
            }
            
        }
    }

    step()
}

let fs = require("fs");

function readFile(filename) {
  return function (callback) {
    fs.readFile(filename, callback);
  };
}

run(function* () {
  let contents = yield readFile("abc.json");
  console.log(contents);
  console.log("Done");
});

首先我们定义了一个task runner run function 在其中当发现result中的value是function的时候,就执行这个function, 并且在异步函数的callback中,当没有error的时候执行下一步。

在看我们的ReadFile function,fs模块中的readFile是一个异步的函数,而在这里我们将其进行了封装成为一个新的函数。让其返回一个function给在task runner中使用。那么在我们的generator函数中,我们看上去的代码就和同步的一样了,先readfile,完成后将其输出。这样使用Iterator和generator可以帮助我们写出一个比较好看的异步执行函数。

点赞
收藏
评论区
推荐文章
Symbol卢 Symbol卢
4年前
ES11来了,不进来看看嘛
前言ES2020(ES11)是ECMAScript对应2020年的版本。这个版本不像ES6(ES2015)那样包含大量新特性。但也添加了许多有趣且有用的特性。本文以简单的代码示例来介绍ES2020新特性。这样,你可以很快理解这些新功能,而不需要多么复杂的解释,好了,废话不多说我们进入正文🔛私有变量类的主要作用之一是将我们的代码包含在可重用的
凯特林 凯特林
4年前
ES 家族新特性,闪亮登场!
前言前端学习永无止境,学习吧骚年本文集合了ES6至ES11常用到的特性,包括还在规划的ES12,只列举大概使用,详细介绍的话内容量将十分巨大.。PS:使用新特性需要使用最新版的bable就行转义新特性ES6(2015)1\.类(class)class Man   constructor(name)     this.n
Souleigh ✨ Souleigh ✨
4年前
快速入门 WePY 小程序
一、WePY介绍WePY是 _腾讯_参考了Vue等框架对原生小程序进行再次封装的框架,更贴近于MVVM架构模式,并支持ES6/7的一些新特性。二、WePY使用1、WePY的安装或更新都通过npm进行:npminstallgwepyc
Buzz69 Buzz69
4年前
ES6环境搭建及react-router学习
一、起因ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下。不过,由于现在大部分的浏览器对ES6的支持程度都不是很好。所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES7的代码转为ES5的代码。今天,就配置了一下环境
Stella981 Stella981
3年前
ECMAScript 6 新特性简介
简介ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,正式发布与2015年6月。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。今天我们将会讲解一下ES6中引入的语法新特性。ECMAScript和JavaScript的关系
Stella981 Stella981
3年前
ECMAScript 6新特性简介
简介ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,正式发布与2015年6月。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。今天我们将会讲解一下ES6中引入的语法新特性。ECMAScript和JavaScript的关系
Stella981 Stella981
3年前
ES6中的Promise和Generator详解
简介ES6中除了上篇文章讲过的语法新特性和一些新的API之外,还有两个非常重要的新特性就是Promise和Generator,今天我们将会详细讲解一下这两个新特性。Promise什么是PromisePromise是异步编程的一种解决方案,比传统的解决方案“回调函数和事件”更合理和更强大。所谓P
Wesley13 Wesley13
3年前
9个常用ES6特性归纳(一般用这些就够了)
ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ES6给我们带来很多令人意想不到的功能,在这里我们一起来学习一下9个超级实用的ES6特性。1、展开操作符
Wesley13 Wesley13
3年前
ES6新特性整理,你需要了解的ES6知识
ES6是新版本JavaScript语言的标准,上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作已经完成,14年12月份放出了正式版本。目前主流的浏览器都支持运行ES6代码,如果你的不支持,还等什么呢,换浏览器啊~潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS的风采。箭头操作符
Stella981 Stella981
3年前
JavaScript 是如何工作的:JavaScript 的内存模型
个人专栏ES6深入浅出已上线,深入ES6,通过案例学习掌握ES6中新特性一些使用技巧及原理,持续更新中,←点击可订阅。(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2Fqq449245884%2Fcategory_9606068.html