filter，map，reduce三个数组高阶函数的使用

filter ，map ，reduce三个高阶函数的使用

普通方法解决数据问题

1.  const nums1= [10,20,111,222,444,40,50]
   
        // 需求1.取出小于100的数字
        // 常规思想，用一个数组保存取出的数字,遍历里面的项，小于100的追加进新数组
        let newNums = []
        for(let n of nums1){
          if(n<100){
            newNums.push(n)
          }
        }
        console.log(newNums)  
   
        // 需求2.再将所有小于100的数字进行转化：全部乘2
        let newNums2 = []
        for(let n of newNums){
          newNums2.push(n*2)
        }
        console.log(newNums2)
   
        // 需求3.再将所有数据相加
        let total =0 ;
        for(let n of newNums2){
          total +=n
        }
        console.log(total);

2. 经过三次创建新数组和对数组的操作拿到了最终想要的数据

引入三个高阶函数

1.     const nums2 = [10,20,111,222,444,40,50]
        // filter （数组数据过滤）
        // arr.filter( callbackfn(n) )  ->回调函数有一个要求，必须返回一个boolean值
        // 回调函数中的参数n会依此拿arr数组中的每一项
        // 当返回true的时候，函数内部会自动将这次回调的n加入到新的数组中
        // 当返回的false的时候，函数内部会过滤这次的
   
        let new1 = nums2.filter(function(n){
          return n < 100
        })
        console.log(new1);
   
        // map  （数组数据变异）
        // arr.map( callbackfn(n) ) ->回调函数与filter不同，有返回值，但是不是boolean值
        // 每次返回的值都作为内部创建的数组的项依此添加进去
        let new2 = new1.map(function(n){
          return n*2
        })
        console.log(new2);
   
        // reduce （数组数据汇总(相乘，相加)）
        // arr.reduce( callbackfn (preValue , n) , num )
        // preValue上一次返回的值，n为调用该方法数组的每一项  num为perValue的初始值
        let sum = new2.reduce((preValue,n)=>{
          return preValue + n
        },0)
        console.log(sum);
   

   高阶函数的链式调用

2.  // 链式调用
    // 高阶函数的高阶用法：因为这三个函数都会返回一个数组，那我门是不是连续使用此方法
      let sum1 = nums2.filter((n)=>{
        return n<100
      }).map((n)=>{
        return n*2
      }).reduce((e,n)=>{
        return e+n
      },0)
      console.log(sum1);

原文地址：https://www.cnblogs.com/JCDXH/p/11745153.html