1. 由来及意义
在编程中,集合是个很重要的概念,js原有的集合主要是数组,对象,es6又添加了set,map。这样就有了四种集合,用户还可以根据需要组合适合的数据结构。
有了4中集合之后,就需要一种统一的机制来遍历,访问这些数据结构。
迭代器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
2. 具体实现
Iterator 的遍历过程是这样的。
- 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
- 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。
- 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。
- 不断调用指针对象的next方法,直到它指向数据结构的结束位置。
每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含value和done两个属性的对象。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。
下面是一个模拟next方法返回值的例子。
function makeIterator(array) {
let nextIndex = 0;
return {
next: function() {
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{value: undefined, done: true};
}
};
}
let it = makeIterator(['a', 'b']);
it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }
3. 实现依据
Iterator(迭代器)实际上是对迭代协议的一种具体实现。
4. 默认 Iterator 接口
Iterator 接口的目的,就是为所有数据结构,提供一种统一的访问机制,即for...of
循环。那么就需要实现一个统一的,默认的Iterator 接口: Symbol.iterator
。
可以这样理解,一个对象只要具有Symbol.iterator属性
,就可以认为是一个可迭代对象。
Symbol.iterator属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个迭代器对象。至于属性名Symbol.iterator,它是一个表达式,返回Symbol对象的iterator属性,这是一个预定义好的、类型为 Symbol 的特殊值,所以要放在方括号
内。
const obj = {
[Symbol.iterator] : function () {
return {
next: function () {
return {
value: 1,
done: true
};
}
};
}
};
上面代码中,对象obj是可迭代的(iterable)
,因为具有Symbol.iterator属性。执行这个属性,会返回一个迭代器对象
。该对象的根本特征就是具有next
方法。每次调用next方法,都会返回一个代表当前成员的信息对象,具有value和done
两个属性。
ES6 的有些数据结构原生具备 Iterator 接口(比如数组),即不用任何处理,就可以被for…of循环遍历。原因在于,这些数据结构原生部署了Symbol.iterator属性
(详见下文),另外一些数据结构没有(比如对象)。凡是部署了Symbol.iterator属性的数据结构,就称为部署了迭代器接口。调用这个接口,就会返回一个迭代器对象。
原生具备 Iterator 接口的数据结构如下。
- Array
- Map
- Set
- String
- TypedArray
- 函数的 arguments 对象
- NodeList 对象
下面的例子是数组的Symbol.iterator属性。
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
5. 被遗忘的对象
对于原生部署 Iterator 接口的数据结构,不用自己写遍历器生成函数,for…of循环会自动遍历它们。除此之外,其他数据结构(主要是对象)的 Iterator 接口,都需要自己在Symbol.iterator属性上面部署,这样才会被for…of循环遍历。
对象(Object)之所以没有默认部署 Iterator 接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定
。
原生部署Iterator接口的数据结构,其遍历时的顺序和添加时的顺序是一致的,但是object并不是如此,Object.keys()、Object.values()、Object.entries()获取的数组在某些情况下并不是按照属性添加的。下面是一个object iterator接口的自定义实现:
function* iterate_object(o) {
var keys = Object.keys(o);
for (var i=0; i<keys.length; i++) {
yield [keys[i], o[keys[i]]];
}
}
let obj = {
100: '100',
1: '1',
b: 'b',
50: '50',
9: '9',
8: '8',
3: '3',
5: '5',
a: 'a',
c: 'c'
};
for (var [key, val] of iterate_object(obj)) {
console.log(key);
}
// 1 3 5 8 9 50 100 b a c
可以发现遍历的顺序并不是属性添加时的顺序,发生这种情况是因为对象中的 常规属性
和 排序属性
。
在ECMAScript规范中定义了 「数字属性应该按照索引值⼤⼩升序排列,字符串属性根据创建时的顺序升序排列。」在这⾥我们把对象中的数字属性称为「排序属性
」,在V8中被称为 elements,字符串属性就被称为「常规属性
」, 在V8中被称为 properties。在V8内部,为了有效地提升存储和访问这两种属性的性能,分别使⽤了两个线性数据结构来分别保存排序属性和常规属性
。
这就是为什么对象没有默认的Iterator接口。
6. 调用 Iterator 接口的场合
6.1 解构赋值
对数组和 Set 结构进行解构赋值时,会默认调用Symbol.iterator方法。对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,并不是调用Symbol.iterator方法,这两者有本质区别。
let set = new Set().add('a').add('b').add('c');
let [x,y] = set;
// x='a'; y='b'
let [first, ...rest] = set;
// first='a'; rest=['b','c'];
6.2 扩展运算符
扩展运算符(…)也会调用默认的 Iterator 接口。
// 例一
var str = 'hello';
[...str] // ['h','e','l','l','o']
// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']
6.3 yield*
yield* 后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }
6.4 字符串的 Iterator 接口
字符串是一个类似数组的对象,也原生具有 Iterator 接口。
var someString = "hi";
typeof someString[Symbol.iterator]
// "function"
var iterator = someString[Symbol.iterator]();
iterator.next() // { value: "h", done: false }
iterator.next() // { value: "i", done: false }
iterator.next() // { value: undefined, done: true }
6.5 其他场合
由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口。下面是一些例子。
- for…of
- Array.from()
- Map(), Set(), WeakMap(), WeakSet()(比如new Map([[‘a’,1],[‘b’,2]]))
- Promise.all()
- Promise.race()
7. Iterator 接口与 Generator 函数
Symbol.iterator()方法的最简单实现是使用Generator 函数
let myIterable = {
[Symbol.iterator]: function* () {
yield 1;
yield 2;
yield 3;
}
};
[...myIterable] // [1, 2, 3]
// 或者采用下面的简洁写法
let obj = {
* [Symbol.iterator]() {
yield 'hello';
yield 'world';
}
};
for (let x of obj) {
console.log(x);
}
// "hello"
// "world"
8. 迭代器对象的 return(),throw()
迭代器对象除了具有next()方法,还可以具有return()方法和throw()方法。如果你自己写迭代器对象生成函数,那么next()方法是必须部署的,return()方法和throw()方法是否部署是可选的。
return()方法的使用场合是,如果for…of循环提前退出(通常是因为出错,或者有break语句),就会调用return()方法。如果一个对象在完成遍历前,需要清理或释放资源,就可以部署return()方法。
function readLinesSync(file) {
return {
[Symbol.iterator]() {
return {
next() {
return { done: false };
},
return() {
file.close();
return { done: true };
}
};
},
};
}