javascript map key 循环 js循环map集合

前言

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

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

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

[javascript]

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

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

2.forEach(ck)

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

[html] 

1. //数组的遍历  
2. let arr = [2,4,6,8,10,12];  
3. //回调函数简化前方式  
4. //value:索引值，index：下标，arr：要遍历的数组  
5. arr.forEach(function (value,index,arr) {  
6.     console.log(index + ":" + value);  
7. })  
8.   
9. //ES6后可以使用箭头函数  
10. arr.forEach((v,k)=>{  
11.     console.log(k + ":" + v);  
12. })  
13.   
14. //set的遍历  
15. let set = new Set(arr);  
16. set.forEach((v,k)=>{  
17.     console.log(k + ":" + v);//k和v是相同的  
18. })  
19.   
20. //Map的遍历  
21. let map = new Map().set(1,"apple")  
22.                    .set(2,"pear")  
23.                    .set(3,"balnana")  
24.                    .set(4,"orange");  
25. //遍历key,value  
26. map.forEach((v,k)=>{  
27.     console.log(k + ":" + v);  
28. })  
29.   
30. //遍历key,value  
31. map.forEach((v,k)=>{  
32.     console.log(k + ":" + v);  
33. })

3.for (.. of ..) 

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

[javascript] 

1. //数组的遍历  
2. let arr = [2,4,6,8,10,12];  
3. for (let v of arr) {  
4.     console.log(v);  
5. }  
6.   
7. //set的遍历  
8. let set = new Set(arr);  
9. for (let v of set) {  
10.     console.log(v);  
11. }  
12.   
13. //Map的遍历  
14. let map = new Map().set(1,"apple")  
15. "pear")  
16. "balnana")  
17. "orange");  
18. //遍历key,value  
19. for (let [k,v] of map) {  
20. ":" + v);  
21. }   
22.   
23. //遍历keys  
24. for (let k of map.keys()) {  
25.     console.log(k)  
26. }   
27.   
28. //遍历values  
29. for (let k of map.values()) {  
30.     console.log(k)  
31. }  
32.   
33. //遍历entries  
34. for (let [k,v] of map.entries()) {  
35. ":" + v)  
36. }

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

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

4.map(ck)

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

[html] 

1. //数组的遍历  
2. let arr = [2,4,6,8,10,12];  
3. let newArr = arr.map((v,k)=>v*2);  
4. newArr.forEach((v,k)=>{console.log(v)}); //输出4 8 12 16 20 24  
5.   
6. arr = [{"name":"tom",salary:1200},{"name":"Tony",salary:1300}]  
7. newArr = arr.map((v,k)=>v.salary*2);  
8. newArr.forEach((v,k)=>{console.log(v)});//输出2400 2600

5.some(ck)

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

[html]

1. //数组的遍历  
2. let arr = [2,4,6,8,10,12];  
3.   
4. //判断是否有大于10的元素  
5. let res = arr.some((v,k)=> v>10);  
6. console.log(res);  //输出true  
7.   
8. //判断是否有大于20的元素  
9. res = arr.some((v,k)=> v>20);  
10. console.log(res);  //输出false

6.filter(ck)

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

[html] 

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

7.every(ck)

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

[html]

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

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

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

[html] 

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