欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-18 17:54:29
目录一、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 < 10...

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