纯函数和不可变数据是函数式编程的核心，确保相同输入始终返回相同输出且无副作用，避免状态混乱。通过使用如 map、filter、reduce 和扩展运算符等方法，每次更新都生成新值而非修改原数据，从而提升代码可读性、可维护性和可测试性，尤其适用于React等声明式框架中的状态管理。
在JavaScript中进行函数式编程，核心在于不可变数据和纯函数的使用。它们不仅能提升代码的可读性和可维护性，还能减少副作用带来的bug。下面通过实际场景说明如何应用这两个概念。
什么是纯函数？
纯函数是指：对于相同的输入，永远返回相同的输出，并且不产生任何副作用。这意味着它不会修改外部变量、不调用API、不操作DOM、不改变传入的参数。
例如：
纯函数示例：
function add(a, b) {
return a + b;
}
非纯函数示例：
let total = 0;
function addToTotal(num) {
total += num; // 修改了外部变量
return total;
}
为什么需要不可变数据？
JavaScript中的对象和数组是引用类型，直接修改会改变原数据，容易引发难以追踪的状态问题。使用不可变数据意味着每次更新都生成新值，而不是修改旧值。
常见操作方式：
- 用 spread语法 创建新数组或对象
- 使用 map、filter、reduce 等不改变原数组的方法
- 避免使用 push、splice、sort（原地排序） 等会修改原数组的方法
const users = [
{ id: 1, name: 'Alice', active: true },
{ id: 2, name: 'Bob', active: false }
];
// 正确做法：返回新数组，不修改原数据
function updateUser(id, updates) {
return users.map(user =>
user.id === id ? { ...user, ...updates } : user
);
}
const newUsers = updateUser(2, { active: true });
// users 保持不变，newUsers 是新的状态
结合纯函数与不可变数据处理表单
在React等声明式框架中，这种模式尤其有用。假设有一个嵌套表单状态：
const formState = {
name: '',
address: { city: '', zip: '' }
};
要更新city，写一个纯函数：
function updateCity(value) {
return {
...formState,
address: { ...formState.address, city: value }
};
}
每次调用都返回新的状态对象，原状态不受影响，便于做状态回退、时间旅行调试等高级功能。
小技巧：用Object.freeze辅助检测意外修改
虽然不能完全防止篡改，但可以在开发阶段帮助发现副作用：
function withFreeze(obj) {
return Object.freeze(JSON.parse(JSON.stringify(obj)));
}
const frozenData = withFreeze(users);
// 如果尝试修改，严格模式下会报错
基本上就这些。坚持使用纯函数和不可变数据结构，会让逻辑更清晰，测试更容易，状态更可控。不复杂但容易忽略。
