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

逃离我推掉我的手 2022-05-25 07:12 238阅读 0赞

**前言**

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

**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