欢迎光临
我们一直在努力

JavaScript | 数组map()、reduce()和filter()

数组的高阶函数有很多,这篇文章就来介绍一下其中三个:map()、reduce()、filter()。

相同点

  • 三个方法都适用于数组
  • 三个方法都需要传入函数
  • map()和filter()都会返回数组,reduce()返回计算结果

不同点

  • map()方法返回一个新数组,新数组为函数处理后的值
  • reduce()方法返回一个值,该值为数组元素从左到右(两个参数)依次缩减执行函数的结果(可用于计算和、积等)
  • filter()方法用于返回一个新数组,数组元素为满足函数判断的原数组元素

参数

map()方法和reduce()方法都接收两个参数,分别为(回调函数,this绑定),回调函数里有三个参数,分别为(item,index,array);

其中this将传递给回调函数,和回调函数后面直接.bind(this)效果一样。

reduce()方法接受两个参数,分别为(回调函数,初始值),回调函数接收四个参数,分别为(累计值,item,index,array);

map()方法

通过map()方法计算所有数组元素的平方

var arr = [1,2,3,4,5];
var arr2 = arr.map(function (item){
    return item*item;
});
//[1,4,9,16,25]

通过map()方法把数组元素从Number转换为String类型

var arr = [1,2,3,4,5];
var arr3 = arr.map(String);
console.log(arr3);
//["1", "2", "3", "4", "5"]

reduce()方法

通过reduce()方法求所有元素的和或乘积

//reduce 传入一个函数(两个参数),返回一个结果;
var arr = [1,2,3,4,5];
var arrSum = arr.reduce(function (x,y){
    return x+y; //求和
    //return x*y 求所有元素乘积
});
console.log(arrSum);

通过reduce()把数组转换为一个整数,实现把字符串类型转换为Number类型。

//通过reduce把[1,2,3,4]转换成整数1234
var numArr = [1,2,3,4];
getNum = numArr.reduce(function(x,y){
    return x*10 + y;
});
console.log(getNum);
//上面的案例,可以通过先把字符串'1234'转换为[1,2,3,4]在进行后面的操作,最后'1234'变成了1234,完成了类型转换

function strToNumber(str){
    return str.split('').map(Number).reduce(function(x,y){
        //map(Number)可以用map(Math.abs)代替,虽然Math.abs()主要用于把负数转为正数,但当为其传入字符串数字时,他也会隐式转换为Number,且若为负会转为正数
        return x*10+y;
    });
}
console.log(strToNumber("1234756"));

filter()方法

返回过滤后的数组,去掉数组中的空字符串,通过filter()去重。

//filter 用于过滤元素 function传入一个参数 返回过滤后的数组
var arr = [1,2,3,4,5];
var arr4 = arr.filter(function(item){
    return item>2;
});
console.log(arr4);
//我们可以通过filter过滤掉数组中的空字符串
var emArr = ['A','B','',null,undefined,'C']
var emArr2 = emArr.filter(function(item){
    return item !== '';
    //如果要过滤null和underfind ,可以return item;
});
console.log(emArr,emArr2);
//filter()实际上可以接受三个参数,依次为:数组元素、元素索引、数组本身
//通过这一点我们可以很方便的对数组去重
var conArr = [1,2,3,4,5,2,1,3,4,2,6];
var conArr2 = conArr.filter(function(item,index,arr){
    return arr.indexOf(item) === index;
});
console.log(conArr2);
赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | 数组map()、reduce()和filter()
分享到: 更多 (0)

评论 抢沙发

8 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏