ES6中的iterable数组遍历用法及详解

我们知道我们可以得出数组的下标，然后根据下标来遍历数组元素，到时上一章（Map和Set数据类型）我们知道Map和Set是ES6新添加的数据类型，Map可以是二维数组，所以如果我们要遍历Map或者Set我们应该怎么办呢？

根据这个问题，ES6标准又定义了新的iterable类型，把Array，Map和Set都归纳为iterable类型。

一、for…of…

看家for…of…是否会想起for…in…，那我们再来复习一下for…in…的用法，例如：

var arr = ['A', 'B', 'C'];
for (var i in arr){
console.log(i);//输出0，1，2
onsole.log(typeof(i))//string

}

var person={
name:'mm',
age:18
};
for (var i in person){
console.log(i);//输出：name,age
}

数组也属于对象，所以使用for…in…遍历对象得出的只是对象的key值，也就是对象的属性名，并且都是string类型的。就像是超市，for…in…遍历只是找到了货架，并不在意里面装的是啥。

怎样才能遍历对象的值，遍历货架上的商品？iterable类型集合可以通过for…of…来遍历，先让我们呢来看一个例子：

var arr = ['A', 'B', 'C'];
for (var i of arr){
console.log(i);//输出：A,B,C
}

用这个方法可以马上输出对象的值。所以可以猜想，for…of…循环遍历的是集合本身的元素？

我们在来多几个例子，在Map和Set中是如何使用for…of…来得到对象本身的元素的？

var s = new Set([1,2,3,4,'mm']);
for (var x of s) { 
console.log(x);//输出：1,2,3,4,mm
}

var m = new Map([[21, 'x'], [32, 'y'], [53, 'z']]);
for (var x of m) {
console.log(x[0]+','+x[1]);//21,x 32,y 53,z
console.log(x)//(2) [21, "x"] (2) [32, "y"] (2) [53, "z"]

}

以上的例子中，使用for…of…循环遍历Set很好理解，因为Set只有key，没有value，所以输出得到的直接是对象本身的元素。而Map是一个二维数组，所以如果直接console.log(x)的话得到的是一个个数组元素，所以如果要遍历到元素数组中的，还要运用多维数组的访问元素的方法。

二、forEach( )方法

需要达到相同效果的还可以运用forEach( )方法，forEach( )是ES5标准定义的，虽然大多数浏览器都已经支持ES5，但是为了避免你能顺利的学习，所以在使用之前还是要测试一下你的浏览器是否支持。

语法：

array.forEach(function(currentValue, index, arr), thisValue)

forEach( )方法用于调用数组的每个元素，并且将元素返回给回调函数。

currentValue是数组的值表示当前元素；

index是元素的索引；

arr是当前元素的数组对象。

以下是我用forEach( )方法在iterable集合中使用的方法和结果。在浏览器的控制台中我们可以看到运行的效果，在Map类型中使用的时候，可以知道这三个函数参数所表示的是什么：第一个参数标示的是数组的value值，第二个参数，标示的是元素的key值，而在一Array数组中，第二个参数标示的是索引，这点要区分开。第三个指向的是对象本身。

var mm = new Map([['class1',60],['class2',45],['class3',55],['class4',60]])
mm.forEach(function(value,index,arr){
console.log(value)//60,45,55,60
console.log(index)//calss1,calss2,calss3,calss4
console.log(arr);//['class1',60],['class2',45],['class3',55],['class4',60]]
})

console.log('==========================')
var ss = new Set([1,4,3,5]);
ss.forEach(function(value,index,arr){
console.log(value)//1,4,3,5
console.log(index)//1,4,3,5
console.log(arr);//Set(4) {1, 4, 3, 5}
})

console.log('==========================')
var arr1 = ['A', 'B', 'C'];
arr1.forEach(function(value,index,arr){
console.log(value)//A,B,C
console.log(index)//0,1,2
console.log(arr);//(3) ["A", "B", "C"]
})

因为forEach( )方法中函数的三个参数不是都是必要的，所以在使用的使用视为情况和需要而定，比如在Set类型中，因为Set没有索引，所以前两个参数返回的都是元素本身。

要注意的是，在使用for…of…和forEach( )之前应该先要测试你的浏览器是否只是ES6的新语法。测试的方法也是在严格模式下编写一段以上例子中的任何一段，如果报错的话说明你是用的浏览器不支持ES6的新语法，建议换一个浏览器学习测试。