个性化阅读
专注于IT技术分析

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…遍历只是找到了货架,并不在意里面装的是啥。

for-in原理图解

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

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

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

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的新语法,建议换一个浏览器学习测试。

赞(0) 打赏
未经允许不得转载:srcmini » ES6中的iterable数组遍历用法及详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏