1,iterator
for...of
循环,Iterator接口主要供for...of
消费。Iterator的遍历过程是这样的。
(1)创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
(2)第一次调用指针对象的next
方法,可以将指针指向数据结构的第一个成员。
(3)第二次调用指针对象的next
方法,指针就指向数据结构的第二个成员。
(4)不断调用指针对象的next
方法,直到它指向数据结构的结束位置。
每一次调用next
方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含value
和done
两个属性的对象。其中,value
属性是当前成员的值,done
属性是一个布尔值,表示遍历是否结束。
在ES6中,有些数据结构原生具备Iterator接口(比如数组),即不用任何处理,就可以被for...of
循环遍历,有些就不行(比如对象)。原因在于,这些数据结构原生部署了Symbol.iterator
属性(详见下文),另外一些数据结构没有。凡是部署了Symbol.iterator
属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。
Iterator接口的目的,就是为所有数据结构,提供了一种统一的访问机制,即for...of
循环(详见下文)。当使用for...of
循环遍历某种数据结构时,该循环会自动去寻找Iterator接口。
ES6规定,默认的Iterator接口部署在数据结构的Symbol.iterator
属性,或者说,一个数据结构只要具有Symbol.iterator
属性,就可以认为是“可遍历的”(iterable)。Symbol.iterator
属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。至于属性名Symbol.iterator
,它是一个表达式,返回Symbol
对象的iterator
属性,这是一个预定义好的、类型为Symbol的特殊值,所以要放在方括号内。(参见Symbol一章)。
在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。
let arr = ['a','b','c'];
let iter = arr[Symbol.iterator]();
console.log(iter.next());//Object {value: "a", done: false}
console.log(iter.next());//Object {value: "b", done: false}
console.log(iter.next());//Object {value: "c", done: false}
console.log(iter.next());//Object {value: undefined, done: true}
//上面代码中,变量arr是一个数组,原生就具有遍历器接口,部署在arr的Symbol.iterator属性上面。
//所以,调用这个属性,就得到遍历器对象。
//上面提到,原生就部署Iterator接口的数据结构有三类,对于这三类数据结构,不用自己写遍历器生成函数,for...of循环会自动遍历它们。
//除此之外,其他数据结构(主要是对象)的Iterator接口,都需要自己在Symbol.iterator属性上面部署,这样才会被for...of循环遍历。
对象(Object)之所以没有默认部署Iterator接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定。本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。不过,严格地说,对象部署遍历器接口并不是很必要,因为这时对象实际上被当作Map结构使用,ES5没有Map结构,而ES6原生提供了。
一个对象如果要有可被for...of
循环调用的Iterator接口,就必须在Symbol.iterator
的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)。
class RangeIterator{
constructor(start,stop){
this.value = start;
this.stop = stop;
}
[Symbol.iterator](){
return this;
}
next(){
var value = this.value;
if(value < this.stop){
this.value++;
return{
done:false,
value:value
}
}
return{
done:true,
value:undefined
}
}
}
function range(start,stop){
return new RangeIterator(start,stop);
}
for(var value of range(0,3)){
console.log(value);//0 1 2
}
//上面代码是一个类部署Iterator接口的写法。
//Symbol.iterator属性对应一个函数,执行后返回当前对象的遍历器对象。
对于类似数组的对象(存在数值键名和length属性),部署Iterator接口,有一个简便方法,就是
Symbol.iterator
方法直接引用数组的Iterator接口。
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
//或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];
console.log([...document.getElementsByTagName('b')]);//[b, b, b, b]
下面是类似数组的对象调用数组的
Symbol.iterator
方法的例子。
注意,普通对象部署数组的let iterable = { 0:'a', 1:'b', 2:'c', length:3, [Symbol.iterator]:Array.prototype[Symbol.iterator] }; for(let item of iterable){ console.log(item); } //a //b //c
Symbol.iterator
方法,并无效果。
let iterable = { a:'a', b:'b', c:'c', length:3, [Symbol.iterator]:Array.prototype[Symbol.iterator] }; for(let item of iterable){ console.log(item);//undefined undefined undefined }
如果Symbol.iterator
方法对应的不是遍历器生成函数(即会返回一个遍历器对象),解释引擎将会报错。
var obj = {}; obj[Symbol.iterator] = ()=> 1; [...obj];// 报错
2,调用inerator接口的场合
有一些场合会默认调用Iterator接口(即Symbol.iterator
方法),除了下文会介绍的for...of
循环,还有几个别的场合。(1)解构赋值
//对数组和Set结构进行解构赋值时,会默认调用Symbol.iterator方法。 let set = new Set(['a','b','c']); let [x,y] = set; // x='a' y='b' let [n1,...n2] = set; //n1='a' n2=['b','c']
(2)扩展运算符//扩展运算符(...)也会调用默认的iterator接口。 var str ='andy'; console.log([...str]);//["a", "n", "d", "y"] let arr = ['b','c']; console.log(['a',...arr,'d']);//["a", "b", "c", "d"] //上面代码的扩展运算符内部就调用Iterator接口。
实际上,这提供了一种简便机制,可以将任何部署了Iterator接口的数据结构,转为数组。也就是说,只要某个数据结构部署了Iterator接口,就可以对它使用扩展运算符,将其转为数组。
let arr = [...iterable];
(3)yield*
yield*后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口
(4)其他场合let generator = function* (){ yield 1; yield* [2,3,4]; yield 5; }; var iterator = generator(); console.log(iterator.next());//Object {value: 1, done: false} console.log(iterator.next());//Object {value: 2, done: false} console.log(iterator.next());//Object {value: 3, done: false} console.log(iterator.next());//Object {value: 4, done: false} console.log(iterator.next());//Object {value: 5, done: false} console.log(iterator.next());//{value: undefined, done: true}
由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口。下面是一些例子。
- for...of
- Array.from()
- Map(), Set(), WeakMap(), WeakSet()(比如
new Map([['a',1],['b',2]])
) - Promise.all()
- Promise.race()
3,字符串的Iterator接口
字符串是一个类似数组的对象,也原生具有Iterator接口。
上面代码中,调用var someStr = 'andy'; var iterator = someStr[Symbol.iterator](); console.log(iterator.next());//Object {value: "a", done: false} console.log(iterator.next());//Object {value: "n", done: false} console.log(iterator.next());//Object {value: "d", done: false} console.log(iterator.next());//Object {value: "y", done: false} console.log(iterator.next());//Object {value: undefined, done: true}
Symbol.iterator
方法返回一个遍历器对象,在这个遍历器上可以调用next方法,实现对于字符串的遍历。4,Iterator接口和Generator函数
Symbol.iterator
方法的最简单实现,还是使用介绍的Generator函数上面代码中,var myIterable = {}; myIterable[Symbol.iterator] = function*(){ yield 1; yield 2; yield 3; }; console.log([...myIterable]);//[1, 2, 3] //或者采用简洁写法 let obj = { *[Symbol.iterator](){ yield 'hello'; yield 'andy'; } }; for(let x of obj){ console.log(x); } //hello //andy
Symbol.iterator
方法几乎不用部署任何代码,只要用yield命令给出每一步的返回值即可。5,遍历器对象的return(),throw()
遍历器对象除了具有next
方法,还可以具有return
方法和throw
方法。
如果你自己写遍历器对象生成函数,那么next
方法是必须部署的,return
方法和throw
方法是否部署是可选的
return
方法的使用场合是,如果for...of
循环提前退出(通常是因为出错,或者有break
语句或continue
语句),就会调用return
方法。
如果一个对象在完成遍历前,需要清理或释放资源,就可以部署return
方法。
6,for...of循环
Symbol.iterator
属性,就被视为具有iterator接口,就可以用for...of
循环遍历它的成员。也就是说,for...of
循环内部调用的是数据结构的Symbol.iterator
方法。for...of
循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments
对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串。//数组原生具备iterator接口(即默认部署了Symbol.iterator属性),
//for...of循环本质上就是调用这个接口产生的遍历器;
const arr = ['a','b','c'];
for(let i of arr){
console.log(i);
}
//a
//b
//c
const obj ={};
obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);
for(let v of obj){
console.log(v);
}
//a
//b
//c
//空对象obj部署了数组arr的Symbol.iterator属性,结果obj的for...of循环,产生了与arr完全一样的结果。
//for...of循环可以代替数组实例的forEach方法
//JavaScript原有的for...in循环,只能获得对象的键名,不能直接获取键值。
//ES6提供for...of循环,允许遍历获得键值。
var arr1 = ['a','b','c','d'];
for(let i in arr1){
console.log(i);
}
//0
//1
//2
//3
for(let i of arr1){
console.log(i);
}
//a
//b
//c
//d
//for...of循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样。
let arr2 = [7,8,9];
arr2.foo=['bar'];
for(let i in arr2){
console.log(i);
}
//0
//1
//2
//foo
for(let i of arr2){
console.log(i);
}
//7
//8
//9
//上面代码中,for...of循环不会返回数组arr的foo属性。
Set和Map结构
for...of
循环。
let set = new Set(['name','age','sex']);
for(let i of set){
console.log(i);
}
//name
//age
//sex
let map = new Map();
map.set('name','andy');
map.set('age',27);
map.set('sex','男');
for(let [name,val] of map){
console.log(name+':'+val);
}
//name:andy
//age:27
//sex:男
//上面代码演示了如何遍历 Set 结构和 Map 结构。
//值得注意的地方有两个,首先,遍历的顺序是按照各个成员被添加进数据结构的顺序。
//其次,Set 结构遍历时,返回的是一个值,而 Map 结构遍历时,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。
计算生成的数据结构
有些数据结构是在现有数据结构的基础上,计算生成的。比如,ES6的数组、Set、Map 都部署了以下三个方法,调用后都返回遍历器对象。
entries()
返回一个遍历器对象,用来遍历[键名, 键值]
组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用entries
方法。keys()
返回一个遍历器对象,用来遍历所有的键名。values()
返回一个遍历器对象,用来遍历所有的键值。
let arr = ['a','b','c'];
for(let pair of arr.entries()){
console.log(pair);
}
//[0, "a"]
//[1, "b"]
//[2, "c"]
类似数组的对象
for...of
循环用于字符串、DOM NodeList 对象、arguments
对象的例子。
//字符串
let str = 'andy';
for(let i of str){
console.log(i);
}
//a
//n
//d
//y
//DOM NODELIST对象
let b = document.getElementsByTagName('b');
for(let i of b){
i.classList.add('listb');
}
//arguments对象
function printArgs(){
for(let i of arguments){
console.log(i);
}
}
printArgs('a','b');
//a
//b
//并不是所有类似数组的对象都具有 Iterator 接口,一个简便的解决方法,就是使用Array.from方法将其转为数组。
let arrylike = {
0:'a',
1:'b',
length:2
}
for(let i of Array.from(arrylike)){
console.log(i);
}
//a
//b
对象
for...of
结构不能直接使用,会报错,必须部署了 Iterator 接口后才能使用。但是,这样情况下,for...in
循环依然可以用来遍历键名。
let arr = {
a:'a',
b:'b'
};
for(let i in arr){
console.log(i);
}
//a
//b
for(let i of arr){
console.log(i);//Uncaught TypeError: arr[Symbol.iterator] is not a function
}
//上面代码表示,对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。
let arr = {
a:'a',
b:'b'
};
//一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。
for(let key of Object.keys(arr)){
console.log(key);
}
//a
//b
//另一个方法是使用 Generator 函数将对象重新包装一下
function* entires(obj){
for(let key of Object.keys(obj)){
yield [key,obj[key]];
}
}
for(let [key,val] of entires(obj)){
console.log(key+':'+val);
}