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

标签：font   参数   没有   模糊   大于   col   考试成绩   程序员   是什么   

一直以来很多人对这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个方法当中最简单的一个，就是遍历

最后这里附赠一个小彩蛋，如果我们想把一个多维数组拉平，变成一维数组，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]

是不是很神奇！！

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

标签：font   参数   没有   模糊   大于   col   考试成绩   程序员   是什么   

原文地址：https://www.cnblogs.com/carol1987/p/10452941.html