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);

猜你喜欢

转载自www.cnblogs.com/JCDXH/p/11745153.html