使用 JavaScript 数组掌握函数式编程

在不断发展的 Web 开发领域中，JavaScript 仍然是基石。虽然面向对象和命令式编程范例长期占据主导地位，但函数式编程 (FP) 正在获得显着的关注。 FP 强调不可变性、纯函数和声明式代码，从而产生更健壮、更易于维护和更可预测的应用程序。在 JavaScript 中拥抱函数式编程的最强大方法之一是利用其原生数组方法。

本综合指南将深入探讨如何使用 JavaScript 数组利用函数式编程原则的力量。我们将探索关键概念，并演示如何使用 map、filter 和 reduce 等方法来应用它们，从而改变您处理数据的方式。

什么是函数式编程？

在深入研究 JavaScript 数组之前，我们先简要定义一下函数式编程。它的核心是，FP 是一种编程范例，它将计算视为数学函数的求值，并避免改变状态和可变数据。主要原则包括：

纯函数： 纯函数始终为相同的输入生成相同的输出，并且没有副作用（它不修改外部状态）。
不可变性： 数据一旦创建就不能更改。而是创建具有所需更改的新数据，而不是修改现有数据。
一等函数： 函数可以像任何其他变量一样对待 - 它们可以分配给变量，作为参数传递给其他函数，并从函数返回。
声明式与命令式： 函数式编程倾向于声明式风格，您可以在其中描述您*想要*实现的目标，而不是详细说明*如何*逐步实现它。

采用这些原则可以使代码更易于推理、测试和调试，尤其是在复杂的应用程序中。 JavaScript 的数组方法非常适合实现这些概念。

JavaScript 数组方法的力量

JavaScript 数组配备了丰富的内置方法，这些方法允许进行复杂的数据操作，而无需诉诸传统的循环（如 for 或 while）。这些方法通常返回新数组，从而促进不可变性，并接受回调函数，从而实现函数式方法。

让我们探讨最基本的函数式数组方法：

1. `Array.prototype.map()`

map() 方法创建一个新数组，该数组由在调用数组中的每个元素上调用提供的函数的结果填充。它非常适合将数组的每个元素转换为新的内容。

语法：

array.map(callback(currentValue[, index[, array]])[, thisArg])

callback：要对每个元素执行的函数。
currentValue：正在处理的当前元素在数组中。
index（可选）：正在处理的当前元素的索引。
array（可选）：调用 map 的数组。
thisArg（可选）：在执行 callback 时用作 this 的值。

主要特征：

返回一个新数组。
原始数组保持不变（不可变性）。
新数组将具有与原始数组相同的长度。
回调函数应为每个元素返回转换后的值。

示例：将每个数字加倍

假设您有一个数字数组，并且想要创建一个新数组，其中每个数字都加倍。

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

// 使用 map 进行转换
const doubledNumbers = numbers.map(number => number * 2);

console.log(numbers); // 输出：[1, 2, 3, 4, 5]（原始数组保持不变）
console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]

示例：从对象中提取属性

一个常见的用例是从对象数组中提取特定属性。假设我们有一个用户列表，并且只想获取他们的姓名。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const userNames = users.map(user => user.name);

console.log(userNames); // 输出：['Alice', 'Bob', 'Charlie']

2. `Array.prototype.filter()`

filter() 方法创建一个新数组，其中包含通过提供的函数实现的测试的所有元素。它用于根据条件选择元素。

语法：

array.filter(callback(element[, index[, array]])[, thisArg])

callback：要对每个元素执行的函数。它应返回 true 以保留该元素，或返回 false 以丢弃该元素。
element：正在处理的当前元素在数组中。
index（可选）：当前元素的索引。
array（可选）：调用 filter 的数组。
thisArg（可选）：在执行 callback 时用作 this 的值。

主要特征：

返回一个新数组。
原始数组保持不变（不可变性）。
新数组可能比原始数组具有更少的元素。
回调函数必须返回一个布尔值。

示例：过滤偶数

让我们过滤数字数组，仅保留偶数。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 使用 filter 选择偶数
const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(numbers); // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(evenNumbers); // 输出：[2, 4, 6, 8, 10]

示例：过滤活动用户

从我们的用户数组中，让我们过滤掉被标记为活动的用户。

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true },
  { id: 4, name: 'David', isActive: false }
];

const activeUsers = users.filter(user => user.isActive);

console.log(activeUsers); 
/* 输出：
[
  { id: 1, name: 'Alice', isActive: true },
  { id: 3, name: 'Charlie', isActive: true }
]
*/

3. `Array.prototype.reduce()`

reduce() 方法在数组的每个元素上按顺序执行用户提供的“reducer”回调函数，传入来自前一个元素上的计算的返回值。在数组的所有元素上运行 reducer 后的最终结果是一个值。

这可以说是数组方法中最通用的，并且是许多函数式编程模式的基石，它允许您将数组“规约”为单个值（例如，总和、乘积、计数，甚至新对象或数组）。

语法：

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback：要对每个元素执行的函数。
accumulator：从对回调函数的先前调用中产生的值。在第一次调用时，它是 initialValue（如果已提供）；否则，它是数组的第一个元素。
currentValue：正在处理的当前元素。
index（可选）：当前元素的索引。
array（可选）：调用 reduce 的数组。
initialValue（可选）：用作对 callback 的第一次调用的第一个参数的值。如果未提供 initialValue，则数组中的第一个元素将用作初始 accumulator 值，并且迭代从第二个元素开始。

主要特征：

返回一个单一值（也可以是数组或对象）。
原始数组保持不变（不可变性）。
initialValue 对于清晰度和避免错误至关重要，尤其是在空数组或累加器类型与数组元素类型不同时。

示例：对数字求和

让我们对数组中的所有数字求和。

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

// 使用 reduce 对数字求和
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 0 是 initialValue

console.log(sum); // 输出：15

说明：

调用 1：accumulator 为 0，currentValue 为 1。返回 0 + 1 = 1。
调用 2：accumulator 为 1，currentValue 为 2。返回 1 + 2 = 3。
调用 3：accumulator 为 3，currentValue 为 3。返回 3 + 3 = 6。
依此类推，直到计算出最终总和。

示例：按属性分组对象

我们可以使用 reduce 将对象数组转换为一个对象，其中值按特定属性分组。让我们根据用户的 `isActive` 状态对用户进行分组。

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true },
  { id: 4, name: 'David', isActive: false }
];

const groupedUsers = users.reduce((acc, user) => {
  const status = user.isActive ? 'active' : 'inactive';
  if (!acc[status]) {
    acc[status] = [];
  }
  acc[status].push(user);
  return acc;
}, {}); // 空对象 {} 是 initialValue

console.log(groupedUsers);
/* 输出：
{
  active: [
    { id: 1, name: 'Alice', isActive: true },
    { id: 3, name: 'Charlie', isActive: true }
  ],
  inactive: [
    { id: 2, name: 'Bob', isActive: false },
    { id: 4, name: 'David', isActive: false }
  ]
}
*/

示例：计算出现次数

让我们计算列表中每个水果的频率。

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const fruitCounts = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log(fruitCounts); // 输出：{ apple: 3, banana: 2, orange: 1 }

4. `Array.prototype.forEach()`

虽然 forEach() 不会返回新数组，并且通常被认为更具命令性，因为它主要用于为每个数组元素执行一个函数，但它仍然是一种在函数式模式中发挥作用的基本方法，尤其是在需要副作用或需要迭代而不需要转换后的输出时。

语法：

array.forEach(callback(element[, index[, array]])[, thisArg])

主要特征：

返回 undefined。
为每个数组元素执行一次提供的函数。
通常用于副作用，例如记录到控制台或更新 DOM 元素。

示例：记录每个元素

const messages = ['Hello', 'Functional', 'World'];

messages.forEach(message => console.log(message));
// 输出：
// Hello
// Functional
// World

注意：对于转换和过滤，由于其不可变性和声明性，首选 map 和 filter。当您特别需要在不将结果收集到新结构中的情况下为每个项目执行操作时，请使用 forEach。

5. `Array.prototype.find()` 和 `Array.prototype.findIndex()`

这些方法对于定位数组中的特定元素很有用。

find()：返回提供的数组中满足提供的测试函数的第一个元素的值。如果没有值满足测试函数，则返回 undefined。
findIndex()：返回提供的数组中满足提供的测试函数的第一个元素的索引。否则，它返回 -1，表示没有元素通过测试。

示例：查找用户

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const bob = users.find(user => user.name === 'Bob');
const bobIndex = users.findIndex(user => user.name === 'Bob');
const nonExistentUser = users.find(user => user.name === 'David');
const nonExistentIndex = users.findIndex(user => user.name === 'David');

console.log(bob); // 输出：{ id: 2, name: 'Bob' }
console.log(bobIndex); // 输出：1
console.log(nonExistentUser); // 输出：undefined
console.log(nonExistentIndex); // 输出：-1

6. `Array.prototype.some()` 和 `Array.prototype.every()`

这些方法测试数组中的所有元素是否通过提供的函数实现的测试。

some()：测试数组中是否至少有一个元素通过提供的函数实现的测试。它返回一个布尔值。
every()：测试数组中的所有元素是否通过提供的函数实现的测试。它返回一个布尔值。

示例：检查用户状态

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true }
];

const hasInactiveUser = users.some(user => !user.isActive);
const allAreActive = users.every(user => user.isActive);

console.log(hasInactiveUser); // 输出：true（因为 Bob 已停用）
console.log(allAreActive); // 输出：false（因为 Bob 已停用）

const allUsersActive = users.filter(user => user.isActive).length === users.length;
console.log(allUsersActive); // 输出：false

// 使用 every 直接代替
const allUsersActiveDirect = users.every(user => user.isActive);
console.log(allUsersActiveDirect); // 输出：false

链接数组方法进行复杂操作

使用 JavaScript 数组进行函数式编程的真正力量在于将这些方法链接在一起。由于大多数这些方法都返回新数组（forEach 除外），因此您可以将一个方法的输出无缝地传递到另一个方法的输入中，从而创建简洁且可读的数据管道。

示例：查找活动用户名并将其 ID 加倍

让我们找到所有活动用户，提取他们的姓名，然后创建一个新数组，其中每个姓名都以一个数字作为前缀，表示其在 *过滤后* 的列表中的索引，并且其 ID 已加倍。

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true },
  { id: 4, name: 'David', isActive: true },
  { id: 5, name: 'Eve', isActive: false }
];

const processedActiveUsers = users
  .filter(user => user.isActive) // 仅获取活动用户
  .map((user, index) => ({      // 转换每个活动用户
    name: `${index + 1}. ${user.name}`,
    doubledId: user.id * 2
  }));

console.log(processedActiveUsers);
/* 输出：
[
  { name: '1. Alice', doubledId: 2 },
  { name: '2. Charlie', doubledId: 6 },
  { name: '3. David', doubledId: 8 }
]
*/

这种链接方法是声明式的：我们指定了步骤（filter，然后是 map），而没有显式循环管理。它也是不可变的，因为每个步骤都会生成一个新的数组或对象，而原始 users 数组保持不变。

实践中的不可变性

函数式编程严重依赖于不可变性。这意味着，您将创建新的数据结构来代替修改现有的数据结构，其中包含所需的更改。 JavaScript 的数组方法（如 map、filter 和 slice）通过返回新数组固有地支持这一点。

为什么不可变性很重要？

可预测性： 代码变得更容易推理，因为您不必跟踪对共享可变状态的更改。
调试： 发生错误时，当数据未被意外修改时，更容易查明问题的根源。
性能： 在某些情况下（例如与 Redux 等状态管理库或 React 一起），不可变性允许高效的更改检测。
并发： 不可变数据结构本质上是线程安全的，简化了并发编程。

当您需要执行传统上会改变数组的操作（例如添加或删除元素）时，您可以使用 slice 方法、扩展语法 (...) 或组合其他函数式方法来实现不可变性。

示例：不可变地添加元素

const originalArray = [1, 2, 3];

// 命令式方法（改变 originalArray）
// originalArray.push(4);

// 使用扩展语法的函数式方法
const newArrayWithPush = [...originalArray, 4];
console.log(originalArray); // 输出：[1, 2, 3]
console.log(newArrayWithPush); // 输出：[1, 2, 3, 4]

// 使用 slice 和连接的函数式方法（现在不常见）
const newArrayWithSlice = originalArray.slice(0, originalArray.length).concat(4);
console.log(newArrayWithSlice); // 输出：[1, 2, 3, 4]

示例：不可变地删除元素

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

// 删除索引为 2 的元素（值 3）

// 使用 slice 和扩展语法的函数式方法
const newArrayAfterSplice = [
  ...originalArray.slice(0, 2),
  ...originalArray.slice(3)
];
console.log(originalArray); // 输出：[1, 2, 3, 4, 5]
console.log(newArrayAfterSplice); // 输出：[1, 2, 4, 5]

// 使用 filter 删除特定值
const newValueToRemove = 3;
const arrayWithoutValue = originalArray.filter(item => item !== newValueToRemove);
console.log(arrayWithoutValue); // 输出：[1, 2, 4, 5]

最佳实践和高级技术

当您开始熟悉函数式数组方法时，请考虑这些做法：

可读性优先： 虽然链接功能强大，但过长的链可能变得难以阅读。考虑将复杂操作分解为更小、命名的函数或使用中间变量。
了解 `reduce` 的灵活性： 记住 reduce 可以构建数组或对象，而不仅仅是单个值。这使得它对于复杂转换来说非常通用。
避免回调中的副作用： 努力保持您的 map、filter 和 reduce 回调纯粹。如果您需要执行具有副作用的操作，forEach 通常是更合适的选择。
使用箭头函数： 箭头函数 (=>) 为回调函数提供了简洁的语法，并以不同的方式处理 `this` 绑定，通常使它们成为函数式数组方法的理想选择。
考虑库： 对于更高级的函数式编程模式，或者如果您广泛使用不可变性，Lodash/fp、Ramda 或 Immutable.js 等库可能会有所帮助，尽管它们对于开始使用现代 JavaScript 中的函数式数组操作来说并不是绝对必要的。

示例：数据聚合的函数式方法

假设您有来自不同地区的销售数据，并且希望计算每个地区的总销售额，然后找到销售额最高的地区。

const salesData = [
  { region: 'North', amount: 100 },
  { region: 'South', amount: 150 },
  { region: 'North', amount: 120 },
  { region: 'East', amount: 200 },
  { region: 'South', amount: 180 },
  { region: 'North', amount: 90 }
];

// 1. 使用 reduce 计算每个地区的总销售额
const salesByRegion = salesData.reduce((acc, sale) => {
  acc[sale.region] = (acc[sale.region] || 0) + sale.amount;
  return acc;
}, {});

// salesByRegion 将是：{ North: 310, South: 330, East: 200 }

// 2. 将聚合对象转换为对象数组以进行进一步处理
const salesArray = Object.keys(salesByRegion).map(region => ({
  region: region,
  totalAmount: salesByRegion[region]
}));

// salesArray 将是：[
//   { region: 'North', totalAmount: 310 },
//   { region: 'South', totalAmount: 330 },
//   { region: 'East', totalAmount: 200 }
// ]

// 3. 使用 reduce 查找销售额最高的地区
const highestSalesRegion = salesArray.reduce((max, current) => {
  return current.totalAmount > max.totalAmount ? current : max;
}, { region: '', totalAmount: -Infinity }); // 初始化一个非常小的数字

console.log('按地区的销售额：', salesByRegion);
console.log('销售数组：', salesArray);
console.log('销售额最高的地区：', highestSalesRegion);

/*
输出：
按地区的销售额：{ North: 310, South: 330, East: 200 }
销售数组：[
  { region: 'North', totalAmount: 310 },
  { region: 'South', totalAmount: 330 },
  { region: 'East', totalAmount: 200 }
]
销售额最高的地区：{ region: 'South', totalAmount: 330 }
*/

结论

使用 JavaScript 数组进行函数式编程不仅仅是一种风格上的选择；这是一种编写更清晰、更可预测和更健壮的代码的强大方法。通过接受 map、filter 和 reduce 等方法，您可以有效地转换、查询和聚合数据，同时遵守函数式编程的核心原则，特别是不可变性和纯函数。

当您继续在 JavaScript 开发之旅中探索时，将这些函数式模式集成到您的日常工作流程中无疑将带来更易于维护和可扩展的应用程序。首先在您的项目中试验这些数组方法，您很快就会发现它们巨大的价值。

使用 JavaScript 数组掌握函数式编程

什么是函数式编程？

JavaScript 数组方法的力量

1. Array.prototype.map()

语法：

主要特征：

示例：将每个数字加倍

示例：从对象中提取属性

2. Array.prototype.filter()

语法：

主要特征：

示例：过滤偶数

示例：过滤活动用户

3. Array.prototype.reduce()

语法：

主要特征：

示例：对数字求和

示例：按属性分组对象

示例：计算出现次数

4. Array.prototype.forEach()

语法：

主要特征：

示例：记录每个元素

5. Array.prototype.find() 和 Array.prototype.findIndex()

示例：查找用户

6. Array.prototype.some() 和 Array.prototype.every()

示例：检查用户状态

链接数组方法进行复杂操作

示例：查找活动用户名并将其 ID 加倍

实践中的不可变性

示例：不可变地添加元素

示例：不可变地删除元素

最佳实践和高级技术

示例：数据聚合的函数式方法

结论

1. `Array.prototype.map()`

2. `Array.prototype.filter()`

3. `Array.prototype.reduce()`

4. `Array.prototype.forEach()`

5. `Array.prototype.find()` 和 `Array.prototype.findIndex()`

6. `Array.prototype.some()` 和 `Array.prototype.every()`