zoukankan      html  css  js  c++  java
  • JS中的三个高阶函数

    1 filter过滤函数

    const nums = [2,3,5,1,77,55,100,200]
    //要求获取nums中大于50的数
    //回调函数会遍历nums中每一个数,传入回调函数,在回调函数中写判断逻辑,返回true则会被数组接收,false会被拒绝
    let newNums = nums.filter(function (num) {
      if(num > 50){
        return true;
      }
      return false;
     })
     //可以使用箭头函数简写
    //  let newNums = nums.filter(num => num >50)
    

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

    注意: filter() 不会对空数组进行检测。

    注意: filter() 不会改变原始数组。

    2 map高阶函数

    // 要求将已经过滤的新数组每项乘以2
    //map函数同样会遍历数组每一项,传入回调函数为参数,num是map遍历的每一项,回调函数function返回值会被添加到新数组中
    let newNums2 = newNums.map(function (num) {
      return num * 2
     })
     //简写
    //  let newNums2 = newNums.map(num => num * 2)
    console.log(newNums2);
    

    map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

    map() 方法按照原始数组元素顺序依次处理元素。

    注意: map() 不会对空数组进行检测。

    注意: map() 不会改变原始数组。

    3 reduce高阶函数

    // 3.reduce高阶函数
    //要求将newNums2的数组所有数累加
    //reduce函数同样会遍历数组每一项,传入回调函数和‘0’为参数,0表示回调函数中preValue初始值为0,回调函数中参数preValue是每一次回调函数function返回的值,currentValue是当前值
    //例如数组为[154, 110, 200, 400],则回调函数第一次返回值为0+154=154,第二次preValue为154,返回值为154+110=264,以此类推直到遍历完成
    let newNum = newNums2.reduce(function (preValue,currentValue) {
      return preValue + currentValue
     },0)
    //简写
    // let newNum = newNums2.reduce((preValue,currentValue) => preValue + currentValue)
    console.log(newNum);
    

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

    reduce() 可以作为一个高阶函数,用于函数的 compose。

    注意: reduce() 对于空数组是不会执行回调函数的。

    5.4综合使用

    //三个需求综合
    let n = nums.filter(num => num > 50).map(num => num * 2).reduce((preValue,currentValue) => preValue + currentValue)
    console.log(n);
    

  • 相关阅读:
    继承与多态
    欢迎来到vmax-tam的博客
    MySQL令人咋舌的隐式转换
    MySQL数据库SQL语句(高级进阶二,图文详解)
    深入浅出MySQL之索引为什么要下推?
    【推荐】开源项目ElasticAmbari助力 ElasticSearch、Kibana、ambari服务高效运维管理
    Java集合篇:Map集合的几种遍历方式及性能测试
    大厂Redis高并发场景设计,面试问的都在这!
    第八届“图灵杯”NEUQ-ACM程序设计竞赛(全题解&&详细)
    11个编程接单的网站,你有技术就有收入,有收入就有女朋友《男盆友》
  • 原文地址:https://www.cnblogs.com/NB01/p/14117191.html
Copyright © 2011-2022 走看看