JavaScript高阶函数

什么是高阶函数呢？

高阶函数源自于函数式编程。

编程范式： 命令式编程 / 声明式编程
编程范式： 面向对象编程（第一公民：对象） / 函数式编程 （第一公民：函数）
那么，JS作为一门“一切皆为对象”的语言，是如何拥有函数式编程的能力呢？
是因为在JS中函数是一等公民，即函数可以被赋值给变量，被变量引用，这便使得函数可以作为参数，在其他函数间相互传递。

简单来说就是函数本身需要的参数也是一个函数

看完以下案例 你就懂了：

现在有一个数组 外加3个需求，按照一般的做法是：

 <script>
    // 现有一个数组 
    const nums = [45, 78, 62, 89, 111, 33, 411, 555];

    // 1.需求：取出所有小于100的数字
    let newNums = []; // new 一个新的数组 然后遍历
    for (let n of nums) {
      if (n < 100) {
        newNums.push(n); // 追加到新数组
      }
    }
    console.log(newNums)

    // 2.需求 ：在1的需求之上 把每个数乘以2进行转化
    let newNums2 = [];
    for (let n of newNums) {
      newNums2.push(n * 2);
    }
    console.log(newNums2)

    // 3.需求 在需求二之上，把数组里的所有数相加 得出一个结果
    let total = 0;
    for (let n of newNums) {
      total += n;
    }
    console.log(total);
  </script>

是不是觉得很繁琐且不美观。那我们一起来学高阶函数吧

filter()

语法： array.filter(function(currentValue, indedx, arr), thisValue) 返回一个新的数组

• currentValue：必须。当前元素的值;
• index：可选。当前元素的索引值；
• arr：可选。当前元素属于的数组对象；
• thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
• 如果省略了 thisValue ，“this” 的值为 “undefined”。

  // n为数组中的数字
    nums.filter(function(n){
    })

filter()中的回调函数有一个要求，必须返回一个Boolean值，
true:当返回true时 函数内部会自动把这次回调的n加入新的数组中
false:当返回false时 函数内部自动把n过滤掉。

    // 1.需求：取出所有小于100的数字
    let newNums = nums.filter(function (n) {
      return n < 10;
    })

Map()

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

    // 2.需求 ：在1的需求之上 把每个数乘以2进行转化
    let newNums2 = newNums.map(function (n) {
      return n * 2;
    })

Reduce()

作用 对数组中的所有数进行汇总。

// 3.需求 在需求二之上，把数组里的所有数相加 得出一个结果
    let total = newNums2.reduce(function (preValue, n) {
      return preValue + n;
    }, 0)
    
    // 参数解析：
    /*          preValue : 上一次回调函数返回的值   
             n : 当前传入的值
             0 ： 上一次回调函数返回的值初始值 
             
             */

优化：

    let total = nums.filter(function (n) {
      return n < 100;
    }).map(function (n) {
      return n * 2;
    }).reduce(function (preValue, n) {
      return preValue + n;
    }, 0)

是不是觉得方便多了，，，但是它还不止于此

配合箭头函数的最终版：

    let total = nums.filter(n => n < 100).map(n => n * 1).reduce((pre, n) => pre + n);