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

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

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

1.什么是高阶函数

高阶函数是那些操作其他函数的函数。用最简单的话来说，高阶函数就是一个将函数作为参数或者返回值的函数。
例如Array.prototype.map,Array.prototype.filter和Array.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其实就简简单单。。。
最后，感谢小伙伴们的支持！！！