使用高阶函数：让你的 JS 代码更牛更有范

什么是高阶函数？

首先，高阶函数的确切含义是：比典型函数更高的抽象级别。它是对其他函数执行操作的函数。在此定义中，操作可能意味着将一个或多个函数作为参数，或者将一个函数作为结果返回。 你不必同时做这两个事情。进行一项或多项操作即可将功能视为高阶功能。

示例

如果没有高阶函数，要在数组中的每个数字上加1 并在控制台中显示它，则可以执行以下操作：

const numbers = [1, 2, 3, 4, 5];

function addOne(array) {
  for (let i = 0; i < array.length; i++) {
    console.log(array[i] + 1);
  }
}

addOne(numbers);

上面代码中函数 addOne（）接受一个数组，将1和数组中的每个数字相加，并将其显示在控制台中。原始值在数组中保持不变，但是该函数正在为数组中的每个值做一些事情。

但是，使用最常见的高阶函数forEach（），我们可以简化此过程：

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => console.log(number + 1));

哇！

我们已经将上面原始代码中的函数定义和调用抽象为一行!

我们将forEach()应用于名为“numbers”的数组。forEach()开头有一个匿名函数，它一次接受数组中的一个元素。对于名为numbers的数组，将数组中的每个元素命名为“number”是有意义的，尽管我们可以将其命名为“element”或“el”，甚至是“whatever”。

接着，匿名箭头函数将数字+ 1的值输出到控制台。

同样地，高阶函数forEach()将函数应用于数组的每个元素。

另一个高阶函数示例

如果没有更高阶函数，如果我想创建一个新的数组，只有奇数的数字数组，我可以做以下工作:

const numbers = [1, 2, 3, 4, 5];

function isOdd(array, oddArr = []) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] % 2 !== 0) {
      oddArr.push(array[i]);
    }
  }
  return oddArr;
}

const oddArray = isOdd(numbers);
console.log(oddArray);

上面代码中，函数isOdd()接受一个数组，并有第二个可选的数组形参。如果未提供，则该数组的默认值为空数组。

该函数检查数组中的每个数字，看它是否是奇数。如果数字是奇数，则将其从第二个形参添加到数组中。检查完所有数字后，返回第二个参数的数组。

如果使用高阶函数 filter()，可以这么写：

const numbers = [1, 2, 3, 4, 5];

const oddArray = numbers.filter((number) => number % 2 !== 0);
console.log(oddArray);

🤩

代码上是不是精简了很多！

上面代码中首先定义新的数组oddArray，因为应用filter()将创建一个新数组。高阶函数将返回满足匿名函数中设置的条件的每个元素。匿名函数再次应用于numbers数组中的每个元素。

再接再厉，举一反三

我们已经讲了这么多，我想你已经开始明白为什么高阶函数这么好了!

让我们来看另一个例子……

回到我们的forEach()示例中，我们向数组中的每个数字添加1，并将每个值输出到控制台。但如果用这些新值来创建一个新数组呢?没有高阶函数，我可以这样做:

const numbers = [1, 2, 3, 4, 5];

function addOneMore(array, newArr = []) {
  for (let i = 0; i < array.length; i++) {
    newArr.push(array[i] + 1);
  }
  return newArr;
}

const newArray = addOneMore(numbers);
console.log(newArray);

上面代码中函数addOneMore()再次接受一个数组，并将数组作为第二个参数，该参数的默认值为空。将1添加到现有numbers数组的每个元素中，并将结果推入返回的新数组。

现在我们用高阶函数map()来抽象上面的代码:

const numbers = [1, 2, 3, 4, 5];

const newArray = numbers.map((number) => number + 1);
console.log(numbers);

上面代码中首先定义newArray，因为map()创建了一个新数组。与forEach()类似，map()对numbers数组的每个元素应用匿名函数。然而，map()在进程中创建了一个新数组。

进一步

如果我们想要找到numbers数组中所有值的总和，该怎么办?

没有高阶函数，我可以这样做：

const numbers = [1, 2, 3, 4, 5];

function getTotalValue(array) {
  let total = 0;
  for (let i = 0; i < array.length; i++) {
    total += array[i];
  }
  return total;
}

const totalValue = getTotalValue(numbers);
console.log(totalValue);

上面代码中函数getTotalValue()接受一个数组，将total变量定义为等于0，并在将每个元素添加到total变量时遍历数组。最后，它返回总数。

现在使用高阶的reduce()函数，这个过程可以再次被抽象出来:

const numbers = [1, 2, 3, 4, 5];

const totalValue = numbers.reduce((sum, number) => sum + number);
console.log(totalValue);

上面代码中高阶函数reduce()在内部的匿名函数中需要两个参数。

第一个参数是累加器，第二个参数是numbers数组中的元素。

accumulator参数(上面示例中的sum)跟踪总数，因为reduce()将匿名函数应用到数组的每个元素。

总结

高阶函数为函数提供了更高层次的抽象。它们有可能将您的JavaScript代码带到新的高度!