Javascript ES6 Iterator 迭代器探索

JavaScript原有的表示“集合”的数据结构,有数组Array和对象Object,ES6新添了setMap,这样就有了四种数据集合。可以组合使用,定义自己的数据结构,比如数组的成员是MapMap的成员是对象,这样就需要一个统一的接口机制,来处理所有不同的数据结构。

迭代器就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只需要部署Iterator接口,就可以完成遍历操作(依次处理改数据结构的所有成员)。

Iterator的作用有三个:

  • 为各种数据结构提供一个统一的、简便的访问接口。
  • 使数据结构的成员能够按照某种次序排列。
  • 为遍历指令for...of循环服务。

Iterator的遍历过程:

  1. 创建一个指针对象,指向当前数据结构的起始位置。(也就是说,遍历器对象本身就是一个指针对象)
  2. 第一次调用指针对象的next方法,可以将执政指向数据结构的第一个成员。
  3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。
  4. 不断调用执政对象的next方法,直到他指向数据结构的结束位置。

每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含valuedone两个属性的对象。其中,value属性是当前成员的值,don属性是一个布尔值,表示遍历是否结束。

尝试来模拟下next返回值的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function makeIterator(array) {
let nextIndex = 0;
return {
next: function() {
return nextIndex < array.length ?
{value: array[nextIndex++]} :
{done: true};
}
}
}
const it = makeIterator([1, 2, 3]);
console.log(it.next()); // value: 1
console.log(it.next()); // value: 2
console.log(it.next()); // value: 3
console.log(it.next()); // done: true

默认Iterator接口

Iterator接口的目的,就是为所有数据结构,提供一种统一的访问机制:for...of。使用for...of循环遍历某种数据结构时,该循环会自动去寻找Iterator接口。一种数据结构只要部署了Iterator接口,那么这种数据结构就是“可遍历的”(Iterable)

ES6规定,默认的Iterator接口部署在数据结构的Symbol.iterator属性里。或者说,一个数据结构具有了Symbol.iterator属性,那么就可以认为是“可遍历的”。Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。属性名Symbol.iterator是一个表达式,返回Symbol对象的iterator属性。这是一个预定义好的、类型为Symbol的特殊值,所以要放在方括号内。

1
2
3
4
5
6
7
8
9
10
11
12
const obj = {
[Symbol.iterator]: function() {
return {
next: function() {
return {
value: 1,
done: true,
}
}
}
}
}

上面obj对象是可遍历的,因为具有Symbol.iterator属性。执行这个属性,会返回一个遍历器对象:

1
const o = obj[Symbol.iterator]();

每次调用next方法,都会返回一个代表当前成员的信息对象:

1
o.next(); // {value: 1, done: true}

ES6的有些数据结构原生具备Iterator接口,即不用任何处理,就可以被for...of循环遍历。原因在于这些数据结构原生部署了Symbol.iterator属性。原生具备Iterator接口的数据结构如下:

  • Array
  • Map
  • Set
  • String
  • TypedArray (描述一个底层的二进制数据缓存区的内存区域)
  • 函数的arguments对象
  • NodeList对象(节点的集合,是由Node.childNodesdocument.querySelectorAll返回的

我们可以手动调用数组的Symbol.iterator属性:

1
2
3
4
5
const arr = ['a', 'b', 'c'];
const iter = arr[Symbol.iterator]();
console.log(iter.next()); // { value: 'a', done: false }
console.log(iter.next()); // { value: 'b', done: false }
console.log(iter.next()); // { value: 'c', done: false }

变量arr是一个数组,原生具有迭代器接口,所以直接调用Symbol.iterator这个属性,就可以得到遍历器对象。

对于原生部署Iterator接口的数据结构,不需要自己写遍历器函数,for...of循环会自动遍历他们。其他数据结构的Iterator,都需要自己在Symbol.iterator属性上面部署,这样才能被for...of循环遍历。

使用迭代器接口实现一个范围函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class RangeIterator {
constructor(start, stop) {
this.value = start;
this.stop = stop;
}

[Symbol.iterator]() { return this;}

next() {
let value = this.value;
if (value < this.stop) {
this.value ++;
return {done: false, value: value};
}
return {done: true};
}
}
function range(start, stop) {
return new RangeIterator(start, stop);
}
for (const value of range(0, 3)) {
console.log(value);
}
// 依次输出:0,1, 2


了解了迭代器接口(Iterator)以及为何可以使用for...of来遍历数组。

参考文章:http://es6.ruanyifeng.com/#docs/iterator