JavaScript 不可变性
什么是不可变性？
不可变性（Immutability）是函数式编程中的核心概念之一，它指的是创建后不能被修改的数据。在JavaScript中，当我们谈论不可变性时，意味着一旦创建了一个对象或数组，就不应该直接修改它的内容，而是创建包含所需更改的新副本。
关键概念
不可变（Immutable）= 一旦创建，就不能被改变 可变（Mutable）= 创建后可以被修改
为什么不可变性很重要？
不可变性为代码带来了许多好处：
- 可预测性 - 当数据不变时，函数的行为更容易预测
- 简化调试 - 不会有意外的数据修改
- 并发安全 - 多个函数可以同时使用相同数据，无需担心冲突
- 支持时间旅行调试 - 可以轻松保存和恢复程序的过去状态
- 精确的变更检测 - 使用简单的引用比较（
===）即可检测变化
JavaScript 中的原始类型与引用类型
在深入了解不可变性之前，我们需要理解JavaScript中的数据类型：
js
// 原始类型 - 天生不可变
let name = "John";
let newName = name.toUpperCase();
console.log(name); // "John" - 原始变量没有改变
console.log(newName); // "JOHN" - 创建了新值
// 引用类型 - 默认可变
let person = { name: "John" };
person.name = "Jane"; // 直接修改了原始对象
console.log(person); // { name: "Jane" }
在JavaScript中：
- 原始类型（字符串、数字、布尔值等）天生就是不可变的
- 引用类型（对象、数组、函数等）默认是可变的
在JavaScript中实现不可变性
1. 使用扩展运算符（Spread Operator）
js
// 不可变地更新对象
const user = { name: "John", age: 30 };
const updatedUser = { ...user, age: 31 };
console.log(user); // { name: "John", age: 30 }
console.log(updatedUser); // { name: "John", age: 31 }
// 不可变地更新数组
const numbers = [1, 2, 3, 4];
const newNumbers = [...numbers, 5];
console.log(numbers); // [1, 2, 3, 4]
console.log(newNumbers); // [1, 2, 3, 4, 5]
2. 使用Object.assign()
js
const product = { name: "Laptop", price: 999 };
const discountedProduct = Object.assign({}, product, { price: 899 });
console.log(product); // { name: "Laptop", price: 999 }
console.log(discountedProduct); // { name: "Laptop", price: 899 }
3. 使用不可变数组方法
JavaScript数组有许多内置方法，它们不修改原数组，而是返回新数组：
js
const fruits = ["apple", "banana", "cherry"];
// map - 返回新数组
const capitalizedFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(fruits); // ["apple", "banana", "cherry"]
console.log(capitalizedFruits); // ["APPLE", "BANANA", "CHERRY"]
// filter - 返回新数组
const longFruits = fruits.filter(fruit => fruit.length > 5);
console.log(fruits); // ["apple", "banana", "cherry"]
console.log(longFruits); // ["banana", "cherry"]
// concat - 返回新数组
const moreFruits = fruits.concat(["orange", "mango"]);
console.log(fruits); // ["apple", "banana", "cherry"]
console.log(moreFruits); // ["apple", "banana", "cherry", "orange", "mango"]
4. 嵌套对象的不可变更新
当处理嵌套对象时，需要小心地复制每一层：
js
const state = {
user: {
name: "John",
settings: {
theme: "light",
notifications: true
}
},
posts: []
};
// 不正确：只复制了第一层，内层引用依然相同
const badCopy = { ...state };
// 正确：手动复制每一层
const goodCopy = {
...state,
user: {
...state.user,
settings: {
...state.user.settings,
theme: "dark"
}
}
};
console.log(state.user.settings.theme); // "light"
console.log(goodCopy.user.settings.theme); // "dark"
深拷贝陷阱
如果你的对象层次很深，手动复制每层会变得很繁琐。但是请注意，JSON.parse(JSON.stringify(obj))虽然可以深拷贝，但有许多限制（不能复制函数、日期对象等），不适合所有场景。
实际应用案例
案例1：状态管理
不可变性在React、Redux等现代前端框架的状态管理中至关重要：
js
// Redux reducer 示例
function todoReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
// 返回新数组，而不修改原始状态
return [...state, {
id: action.id,
text: action.text,
completed: false
}];
case 'TOGGLE_TODO':
// 映射到新数组，只更改匹配的项目
return state.map(todo =>
todo.id === action.id
? { ...todo, completed: !todo.completed }
: todo
);
default:
return state;
}
}
案例2：避免副作用的函数
js
// 糟糕的做法 - 修改了参数
function addItemBad(cart, item) {
cart.items.push(item);
cart.total += item.price;
return cart;
}
// 好的做法 - 返回新对象
function addItemGood(cart, item) {
return {
...cart,
items: [...cart.items, item],
total: cart.total + item.price
};
}
// 使用
const cart = { items: [], total: 0 };
const item = { name: "Book", price: 20 };
const updatedCart = addItemGood(cart, item);
console.log(cart); // { items: [], total: 0 } - 原始购物车未修改
console.log(updatedCart); // { items: [{ name: "Book", price: 20 }], total: 20 }
案例3：缓存和性能优化
不可变性支持通过引用比较进行简单高效的变化检测：
js
// 使用记忆化优化函数，只有当输入改变时才重新计算
function memoize(fn) {
let lastArgs = null;
let lastResult = null;
return function(...args) {
// 如果参数与上次相同（通过引用比较），直接返回缓存的结果
if (lastArgs && lastArgs.every((arg, i) => arg === args[i])) {
return lastResult;
}
lastArgs = args;
lastResult = fn(...args);
return lastResult;
};
}
// 使用示例
const calculateTotal = memoize((items) => {
console.log("Calculating total...");
return items.reduce((sum, item) => sum + item.price, 0);
});
const items1 = [{ price: 10 }, { price: 20 }];
console.log(calculateTotal(items1)); // "Calculating total..." 30
console.log(calculateTotal(items1)); // 直接返回30，不会重新计算
// 创建新数组，即使内容相同
const items2 = [{ price: 10 }, { price: 20 }];
console.log(calculateTotal(items2)); // "Calculating total..." 30 - 重新计算
处理JavaScript中的不可变性挑战
性能考量
创建新对象而不是修改现有对象可能会带来性能开销，尤其是对于大型数据结构：
js
// 对于小型对象，复制成本很小
const smallObj = { a: 1, b: 2 };
const smallObjCopy = { ...smallObj, b: 3 }; // 性能良好
// 对于大型数组/对象，复制可能代价高昂
const largeArray = new Array(10000).fill(0);
const largeArrayCopy = [...largeArray]; // 可能导致性能问题
性能优化
为了解决大型数据结构的不可变性性能问题，可以考虑使用专门的不可变数据库，例如 Immutable.js 或 Immer。
使用Immer简化不可变更新
Immer是一个流行的库，它允许你以可变的方式编写代码，但产生不可变的结果：
js
import produce from 'immer';
const baseState = {
users: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Mary' }
],
settings: { darkMode: false }
};
// 使用Immer简化嵌套对象的更新
const nextState = produce(baseState, draft => {
// 看起来像直接修改，但实际上是产生新状态
draft.users[0].name = 'Bob';
draft.settings.darkMode = true;
});
console.log(baseState.users[0].name); // "John"
console.log(nextState.users[0].name); // "Bob"
console.log(baseState.settings.darkMode); // false
console.log(nextState.settings.darkMode); // true
不可变性与函数式编程
不可变性是函数式编程的基石之一，它与纯函数、无副作用等原则结合使用：
js
// 纯函数 + 不可变数据
function sortItems(items) {
// 创建副本后排序，不修改原始数组
return [...items].sort((a, b) => a.price - b.price);
}
const shoppingItems = [
{ name: "Laptop", price: 1000 },
{ name: "Book", price: 20 },
{ name: "Phone", price: 500 }
];
const sortedItems = sortItems(shoppingItems);
console.log(shoppingItems[0].name); // "Laptop" - 原数组未改变
console.log(sortedItems[0].name); // "Book" - 新数组已排序
总结
不可变性是函数式JavaScript编程的关键概念，它为我们提供了一种可预测、安全的方式来处理数据：
- 核心原则：不直接修改数据，而是创建具有所需更改的新副本
- 主要优势：代码更可预测、易于调试、并发安全
- 实现方式：使用扩展运算符、
Object.assign()、数组方法如map/filter/reduce - 处理嵌套数据：注意深层复制或使用Immer等工具
- 性能考量：对于大型数据结构，考虑专门的不可变数据库
采用不可变编程风格有助于编写更健壮、可维护的代码，特别是在使用React、Redux等现代前端框架时。
练习
- 创建一个纯函数
addUser，接收用户数组和新用户，返回包含新用户的新数组 - 编写一个
updateUser函数，通过ID查找并更新用户信息，不修改原始数组 - 实现一个
removeProperty函数，从对象中删除指定属性，返回新对象
进一步学习资源
- Immutable.js - Facebook的不可变数据结构库
- Immer - 允许以可变风格创建不可变状态
- Redux文档 - 关于不可变状态管理的最佳实践
- JavaScript数组方法 - MDN上的不可变数组方法文档