纯函数指相同输入始终返回相同输出且无副作用，如add(a,b)；依赖外部变量的函数非纯。不可变数据要求不修改原始对象或数组，而是通过展开运算符等创建新数据，避免状态混乱。例如更新用户年龄时，应使用map和解构生成新数组而非修改原数组。结合二者可提升代码可读性、可维护性与可测试性，尤其适用于React等框架的状态管理。
在JavaScript函数式编程中，不可变数据和纯函数是两个核心概念。它们不仅能提升代码的可读性和可维护性，还能减少副作用带来的bug。理解并实践这两个原则，能让你写出更稳定、更易测试的程序。
什么是纯函数
纯函数是指：对于相同的输入，永远返回相同的输出，并且不产生任何副作用的函数。
例如：
function add(a, b) {
return a + b;
}
这个 add 函数就是纯函数。它没有修改外部变量，也不依赖外部状态，只根据参数计算结果。
立即学习“Java免费学习笔记（深入）”；
而下面这个就不是纯函数：
let tax = 0.1;
function calculatePrice(price) {
return price + price * tax; // 依赖外部变量
}
它依赖外部的 tax 变量，一旦 tax 被修改，同样的输入可能得到不同输出。
为什么需要不可变数据
JavaScript中的对象和数组是引用类型。直接修改它们会改变原始数据，容易引发难以追踪的问题。
比如：
const user = { name: "Alice", age: 25 };
function updateAge(userObj, newAge) {
userObj.age = newAge;
return userObj;
}
updateAge(user, 26);
console.log(user); // { name: "Alice", age: 26 } 原始数据被改了！
这种直接修改破坏了数据的不可变性。正确的做法是创建新对象：
1、数据调用该功能使界面与程序分离实施变得更加容易，美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能，为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
function updateAge(userObj, newAge) {
return { ...userObj, age: newAge };
}
使用展开运算符生成新对象，原 user 不受影响。
在数组操作中应用不可变性
避免使用会修改原数组的方法如 push、pop、splice，而是选择返回新数组的方法。
例如：
const list = [1, 2, 3];// 不推荐：改变原数组 list.push(4);
// 推荐：生成新数组 const newList = [...list, 4];
// 过滤也应保持不可变 const filtered = list.filter(x => x > 1); // 返回新数组
这样每次操作都返回新的引用，便于做状态追踪，特别适合React等框架。
结合纯函数与不可变数据的实战场景
假设我们要处理一个用户列表，更新某个用户的年龄：
const users = [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 }
];
function updateUserAge(usersList, userId, newAge) {
return usersList.map(user =>
user.id === userId ? { ...user, age: newAge } : user
);
}
const updatedUsers = updateUserAge(users, 1, 26);
这个函数是纯的：不修改原数组，输入相同输出就相同。同时利用 map 和展开语法保持数据不可变。
基本上就这些。坚持用纯函数处理不可变数据，你会发现自己更容易推理代码行为，调试也变得更简单。不复杂但容易忽略。
