你：“嘿，我一直听说函数式编程。听起来很酷，但它到底是什么？它与我在 JavaScript 中所做的有什么不同？”
我：好问题！让我们一步步分解，并将函数式编程（FP）与传统的命令式方式编码进行比较。
在命令式编程中，您编写关于如何做某事的分步说明。这都是关于任务的顺序——更新变量、使用循环和直接修改状态。
在函数式编程中，您专注于您想要做什么。您使用纯函数，避免直接突变，并利用映射、过滤器和化简等声明性工具。
让我们通过并排示例使用 CRUD（创建、读取、更新、删除）场景来管理用户列表来了解这一点。
这是一个命令式的例子，我们改变原始数组：
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);
问题：
这是函数式方法，我们返回一个新数组而不是改变它：
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);
好处：
这是一个我们直接更改数组内对象的示例：
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);
问题：
以下是我们如何使用映射和不变性来实现它：
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);
好处：
这是使用循环和直接修改的命令式版本：
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);
问题：
使用过滤器，我们可以声明式地表达意图：
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);
好处：
| 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 中实现它？的详细内容。更多信息请关注PHP中文网其他相关文章！
