掌握JavaScript高阶函数，让你的代码更灵活

前端达人

发布于 2024-07-31 17:27:14

1020

发布于 2024-07-31 17:27:14

文章被收录于专栏：前端达人

大家好，今天我们要聊聊一个超级实用的小技巧——高阶函数。别被这个高大上的名字吓到，其实它非常好理解，而且用好了，绝对能让你的代码更简洁、更高效。

首先，什么是高阶函数呢？简单来说，高阶函数就是可以把其他函数当作参数传进去，或者把函数作为结果返回的函数。听起来有点绕口，但这正是它的魔力所在！

高阶函数可以帮助我们写出更加模块化、可重用的代码。举个例子，如果你经常需要在代码里做一些重复性的操作，比如对数组里的每个元素做某种处理，有了高阶函数，我们可以把这些操作提取出来，写成一个通用的函数，然后在需要的时候直接调用。这样一来，不但减少了代码的重复，还让代码逻辑更加清晰。

接下来，我们将通过几个简单的小例子，手把手教你如何使用高阶函数，让你快速掌握这项技能。准备好了吗？让我们一起开启JavaScript高阶函数的魔法之旅吧！

如何理解高阶函数

为了让大家更容易理解，我用一个简单易懂的例子来说明高阶函数的应用：

假设我们要制作一份饮料菜单，菜单上的饮料可以是各种不同的类型，比如果汁、咖啡、奶茶等。我们先定义两个制作饮料的函数：

function makeJuice(size) {
  return `A cup of ${size} juice`;
}

function makeCoffee(size) {
  return `A cup of ${size} coffee`;
}

然后，我们定义一个高阶函数 orderDrink，它接受一个制作饮料的函数 makeDrink 和一个大小参数 size：

function orderDrink(makeDrink, size) {
  return makeDrink(size);
}

这样，我们就可以通过传递不同的制作饮料的函数和大小参数，来制作不同的饮料：

console.log(orderDrink(makeJuice, 'large'));  // 输出: A cup of large juice
console.log(orderDrink(makeCoffee, 'small')); // 输出: A cup of small coffee

在这个例子中，orderDrink 是一个高阶函数，它接受一个函数 makeDrink 和一个参数 size。orderDrink 调用 makeDrink，并传入 size 作为参数，然后返回制作好的饮料。我们定义了两个简单的函数 makeJuice 和 makeCoffee，分别制作果汁和咖啡。通过将这两个函数作为参数传递给 orderDrink，我们可以制作不同大小的饮料，而无需修改 orderDrink 函数本身。

这个例子展示了高阶函数的一个重要特性：代码复用性和可扩展性。我们只需要编写一次 orderDrink 函数，就可以通过传递不同的制作饮料的函数，实现多种不同的饮料制作方法。这在实际开发中非常有用，特别是当我们需要对某一类操作进行抽象和泛化时。

高阶函数的优势

抽象化：让代码更简洁

高阶函数可以帮助你将常见的模式和行为抽象出来，使代码更具可读性和简洁性。比如，我们常常需要对数组中的每个元素进行操作，如果每次都单独写一遍代码，会非常繁琐。通过高阶函数，我们可以把这些操作抽象成一个通用的函数，简化代码。

复用性：打造可复用的积木

通过将功能封装到高阶函数中，你可以创建出可复用的代码块。这样一来，不同的项目中你都可以轻松地使用这些函数，而不需要重复造轮子。例如，一个通用的排序函数，可以在不同的数据处理中复用，只需传入不同的排序逻辑。

模块化：分而治之

高阶函数提倡模块化编程方法，将复杂的任务分解成更小、更专注的函数。这样不仅使代码更易于理解和维护，还能提高开发效率。每个小函数只关注自己的任务，减少了相互之间的依赖。

灵活性：自由定制

高阶函数让你可以通过传递不同的回调函数，自由定制函数的行为，从而实现更大的灵活性和适应性。比如，你可以通过传入不同的回调函数，动态改变数据处理的方式，使代码更加适应不同的需求。

常用的高阶函数：让数组操作更简单

在 JavaScript 中，有很多内置的高阶函数，特别适用于数组的操作和转换。

Array.prototype.map

map 函数通过对原数组中的每个元素调用提供的回调函数，创建一个新数组。

例如，我们有一个包含学生成绩的数组，想要将每个成绩提升10分：

const grades = [70, 85, 90, 78, 92];
const improvedGrades = grades.map(grade => grade + 10);
console.log(improvedGrades);  // 输出: [80, 95, 100, 88, 102]

在这个例子中，map 被用来创建一个新数组 improvedGrades，通过对 grades 数组中的每个成绩加10分。回调函数 grade => grade + 10 被应用到每个元素上，结果存储在新数组的对应位置。

Array.prototype.filter

filter 函数通过检查数组中的每个元素，创建一个新数组，包含所有通过回调函数测试的元素。

例如，我们有一个年龄数组，想要筛选出所有成年人（18岁及以上）：

const ages = [12, 18, 25, 16, 30];
const adults = ages.filter(age => age >= 18);
console.log(adults);  // 输出: [18, 25, 30]

在这个例子中，filter 被用来创建一个新数组 adults，通过对 ages 数组中的每个年龄进行成年检查。回调函数 age => age >= 18 被应用到每个元素上，只有通过检查的元素才会被包含在新数组中。

Array.prototype.reduce

reduce 函数通过对数组中的每个元素执行一个提供的回调函数，将数组缩减为单个值。

例如，我们有一个商品价格数组，想要计算所有商品的总价：

const prices = [100, 200, 300, 400, 500];
const totalPrice = prices.reduce((total, price) => total + price, 0);
console.log(totalPrice);  // 输出: 1500

在这个例子中，reduce 被用来将 prices 数组缩减为一个单个值 totalPrice，通过对每个元素执行累加操作。回调函数 (total, price) => total + price 被应用到每个元素上，total 是累加器，price 是当前元素，初始值为 0。

自定义高阶函数

除了使用内置的高阶函数，你还可以创建自己的高阶函数来封装特定的行为或模式。这样可以让你的代码更具灵活性和可读性。我们通过一个简单的例子来展示如何创建自定义高阶函数。

自定义高阶函数示例

假设我们有一个数字数组，希望对数组中的每个数字进行某种转换操作。我们可以创建一个高阶函数 transformArray 来实现这个需求。

// 定义一个自定义高阶函数 transformArray
function transformArray(arr, transformFunc) {
  const transformedArray = [];  // 创建一个空数组用于存储转换后的结果
  for (let i = 0; i < arr.length; i++) {  // 遍历输入数组的每个元素
    transformedArray.push(transformFunc(arr[i]));  // 将转换后的元素添加到新数组中
  }
  return transformedArray;  // 返回转换后的新数组
}

// 定义一个数字数组
const numbers = [1, 2, 3, 4, 5];

// 使用 transformArray 函数将每个数字乘以 2
const doubledNumbers = transformArray(numbers, num => num * 2);

// 输出转换后的数组
console.log(doubledNumbers);  // 输出: [2, 4, 6, 8, 10]

在这个例子中，transformArray 是一个高阶函数，它接受一个数组 arr 和一个转换函数 transformFunc 作为参数。函数内部创建了一个新数组 transformedArray，通过对输入数组 arr 的每个元素应用 transformFunc，将转换后的结果存储在新数组中，最后返回新数组。

我们通过调用 transformArray，传入一个数字数组 numbers 和一个将数字乘以 2 的转换函数 num => num * 2，得到一个新的数组 doubledNumbers，其中包含了每个原始数字的两倍。