zoukankan      html  css  js  c++  java
  • 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);
      
      

    高阶函数的链式调用

    1.  // 链式调用
       // 高阶函数的高阶用法:因为这三个函数都会返回一个数组,那我门是不是连续使用此方法
         let sum1 = nums2.filter((n)=>{
           return n<100
         }).map((n)=>{
           return n*2
         }).reduce((e,n)=>{
           return e+n
         },0)
         console.log(sum1);
      
  • 相关阅读:
    数据管理(五)
    (译文)Gentoo的前世今生 part3 (完成版※)
    数据管理(三)
    数据管理(一)
    数据管理(七)
    (译文)Gentoo的前世今生 PART 1(完成版)
    数据管理(六)
    数据管理(四)
    SQL Server补丁版本的检查和安装过程中常见问题
    3938 Portal(离线型的并查集)
  • 原文地址:https://www.cnblogs.com/JCDXH/p/11745153.html
Copyright © 2011-2022 走看看