ES6

ES6学习笔记12:迭代器和生成器

Posted by mieruko on 2016-12-21

前言

ES6中，引入了迭代器和生成器的概念。
久违了的名字，上次见到还是在《Python核心编程》里呐！
所以说JS越来越正统语言了呀～～～

迭代器(Iterators)碎碎念

迭代器就是可以迭代输出值的一个东西。
迭代器每一次迭代会返回一个对象，这个对象长这样子： 

1
{value: xx, done: true/false}

value表示返回的值， done表示还有没有可以迭代的东西。
如果还可以迭代，那么就是true,否则是false。

然后迭代器里面还有一个关键觉得就是next()方法，它是用来进行下一次迭代用的。

具备以上要素的东西，就是迭代器。

手工创造迭代器

手写一个迭代器来看！ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
'use strict'

function chef(foods) {
  let i = 0;
  return {
    next() {
      let done = (i >= foods.length);
      let value = !done? foods[i++] : undefined;

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

let wanzi = chef(["🍅", "🍹"]);
console.log(wanzi.next());
console.log(wanzi.next());
console.log(wanzi.next());

顺序输出的分别是

1
2
3
{value: 🍅, done: false}
{value: 🍹, done: false}
{value: undefined, done:true}

这上面，wanzi就是一个迭代器。

生成器(generators)碎碎念

楼上那段代码里面，生成迭代器的那个构造函数，就叫做生成器。
手动写一个生成器，是不是也够麻烦了。
我们可以使用另一种方法简单地做出一个生成器: 

1
2
3
4
5
6
7
8
9
10
11
12
'use strict'

function* chef() {
  yield "🍅";
  yield "🍹";
}

let wanzi = chef();

console.log(wanzi.next());
console.log(wanzi.next());
console.log(wanzi.next());

楼上这段代码，输出的东西和上面我们手写输出的东西一毛一样！！

让chef生成器进化一下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
'use strict'

let chef = function* (foods) {
  for(var i = 0; i < foods.length; i++) {
    yield foods[i];
  }
}

let wanzi = chef(["🍅", "🍹"]);

console.log(wanzi.next());
console.log(wanzi.next());
console.log(wanzi.next());

楼上这段代码，和楼上的楼上，楼上的楼上的楼上实现的效果一毛一样。
因此我们看到，这个生成器其实还是函数，仍然可以使用函数定义表达式，可以传参。

结语

上一次接触到生成器和迭代器，还是在学python的时候（15年的暑假）。
时间过的真快啊。
JS一直在进步，自己每一天也要努力进步啊～～

FEATURED TAGS
ES6