Home ES6新特性 iterators and Generators
Post
Cancel

ES6新特性 iterators and Generators

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,它是这样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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方法调用时返回的值。例如

1
2
3
4
5
6
7
8
9
10
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返回回来。

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

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

1
2
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方法中传递参数。例如这样。

1
2
3
4
5
6
7
8
9
10
11
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函数中传入任何值都是没有意义的。我们变化一下再看

1
2
3
4
5
6
7
8
9
10
11
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 来达到控制执行的目的。例如上边一个例子。

1
2
3
4
5
6
7
8
9
10
11
12
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来返回。

1
2
3
4
5
6
7
8
9
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,而是一次执行结束。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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最为实际的作用是可以控制异步函数的执行,下边我们可以简单的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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可以帮助我们写出一个比较好看的异步执行函数。

This post is licensed under CC BY 4.0 by the author.

微服务构架下的Serveless实践

图表君读书-智能时代

Comments powered by Disqus.