带你理解filter()、map()、reduce()这三个高阶js函数

用上了高阶函数,逼格满满啊🤭

本篇文章是借鉴了进击的大葱再加上自己的理解写出来的。希望对小伙伴们有所帮助。

1.什么是高阶函数

高阶函数是那些操作其他函数的函数。用最简单的话来说,高阶函数就是一个将函数作为参数或者返回值的函数。
例如Array.prototype.map,Array.prototype.filterArray.prototype.reduce是JavaScript原生的高阶函数。
不要看上面的三个高阶函数写法复杂就感觉自己不行了,男人怎么能说自己不行呢🤭。
其实用法非常的简单,不会写这么复杂的,上面看着复杂,其实它们是定义在了原形上的。在js中直接.filter().map().reduce()就可以使用。

2.简单的一个需求

我这里写一个简单的需求,可以很好的帮助小伙伴们理解。当然了,理解了我的需求并且学会了怎么使用这三个高阶函数之后。可以去看进击的大葱的文章,这个时候看大佬的文章就会感觉好简单。。。

  • const nums = [10, 50, 150, 320, 60, 80, 40]

  • 需求1:取出所有小于100的数字

  • 需求2:将所有小于100的数字转化: 全部 *2

  • 需求3:之后再进行全部相加

理解了需求之后,开始向前冲吧~~🤭。

3.需求1:取出所有小于100的数字

先使用普通函数

let newNum = [];
for (let n of nums) {
    if (n < 100) {
        newNum.push(n)
    }
}

使用 filter()

// filter 过滤
/* filter 中的回调函数有一个要求:必须返回boolean值
	当返回true时,函数内部自动将这次回调的n加入新的数组中
	当返回false时,函数内部自动给过滤掉这次的n
*/
let newNum = nums.filter(function (n) {
	return n < 100;
});

4.需求2:将所有小于100的数字转化: 全部 *2

先使用普通函数

let new2Num = []
for (let n of newNum) {
	new2Num.push(n * 2)
}

使用 map()

//map 映射newNum,newNum数组中有几个内容,回调函数就执行几次
let new2Num = newNum.map(function (n) {
	return n * 2;
})

5.需求3:之后再进行全部相加

先使用普通函数

let sum = 0;
for (let n of new2Num) {
	sum += n
}

使用 reduce()

//reduce 这个函数有两个参数,且回调函数也有两个参数 
//reduce函数第一个参数是回调函数 第二个参数是回调函数中第一个参数的初始值
//reduce的回调函数第二个值为new2Num的值
// 表达式: arr1.reduce(func(a, b), c)
// 解释:reduce的第一个参数是func函数,第二个参数是初始化a值的c(只有初始化一次)
//		func函数中的第一个参数是会被保存的,也是旧的值;例如下面的previousValue初始值0,随着n的增加,previousValue在原有的基础上增加
//		func函数中的第二个参数就是arr1
let sum = new2Num.reduce(function (previousValue, n){
	return previousValue + n;
}, 0);

6.优化

优化第一步
const nums = [10, 50, 150, 320, 60, 80, 40]
let sum = nums.filter(function(n) {
	return n < 100;
}).map(function (n) {
	return n * 2;
}).reduce(function (previousValue,n){
	return previousValue + n;
},0);
console.log(sum)
如果了解箭头函数,最终优化
let sum = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n)

7.结语

学完上面的三个高阶函数是不是感觉,js也不是这么难吗。只要理解了且多敲代码,学习js其实就简简单单。。。
最后,感谢小伙伴们的支持!!!

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读