最简单语言理解Array扩展的新方法，map，reduce，filter，forEach

Posted 2021-02-11 carol1987

 

一直以来很多人对这4个方法都不是很熟悉，也不太会用，网上的很多教程写的都模模糊糊（程序员们的表达能力太弱，原谅他们吧）

所以今天我打算用最简单的语言来说清楚这4个东西

 

map：说白了就是一一对应，进去10个，出来10个，不多不少刚刚好

比如上学那会的考试成绩，[62, 55, 98]，对应的另外一层含义就是 [及格，不及格，优秀]，数组一一对应，只是换了个方法展示

 

reduce：意思就是减少（翻译也是减少），说白了就是进去多个，只出来1个

比如一个班级的平均分，不管数组里有多少个数，出来只有1个数

 

filter：字面翻译是过滤，实际作用就是进去多个，能出来几个不一定，有可能全都符合条件，全出来，也有可能全都不符合条件，全挂

比如重点班的成绩，肯定是全及格，普通班的成绩，就有及格和不及格的了，而 filter 的重点，就在于这个条件，这个条件会影响出来的结果

 

forEach：这个方法没有返回值，只是把数组里的东西遍历了一次

 

弄懂了他们几个的概念之后，咱们直接上代码看效果，以上面的分数为例

首先是 map

var arr = [62, 55, 98].map( function(number){

    if ( number >= 60 ) {
        return ‘及格‘;
    }else{
        return ‘不及格‘;
    }
})

console.log(arr);　　// [及格, 不及格, 及格]

 

官网上说 map 的回调函数里接收4个参数，但实际常用的只有第1个，详细的可以去 MDN 上看，这里我只说例子

从例子中能看出分数大于60就是及格，小于60就是不及格，所以最后 console 出来的结果就是 [及格, 不及格, 及格]

 

然后是reduce，reduce的参数有点多，一共3个，写出来是这样

var arr = [62, 55, 98].reduce( function(tmp, number, index){

})

 

number 不用多说，就跟第一个例子一样，代表数组里的数，那么 tmp 和 index 是什么意思呢？

从 tmp 的字面意思理解，他是一个临时结果，这个临时结果里面存的，是62+55的和，也就是117，再用117+98，得到最终值215 

而index，从字面上理解，就是索引，也就是第几次

 

我们稍微改造一下上面的代码

var arr = [62, 55, 98].reduce( function(tmp, number, index){
    
        console.log(index, tmp, number);
    
        return tmp+number;
})

alert( arr );

可以发现，console 的第一次的结果是 1 62 55，第二次是2 117 98，而最后弹出来的结果是215，这正符合我们的预期

想算平均分的话，用arr / length 就可以了

 

再接下来是 filter， filter的作用是过滤，关键在于过滤的条件

比如我想把及格的挑出来

 

var arr = [62, 55, 98].filter( function(number){

    if ( number >= 60 ) {
        return ‘及格‘;
    }else{
        return false;
    }
})

console.log(arr);　　// [62, 98]

 

 

 

 最后是 forEach，他也是这4个方法当中最简单的一个，就是遍历

 

var arr = [62, 55, 98].forEach( function(number, index){

console.log( `第${index}个是${number}` );
/*
第0个是62
第1个是55
第2个是98
*/

})

 

 

最后这里附赠一个小彩蛋，如果我们想把一个多维数组拉平，变成一维数组，reduce是一个非常好的办法

var arr = [[1,2,3],[4,5,6],[7,8,9]].reduce( function(a, b){
    
    return [...a, ...b];

})

console.log(arr);    // [1,2,3,4,5,6,7,8,9]

是不是很神奇！！