基础概念

高阶函数英文全称 Higher-Order Function。JavaScript 中函数式一等公民，即变量可以指向函数，而函数又能接受变量。当一个函数接受另一个函数作为参数或者将函数作为返回值进行返回，我们就成这样的函数为高阶函数。

简单的高阶函数形如：

  1. // 函数作为参数进行传递
  2. function add(x, y, fn) {
  3.     return fn(x) + fn(y);
  4. }
  6. // 当调用 add(-5, 6, Math.abs) 时，参数 x，y 和 fn 分别接收 -5，6 和函数 Math.abs，根据函数定义，可以推导计算过程为：
  7. // x = -5;
  8. // y = 6;
  9. // fn = Math.abs;
  10. // fn(x) + fn(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
  11. // return 11;
  13. // 测试代码
  14. add(-5, 6, Math.abs); // 11
  15. add(-5, -16, Math.abs); // 21
  1. // 函数作为返回值进行返回
  2. function add(x) {
  3.   return function(y) {
  4.     return x + y;
  5.   }
  6. }
  8. // 当调用 add(5)(10) 时，add(5) 会先执行并返回 function(y) {return x + y}，接下来就会执行 add(5)(10)
  9. // 即可推到为 function(y) {return x + y}(10) 
  10. // 此时由于作用域和引用的原因 x = 5
  11. // y 自然而然就是 10
  12. // 最后 return 5 + 10 => return 15;
  14. // 测试代码
  15. add(5)(10); //15

使用场景

高阶函数的使用场景有很多，这里我们主要说的是回调函数式，其他的什么偏函数、currying（柯里化）等其他形式将在单独的知识库进行讲解，敬请期待！

接下来，我们将提两个 JavaScript Array 里面的方法。其他还有许多类似的方法，大家可以去探究。

  • Array.prototype.map
  1. const arr = [1, 2, 3, 4];
  2. arr.map(a => a * 2);  // [2, 4, 6, 8]

Array.prototype.map 作为一个高阶函数，接受一个包含接受数组每个元素为参数的函数，函数中包含可以是任何对数组每个元素进行处理的逻辑（当然，每个数组元素的处理逻辑都是一样的），最后返回一个新的数组。

  • Array.prototype.reduce
  1. const arr = [1, 2, 3, 4];
  2. arr.reduce((count, item) => count += item, 0) // 10

Array.prototype.reduce 作为一个高阶函数，会接受两个参数，第一个参数是一个函数，第二个参数是第一个参数即函数的第一个接受参数的初始值。

在这里的实例代码中，我们通过 reduce 高阶函数对 arr 数组中的每个元素进行遍历，并将值传给回调函数的第二个参数。在回调函数中将传入的值和回调函数接受的第一个参数进行累加并返回，结果继续和序列的下一个元素做累积计算。

总结

首先我们讲解了高阶函数是由于 JavaScript 函数是一等公民的特性衍生出来的。高阶函数接受另一个函数作为参数或者将函数作为返回值进行返回。然后我们给出了高阶函数两种模式的代码实例。在第二个部分，我们主要举了两个数组方法对回调函数模式的高阶函数的使用。

其实高阶函数并没有想象中的那么高深，只是普通函数模式的一种增强形式罢了。

高阶函数在我们的日常开发中使用得非常广泛，随处可见高阶函数的编码形式，比如 currying（柯里化）、函数防抖节流、函数式编程等等。今天咱们只是了解了基本的定义和简单的用法。关于高阶函数的深入和应用，在以后的学习中，将会不断的探索！