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

  • 相关阅读:
    2020/4/15
    2020/4/14
    2020/4/13
    2020/4/12
    2020/4/11
    2020/4/9
    PTA录入数据库题目流程
    PTA录题
    2020/4/8
    如何把mysql workbench的数据结构和数据导出到sql表中
  • 原文地址:https://www.cnblogs.com/NB01/p/14117191.html
Copyright © 2011-2022 走看看