ES6 for-of循环和迭代器使用细节

SE5之前我们可以用for循环来遍历数组，SE5为数组引进了新的方法forEach()，方便了很多，但是该方法不能够通过break或者return返回外层函数。

arr.forEach(function(value){
	console.log(value);
})

 

ES6定义了一个更好的遍历数组的方法for-of循环，该方法的强大在于可以遍历任何具有迭代器的对象，例如数组、NodeList对象、Map和Set对象。还可用于遍历字符串，将其视为一系列的Unicode字符来遍历，即中文也算一个字符。

 

 

遍历数组

function outputArr(var arr){
	for( var tmp of arr){
		console.log(tmp);
	}
}

 

遍历NodeList

(function(){
	let divArr = document.getElementsByName('div');
	for(let tmp of divArr){
		tmp.style.color = 'red';
	}
})();

 

遍历Set

var set = new Set(array);
for( var arr of set){
	console.log(arr);
}

遍历Map，需要用到SE6解构的方法。

var map = new Map();
map.set("aa",1);
map.set("bb",2);
for(var [name, value] of map){
	console.log(name +" " + value);
}

 

遍历字符串

var str = "abc哈哈";
for(var tmp of str){
	console.log(tmp);
}
// a
// b
// c
// 哈
// 哈

 

深入理解迭代器对象

 

for-of循环首先调用集合的[Symbol.iterator]()方法，该方法返回一个新的迭代器对象，如自身，但该对象要具有一个.next()方法。for每循环一次就调用这个.next()方法。该方法返回一个对象{done:false,value:value},done属性用来判断循环是否结束，value属性就是迭代的值。最简单的例子如下。

function ite(){
	var index = 0;
	return {
		[Symbol.iterator]: function () {
			return this;
		},
		next:function(){
			return index < 3 ? {done:false,value:index++}:{done:true,value:undefined};
		}
	}
}
(function(){
	var it = ite();
	for(var tmp of it){
		console.log(tmp);
	}
}())

注意：迭代器对象一定要有有Symbol.iterator和next这两个方法，不然会判断这不是一个迭代器，Symbol是SE6的新类型，该类型的值是与任何值都不同，用来避免重名的问题。火狐运行结果0,1,2。

 

迭代器还有可选的.return()和.throw(exc)方法。如果for-of循环过早退出会调用.return()方法，如用异常、return、break触发.return()方法。所以.return()方法可以用来处理一些释放内存或资源的工作，而对于.throw()方法，for-of循环永远不会调用它。

这两个方法通常用来处理生成器，在讲生成器的时候会由具体说明。