什么是函数式编程，如何在 JavaScript 中实现它？

你：“嘿，我一直听说函数式编程。听起来很酷，但它到底是什么？它与我在 JavaScript 中所做的有什么不同？”

我：好问题！让我们一步步分解，并将函数式编程（FP）与传统的命令式方式编码进行比较。

---

？ 函数式和命令式有什么区别？

在命令式编程中，您编写关于如何做某事的分步说明。这都是关于任务的顺序——更新变量、使用循环和直接修改状态。

在函数式编程中，您专注于您想要做什么。您使用纯函数，避免直接突变，并利用映射、过滤器和化简等声明性工具。

让我们通过并排示例使用 CRUD（创建、读取、更新、删除）场景来管理用户列表来了解这一点。

---

?️ 示例 1：添加用户

命令式

这是一个命令式的例子，我们改变原始数组：

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

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

问题：

1. Mutation：push() 方法修改原始数组。
2. 副作用：如果代码的其他部分依赖于用户，它们可能会受到意外的影响。

---

功能方式

这是函数式方法，我们返回一个新数组而不是改变它：

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

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

好处：

1. 无突变：原始用户数组保持不变。
2. 可预测：纯函数可以轻松理解行为。

---

?️ 示例 2：更新用户

命令式

这是一个我们直接更改数组内对象的示例：

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

function updateUser(users, id, newName) {
  for (let i = 0; i < users.length; i++) {
    if (users[i].id === id) {
      users[i].name = newName; // Directly mutates the object
      break;
    }
  }
}

updateUser(users, 1, 'Alicia');
console.log(users);

问题：

1. Mutation：直接更新数组内的对象。
2. 详细程度：for 循环明确告诉计算机如何更新用户。

---

功能方式

以下是我们如何使用映射和不变性来实现它：

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

const updateUser = (users, id, newName) =>
  users.map(user =>
    user.id === id ? { ...user, name: newName } : user
  );

const updatedUsers = updateUser(users, 1, 'Alicia');
console.log('Original:', users);
console.log('Updated:', updatedUsers);

好处：

1. 无突变：我们返回一个新数组并保持原始数组不变。
2. 声明式：map 专注于我们想要的——转换数组——无需显式管理循环。

---

?️ 示例 3：删除用户

命令式

这是使用循环和直接修改的命令式版本：

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

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

问题：

1. 突变：splice() 修改原始数组。
2. 复杂性：手动循环使得阅读变得更加困难。

---

功能方式

使用过滤器，我们可以声明式地表达意图：

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

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

好处：

1. 无突变：过滤器创建一个新数组。
2. 干净且可读：代码清楚地传达了意图——保留除具有给定 ID 的用户之外的用户。

---

？ 汇总表：函数式与命令式

Aspect	Imperative	Functional
Data Mutation	Mutates the original data (e.g., push, splice)	Avoids mutation; creates new data structures
Readability	Step-by-step, more verbose	Declarative and concise
Side Effects	More prone to unexpected side effects	Pure functions eliminate side effects
Focus	How to achieve a task (manual looping)	What to achieve (use higher-order functions)
Tools Used	Loops, conditionals	map, filter, reduce, spread operator

方面

---

命令

功能性 标题> 数据突变

改变原始数据（例如，推送、拼接） 避免突变；创建新的数据结构

可读性

一步一步，更详细 声明式且简洁 副作用 更容易出现意想不到的副作用 纯函数消除副作用

焦点

如何完成任务（手动循环）

要实现什么（使用高阶函数） 使用的工具 循环、条件 映射、过滤、归约、展开运算符 表>

---

？ 为什么选择函数式编程？

您的代码变得更容易

推理和测试。 避免副作用可以降低出现错误的可能性。 更加简洁

和

陈述性，减轻精神负担。

你：“明白了！函数式编程侧重于编写可预测的、干净的代码而不改变数据。而且更容易阅读！” 我：没错！通过从命令式转变为功能性，您将释放JavaScript的真正力量。从小事做起——使用map、filter和reduce——很快你就会像专业人士一样进行功能编码。 准备好尝试了吗？未来的你会感谢你的！ ？

以上是什么是函数式编程，如何在 JavaScript 中实现它？的详细内容。更多信息请关注PHP中文网其他相关文章！