Vue.js扩展：高阶函数filter、map与reduce的简单使用

作者: 陌然浅忆
来源: 51数据库
2021-07-01

一、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>

高阶函数也可链式调用，使用高阶函数后代码的可读性大大提高，这里只是他们的简单用法，只提及到了必要参数，还有他们的可选参数没有提及。在学习了箭头函数后，配合高阶函数，代码的简洁度会更上一层楼

Vue.js扩展：高阶函数filter、map与reduce的简单使用

目录

一、filter函数的使用

二、map函数的使用

三、reduce的使用

四、完整代码