js你不可不知的高阶函数

javascript高阶函数的用法

函数式编程

filter()/map()/reduce()

• //以前的用法
  const nums = [10, 20, 111, 222, 4444, 40, 50]
  //取出所有小于100的数字
  let newNums = []
  //1
  for(let i of nums){
      if(n < 100){
          newNums.push(i)
      }
  }
  //2将所有的newNum数字相加，得到最终结果
  let total = 0;
  for(let n of newNums){
      total += n
  }
  

• filter()会自动遍历调用它的数组对象，并过滤掉不符合条件的元素，在返回一个新的数组

  //现在的函数式编程
  
  //filter会自动遍历调用它的数组并过滤掉不符合条件的元素
  
  //filter中的回调函数有一个要求：必须返回一个boolean值
  //true：函数内部会自动将这次回调的n加入到新的数组中
  //false：函数内部会过滤掉这次n
  let newNums = nums.filter(function(n){
      return n < 100
  })
  console.log(newNums)
  //输出 [10, 20, 40, 50]
  

• map()会遍历调用它的数组对象，并对其每一个元素做改变，再返回一个新的数组

  //需求：将原来数组的元素都*2
  
  //map会遍历调用它的数组，并对其每一个元素做改变
  
  let new2Nums = newNums.map(function(n) {
      return n * 2
  })
  console.log(new2Nums)
  //输出[20, 40, 80, 100]
  

• reduce()会遍历调用他的数组对象，并做进一步操作，返回一个值

  //传两个参数 一个是回调函数，第二个值为pruValue的初始化值(若不写的话默认为0)
  let total = new2Nums.reduce(function(preValue, n){
      return preValue + n
  },0)
  //第一次：preValue:0 n:20
  

total用高阶函数怎么算

let total = nums.filter(function(n){
    return n < 100
}).map(function(n){
    return n * 2
}).reduce(function(preValue, n){
    return preValue + n
})
console.log(total)
//输出240


//更简洁的写法

let total = nums.filter(n => n < 100).map(n = > n * 2).reduce((pre, n) => pre + n )
console.log(total)
//输出为240