三种常见高阶函数fiter、map、reduce

三个高阶函数

1、filter 过滤函数

案例思想

• 这个函数他会去遍历当前数组，条件是 return 出一个布尔值
  • 遍历第一个 10
    • renturn 10<100 所以返回true 那么之后这个true数据就会存到接受数据的数组中
  • 遍历第三个 111 时
    • return 111<100 所以返回false 那么之后这个false数据就会被抛弃

const nums = [10, 20, 111, 222, 444, 40, 50]

let newNums = nums.filter(function (n) {
  return n < 100//返回小于100的数
})
 console.log(newNums);

#结果返回 newNums【10，20，40，50】

文本说明

• filter函数会过滤掉不要的函数，或者过滤出来一个需要的数组
• filter中的回调函数有一个要求: 必须返回一个boolean值(布尔值)
• true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中
• false: 当返回false时, 函数内部会过滤掉这次的n

2、map映射一对一

案例思想

• map回调函数会遍历当前数组，并且对他的条件执行，然后返回相应的数组
• 遍历第一个 20 ，
  • return 20*2 所以把结果40返回给相应的数组
• 遍历第二个40
  • return 40*2 所以把结果80返回给相应数组

let	newNums = 【10，20，40，50】

let new2Nums = newNums.map(function (n) {
  return n * 2//遍历这个数组，并且在这里设置条件，条件计算完成返回给相应的数组
})

#结果返回  new2Nums [20, 40, 80, 100]

文本说明

• map函数会给你返回一个根据条件处理过的新数组
• map中的回调函数中放入你的条件

3、reduce汇总函数

案例思想

• 第一次遍历
  • 20+40
• 第二次遍历
  • 60+80
• 依次往下遍历执行，直至执行完

let  new2Nums = [20, 40, 80, 100]

let result=new2Nums.reduce(function(tmp,item,index){
      //tmp 上次结果，item当前数，index第几次计算次数1开始
           return tmp+item
        })
#结果返回  new2Nums = 240

文本说明

• 可用于汇总与平均

• 有三个参数

  • 第一个是上次结果
  • 第二个是当前要遍历的
  • 第三个是index索引值

3.1reduce汇总第二种说法

案例思想

• 让books数组中的每一个对象的price和count相乘
  • 因为第二个参数是要遍历books中的数据，所以 book.price 和 book.count
  • 就可以取到books数组中每一个对象的 price 和 count

 
return this.books.reduce(function (preValue, book) {
     //preValue是上一次结果，book是this.books中的每一项
     
        return preValue + book.price * book.count
     
     //这句话返回了0+book.price * book.count
     
      }, 0)//这里的0定义了preValue上一次结果为0

函数链式编程

let arrs=nums.filter(n=> n<=100).map(n=>n*2).reduce((n,a,index)=>n+a)
#结果返回 240