Vue.js扩展：高阶函数filter、map与reduce的简单使用
一、filter函数的使用
现在提出一个需求，给一个数组如arr = [10,20,111,222,444,40,50]，要求取出所有小于100的数字。
在学习filter之前可能会使用一个for循环加if来过滤数组，并将符合要求的push到新数组中。
const arr = [10,20,111,222,444,40,50]
let newArr = []
for(let n of arr){
if(n < 100){
newArr.push(n)
}
}
console.log(newArr);//[10,20,40,50]
这样的代码不但写起来麻烦，而且可读性很低，但使用filter后就会变得很简单
语法：
arr.filter(function(n))
使用filter时要传入一个回调函数，n是filter自动遍历数组中的每一个值，这个回调函数有一个要求就是必须返回一个Boolean值。当返回ture时，函数内部会自动将这次回调的n加入到新数组中；当返回false时，函数内部会过滤掉这次的n.
那么上面代码就能改为：
let newArr = arrs.filter(function(n){
return n < 100
})
console.log(newArr);//[10,20,40,50]
数组内小于100的数经过回调返回ture，添加到新数组nerArr中
二、map函数的使用
现在提出第二个需求：将刚刚取出的小于100的数字全部*2放在另一个数组中
再学习map前也是使用for遍历，并push(2n)到新数组中。
let new2Arr = []
for (let n of newArr){
new2Arr.push(n * 2)
}
console.log(new2Arr);//[20,40,80,100]
同样道理，使用map会简单很多
语法：
arr.map(function(n))
map函数会将回调函数返回的值作为新值传入到新数组中。上面代码可改为：
let new2Arr = newArr.map(function(n){
return n*2
})
console.log(new2Arr);//[20,40,80,100]
三、reduce的使用
现在再提出第三个需求：将new2Arr所有数字相加，得到最终结果
在学习reduce前同样使用for遍历相加：
let total = 0
for(let n of new2Arr){
total += n
}
console.log(total);//240
reduce函数的功能是对数组中所有内容进行汇总，理解起来较为复杂。
语法：
reduce(function(preValue,n),initiaValue)
使用reduce必须要传入这几个参数，一个回调函数和一个初始化值initiaValue。reduce也会遍历数组，当没有传入初始值时，第一个preValue是数组中第一个元素，n数组是第二个元素。但是当传入初始值（initiaValue）后,第一个preValue将是initivalValue，n将是数组中的第一个元素。从第二次开始，后面的preValue取决于回调函数中返回的值
用new2Arr举个栗子：
//new2Arr = [20,40,80,100]
new2Arr.reduce(function(preValue,n){
return 100
},0)
//第一次 preValue=0 n=20
//第二次 preValue=100 n=40
//第三次 preValue=100 n=80
//第四次 preValue=100 n=100
new2Arr里一共4个元素，reduce共循环4次，初始化值initivalValue=0，第一次循环preValue=initivalValue=0，n为数组第一个元素。因为回调函数返回永远为100，所以后面循环preValue永远为100，n为数组第2，3，4个元素。利用这个特性就能对数组进行汇总了。
如果需要求数组总和值只需要改一下回调函数返回值：
let total = new2Arr.reduce(function(preValue,n){
return preValue + n
},0)
console.log(total);//240
//第一次 preValue=0 n=20
//第二次 preValue=20 n=40
//第三次 preValue=60 n=80
//第四次 preValue=140 n=100
//return 240
四、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
const arr = [10,20,111,222,444,40,50]
// let newArr = []
// for(let n of arr){
// if(n < 100){
// newArr.push(n)
// }
// }
// console.log(newArr);//[10,20,40,50]
//
// let new2Arr = []
// for (let n of newArr){
// new2Arr.push(n * 2)
// }
// console.log(new2Arr);//[20,40,80,100]
//
// let total = 0
// for(let n of new2Arr){
// total += n
// }
// console.log(total);//240
let total = arr.filter(function (n) {
return n < 100
}).map(function (n) {
return n * 2
}).reduce(function (preValue,n) {
return preValue + n
},0)
console.log(total);//240
</script>
</body>
</html>
高阶函数也可链式调用，使用高阶函数后代码的可读性大大提高，这里只是他们的简单用法，只提及到了必要参数，还有他们的可选参数没有提及。在学习了箭头函数后，配合高阶函数，代码的简洁度会更上一层楼
本文地址：https://blog.csdn.net/DDDDDecade/article/details/110209354
上一篇： WebView内存泄露的解决方案
下一篇： 笔记之HTML总结分享