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 }

【ES6中的iterable数组遍历用法及详解】用这个方法可以马上输出对象的值。所以可以猜想，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的新语法，建议换一个浏览器学习测试。