彻底搞懂Javascript高阶函数

JavaScript高阶指的是函数能够处理函数作为参数或返回一个函数。因为函数在JavaScript中是一等公民，所以它们可以像其他数据类型一样在程序中使用，这就使得JavaScript具备了作为一种函数式编程语言的特征。

高阶函数可以极大地简化一些复杂的任务，比如列表排序、数组过滤、操作DOM等等。除此之外，高阶函数还可用于实现某些设计模式（例如模板模式和观察者模式）。

下面举几个例子来说明JavaScript高阶函数的用法。

Map函数

Map函数是一种常见的高阶函数，它接受一个函数作为参数并返回一个新数组。这个新数组的元素是原始数组中每个元素经过函数处理后的结果。

例如，以下代码使用Map函数将数组中的每个元素进行平方处理：

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(x => x * x);
console.log(squaredNumbers);  // [1, 4, 9, 16, 25]

上面的代码中，我们定义了一个名为numbers的包含一些数字的数组。然后我们使用Map函数将这个数组中的每个元素平方，并将结果存储在名为squaredNumbers的新数组中。

Filter函数

Filter函数是另一种广泛使用的高阶函数。它接受一个返回一个布尔值的函数作为参数，并返回一个新数组，新数组中的元素是原始数组中那些符合指定条件的元素。

下面的代码使用Filter函数从数组中筛选出所有大于2的元素：

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(x => x > 2);
console.log(filteredNumbers);  // [3, 4, 5]

Reduce函数

Reduce函数是一种强大的高阶函数，它接受一个函数作为参数，并将原始数组中的所有元素按照指定的方式归约为一个值。这个函数通常接受两个参数：第一个参数是前一项的值，第二个参数是当前项的值。

下面的代码使用Reduce函数将数组中所有元素相加，并返回结果：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((prev, curr) => prev + curr);
console.log(sum);  // 15

函数柯里化

函数柯里化是一种将函数转换成可以接受一个参数并返回一个新函数的技术。这种技术通常用于创建可以复用的部分应用函数。

下面的代码演示了如何通过函数柯里化将一个函数转换成另一个函数：

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(3));  // 6

上面的代码中，我们定义了一个名为multiply的函数，它接受两个参数并返回相乘后的结果。然后，我们使用Bind函数创建了一个名为double的新函数，这个新函数固定了第一个参数为2。当我们调用double函数时，它实际上是调用了multiply函数，并将2作为第一个参数传递给它。

函数组合

函数组合是一种将多个函数组合成一个函数的技术。这种技术通常用于将多个处理过程串联起来，并使其成为一个更高级别的抽象。

以下代码演示了如何将多个函数组合成一个函数：

function addOne(x) {
  return x + 1;
}

function multiplyTwo(x) {
  return x * 2;
}

const addOneAndMultiplyTwo = x => multiplyTwo(addOne(x));
console.log(addOneAndMultiplyTwo(2));  // 6

上面的代码中，我们定义了两个函数addOne和multiplyTwo，并使用箭头函数将它们组合起来创建了一个新函数addOneAndMultiplyTwo。当我们调用这个新函数时，它会先将参数加1，然后将结果乘2，最终返回结果6。

Partial函数

Partial函数是一种将一个函数转换成另一个接受部分参数的函数的技术。这种技术通常用于创建可以复用的部分应用函数。

以下代码演示了如何通过Partial函数将一个函数转换成另一个接受部分参数的函数：

function add(a, b, c) {
  return a + b + c;
}

const add10 = add.bind(null, 10);
console.log(add10(5, 2));  // 17

上面的代码中，我们定义了一个名为add的函数，它接受三个参数并返回三个参数之和。然后，我们使用Bind函数创建了一个名为add10的新函数，这个新函数固定了第一个参数为10。当我们调用add10函数时，它实际上是调用了add函数，并将10作为第一个参数传递给它。

Currying

Currying是一种将一个函数转换成一系列嵌套的函数的技术。这种技术通常用于创建一个接受多个参数的函数，使得我们可以逐个传递这些参数。

以下代码演示了如何通过Currying将一个函数转换成一系列嵌套的函数：

function add(a) {
  return function(b) {
    return a + b;
  }
}

const add5 = add(5);
console.log(add5(3));  // 8

上面的代码中，我们定义了一个名为add的函数，它接受一个参数并返回另一个函数。返回的函数也接受一个参数，并将两个参数相加后返回。然后我们调用add函数并传递一个参数5，并将返回的函数存储在add5变量中。最终，我们调用add5函数并传递一个参数3，并将结果打印在控制台上。

Compose函数

Compose函数是一种将多个函数组合成一个函数的技术。这种技术通常用于将多个处理过程串联起来，并使其成为一个更高级别的抽象。

以下代码演示了如何将多个函数组合成一个函数：

function addOne(x) {
  return x + 1;
}

function multiplyTwo(x) {
  return x * 2;
}

const compose = (f, g) => x => f(g(x));
const addOneAndMultiplyTwo = compose(multiplyTwo, addOne);

console.log(addOneAndMultiplyTwo(2));  // 6

上面的代码中，我们定义了两个函数addOne和multiplyTwo，并定义了一个Compose函数，它接受两个函数作为参数并返回一个新函数，新函数将接受一个参数并将其逐个传递给它们。最后，我们使用Compose函数将addOne和multiplyTwo组合起来创建了一个新函数addOneAndMultiplyTwo。当我们调用这个新函数时，它会先将参数加1，然后将结果乘2，最终返回结果6。

Debounce函数

Debounce函数是一种将一个函数包装成具有消除重复调用的效果的函数的技术。这种技术通常用于在用户频繁触发事件的情况下，减少程序的运算量。

以下代码演示了如何通过Debounce函数将一个函数包装成具有消除重复调用的效果的函数：

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

function onResize() {
  console.log('Window is resizing.');
}

window.addEventListener('resize', debounce(onResize, 100));

上面的代码中，我们定义了一个名为debounce的函数，它接受一个函数和时间间隔作为参数，并返回一个新的函数。这个新函数将在等待时间过后被调用，而在此期间任何调用都不会执行。我们将这个函数应用于window对象的resize事件上，这样在用户频繁调整窗口大小时，程序只会在停止调整大小100毫秒后才运行。

总结

JavaScript高阶函数是一种强大的抽象工具，有助于简化我们的代码并提高代码可读性。它们提供了一系列强大的技术，包括Map、Filter、Reduce、函数柯里化、函数组合、Partial函数、Currying和Debounce函数等。无论你是一名初学者还是一个经验丰富的开发人员，理解和掌握这些技术都将帮助你更高效地编写JavaScript代码。