JavaScript 集合（Array，Set，Map）遍历

前言

集合遍历是我们实现业务逻辑的常用手段之一，我们几乎每天都会使用到它去操作集合元素。今天就梳理一下一些常用的集合遍历方式。

1.for（let i = 0;i <length;i++）循环

这是我们最早接触的遍历集合的方式，简单容易理解，按照集合的索引顺序遍历集合的内容。数组Array的最大长度使用arr.length表示，其他集合使用size()函数表示。但是对于Set和Map来说这种方式不适用，因为没有取出下标对应值的方法。示例如下：

let arr = [2,4,6,8,10,12];
for (let i = 0;i < arr.length;i ++) {
    console.log(arr[i]);
}

接下来的几种方式也是ES6支持的方法，主要通过回调函数的方式读取数据

 

2.forEach(ck)

forEach看起来更加简洁，但这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

//数组的遍历
let arr = [2,4,6,8,10,12];
//回调函数简化前方式
//value:索引值，index：下标，arr：要遍历的数组
arr.forEach(function (value,index,arr) {
    console.log(index + ":" + value);
})

//ES6后可以使用箭头函数
arr.forEach((v,k)=>{
    console.log(k + ":" + v);
})

//set的遍历
let set = new Set(arr);
set.forEach((v,k)=>{
    console.log(k + ":" + v);//k和v是相同的
})

//Map的遍历
let map = new Map().set(1,"apple")
                   .set(2,"pear")
                   .set(3,"balnana")
                   .set(4,"orange");
//遍历key,value
map.forEach((v,k)=>{
    console.log(k + ":" + v);
})

//遍历key,value
map.forEach((v,k)=>{
    console.log(k + ":" + v);
})

 

3.for (.. of ..) 

 

ES6引入了iterable类型，Array,Map,Set都属于iterable类型，它们可以使用for...of循环来遍历，意思为循环集合中的元素。注意区别于for...in用法，这是遍历对象属性的。示例如下

//数组的遍历
let arr = [2,4,6,8,10,12];
for (let v of arr) {
    console.log(v);
}

//set的遍历
let set = new Set(arr);
for (let v of set) {
    console.log(v);
}

//Map的遍历
let map = new Map().set(1,"apple")
                   .set(2,"pear")
                   .set(3,"balnana")
                   .set(4,"orange");
//遍历key,value
for (let [k,v] of map) {
    console.log(k + ":" + v);
} 

//遍历keys
for (let k of map.keys()) {
    console.log(k)
} 

//遍历values
for (let k of map.values()) {
    console.log(k)
}

//遍历entries
for (let [k,v] of map.entries()) {
    console.log(k + ":" + v)
}

 

• 这是最简洁、最直接的遍历数组元素的语法
• 这个方法避开了for-in循环的所有缺陷
• 与forEach()不同的是，它可以正确响应break、continue和return语句

接下来的遍历方法的回调函数是有返回值的,并且只正对数组，ck指callback函数

4.map(ck)

map就是映射的意思，将原对象映射为新的数组，每个数组元素都执行一次ck函数，最后返回每次元素执行ck函数后返回值的集合(数组)。

//数组的遍历
let arr = [2,4,6,8,10,12];
let newArr = arr.map((v,k)=>v*2);
newArr.forEach((v,k)=>{console.log(v)}); //输出4 8 12 16 20 24

arr = [{"name":"tom",salary:1200},{"name":"Tony",salary:1300}]
newArr = arr.map((v,k)=>v.salary*2);
newArr.forEach((v,k)=>{console.log(v)});//输出2400 2600

5.some(ck)

此方法用于判断数组中是否有满足条件的元素，如果有则返回true,没有则返回false

//数组的遍历
let arr = [2,4,6,8,10,12];

//判断是否有大于10的元素
let res = arr.some((v,k)=> v>10);
console.log(res);  //输出true

//判断是否有大于20的元素
res = arr.some((v,k)=> v>20);
console.log(res);  //输出false

6.filter(ck)

filter过滤，用于过滤数组中符合条件的元素，和map方法一样，返回的是一个数组映射。

let arr = [2,4,6,8,10,12];
//将大于5的元素提取出来
let res = arr.filter((v,k)=> v>5);
res.forEach((v)=>console.log(v));

7.every(ck)

every与some相似，从英文意思上来讲some表示"一些"，数组中只要有满足条件的就会返回true；every表示"每一个"，只要有一个不满足条件就返回false;

let arr = [2,4,6,8,10,12];
//判断是否每一个元素都大于5
let res = arr.every((v,k)=> v>5);
console.log(res); //输出false

//判断是否每一个元素都大于1
res = arr.every((v,k)=> v>1);
console.log(res); //输出true

8.reduce(ck,[init])，ck回调函数，init初始值

reduce英文意思是减少，缩少，还有浓缩的意思（学好英文很重要。。。），意思就是按照callback规则累积运算得出一个计算结果。

let arr = [2,4,6,8,10,12];
//判断是否每一个元素都大于5
let res = arr.reduce((x,y)=>x+y,2);
console.log(res); //输出44

reduce更多用法参照：https://segmentfault.com/a/1190000010731933