案例之高阶函数

一：普通的for循环

通过这个素组有三个需求

//1.需求：取出所有小于100的数字
  const nums = [10,20,111,222,444,40,5]
  let newNums = []
  for(let n of nums){
      if(n<100){
          newNums.push(n)
      }
  }

//2.将所有小于100的数字进行转化: 全部*2
  const nums = [10,20,111,222,444,40,5]
    let new2Nums = []
    for(let n of newNums){
        new2Nums.push(n*2)

    }
    console.log(new2Nums)

第一个和第二个需要一个空数组来添加求出来之后的数
第三个需要声明一个为0的变量来计算结果

  // 3.需求：将所有new2nums数字相加,得到最终的结果
const nums = [10,20,111,222,444,40,5]
let total = 0;
    for(let n of new2Nums){
        total += n
    }
console.log(total);

二：高阶函数是ES6里的内容

通过以下三个高阶函数方法将上面三个for循环简单化

filter/map/reduce
filter中的回调函数有一个要求: 必须返回一个boolean值
true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中
false: 当返回false时, 函数内部会过滤掉这次的n

/ 1.filter过滤函数的使用
  const nums = [10,20,111,222,444,40,5]
 let newNums = nums.filter(function(n){
    // return true
     return n<100
  })
console.log(newNums);

// 2.map映射函数的使用
  const nums = [10,20,111,222,444,40,5]
let new2Num = newNum.map(function (n){
    return n*2
})
    console.log(new2Nums);//值是20,40,80,100

// 3.reduce函数的使用（这个比较难）
 //reduce 作用对数字中所有的内容进行汇总
  const nums = [10,20,111,222,444,40,5]
  let total = new2Nums.reduce(function (preValue,n){
        return preValue + n
    },0)

  //根据回调函数一共调用四次
// 第一次: preValue 0    n 20    //第一次preValue 初始化值是0 ，n的值还是遍历的第一个值
// 第二次：preValue 20   n 40    //第二次preValue 值是上一次的值加上一次n的值  n的值还是遍历的第二个值
// 第三次：preValue 60   n 80    // 第三次preValue 值是上一次的值加上一次n的值，n的值还是遍历的第三个值
//第四次：preValue 140   n 100    // 第四次preValue 值是上一次的值加上一次n的值，n的值还是遍历的第四个值

三:将高阶函再简单化

第二的里面的案例，高阶函数可以进行连接得到的结果是相同的，实现再简单化

  const nums = [10,20,111,222,444,40,50]
    let total = nums.filter(function(n){
      return n<100
    }).map(function(n){
        return n*2
    }).reduce(function (prevValue,n){
        return prevValue + n
    },0)
    console.log(total);

四：箭头函数式写法

更简洁的写法

const nums = [10,20,111,222,444,40,50]
    let total = nums.filter(n=> n<100).map(n=>n*2).reduce((pre,n)=>pre+n);
    console.log(total);