码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-03-01 09:39:23      阅读:221      评论:0      收藏:0      [点我收藏+]

标签: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个方法当中最简单的一个,就是遍历

 

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]

是不是很神奇!!

 

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!