js高阶函数filter、map、reduce

我们从一个小案例彻底了解js高阶函数filter、map、reduce

现有需求
1.对一个数组进行过滤(小于100)
2.对过滤的数组进行乘2
3.对数组所有数据求和

1.我们不用高阶函数时会这样操作

var arr = [10,20,30,50,40,120,150,500]
// 1.过滤arr只要小于100的数据
var newArr = []   //接收小于100的新数组
for (let i = 0; i < arr.length; i++) {
  if(arr[i]<100){
    newArr.push(arr[i])
  }
}
console.log(newArr); //[10, 20, 30, 50, 40]
//2.把过滤掉的数组都乘2
var newArr2 = [] //接收乘2的新数组
for (let i = 0; i < newArr.length; i++) {
 newArr2.push(newArr[i]*2)
  
}
console.log(newArr2);//[20, 40, 60, 100, 80]
// 3.求newArr2数组中的数组之和
var total = 0
for (let i = 0; i < newArr2.length; i++) {
  
  total += newArr2[i]
  
}
console.log(total);//300

2.使用高阶函数

1. filter中的回调函数有一个要求,必须返回一个布尔值
   返回true,函数内部会自动将这次回调的n加入到新的数组中,
   返回false当返回false,函数内部会过滤这次的n
   2.map循环数组并对数组进行计算
   3.reduce作用对数组中所有的内容进行汇总，
   第一次执行回调函数：0 + 20
   第二次执行回调函数：20 +40
   第三次执行回调函数：60 +60
   第四次执行回调函数：120+ 100
   函数后面的0是preValue第一次的初始值

var arr = [10,20,30,50,40,120,150,500]
// 1.过滤获得小于100的数
let newArr = arr.filter(function(i){
 // 第一次  i=10   10<100 true 加入数组里面
 // 第二次  i=20   20<100 true 加入数组里面
  return i<100
})
console.log(newArr); //[10, 20, 30, 50, 40] 
// 2.把过滤好的数组都乘2
let newArr2 = newArr.map(function(i){
  return i*2
})
console.log(newArr2);//[20, 40, 60, 100, 80]

// 获取所有数据之和
let total = newArr2.reduce(function(preValue,n){
  return preValue + n
},0)
console.log(total);//300

从这里看我们的高阶函数写法也并没有什么亮点,那接下来看下我们的简化写法！

1.第一种

var arr = [10,20,30,50,40,120,150,500]
let total = arr.filter(function(i){
  return i < 100
}).map(function(i){
  return i *2 
}).reduce(function(preValue,n){
  return preValue + n
},0)
console.log(total);//300

2.第二种

var arr = [10,20,30,50,40,120,150,500]
let total = arr.filter(i => i<100).map(i => i*2).reduce((preValue,n) => preValue + n)
console.log(total);//300

由此可见高阶函数写法是不是代码更简洁,以后我们会经常用到！