什么是数据可变性？
直接修改现有数据值的行为称为可变性。在 JavaScript 中，对象和数组默认是可变的：
// 可变性示例
const user = { name: 'alice' };
user.name = 'bob'; // 修改对象属性
const numbers = [1, 2, 3];
numbers.push(4); // 修改数组
numbers[0] = 0; // 修改数组元素这种可变性可能导致难以察觉的错误，尤其是在大型应用中。
为何要避免可变性？
来看一个简单的例子：
// 使用可变性的代码
const cart = {
items: [],
total: 0
};
function addProduct(cart, product) {
cart.items.push(product);
cart.total += product.price;
}
// 使用示例
const myCart = cart;
addProduct(myCart, { id: 1, name: "laptop", price: 999 });
// myCart 直接被修改
console.log(cart === myCart); // true，两个变量指向同一个对象可变性带来的问题：
- 共享引用: 代码的不同部分可能在不知情的情况下修改同一个对象。
- 副作用: 修改可能影响到使用同一个对象的其它函数。
- 难以调试: 难以追踪代码的哪一部分修改了对象。
- 复杂测试: 可变性使单元测试更难编写。
解决方案：不可变编程
不可变方法为每次修改都创建数据的新副本：
// 不可变代码
function addProduct(cart, product) {
// 创建新对象，不修改原对象
return {
items: [...cart.items, product],
total: cart.total + product.price
};
}
// 使用示例
const initialCart = { items: [], total: 0 };
const newCart = addProduct(initialCart, { id: 1, name: "laptop", price: 999 });
console.log(initialCart); // { items: [], total: 0 }
console.log(newCart); // { items: [{...}], total: 999 }
console.log(initialCart === newCart); // false，它们是不同的对象这种方法的优势：
- 可预测性: 每个函数都返回一个新状态，没有隐藏的副作用。
- 更改追踪: 每次修改都会创建一个可追踪的新对象。
- 轻松测试: 函数是纯函数，测试更简单。
- 更好的调试: 可以比较修改前后的状态。
现代不可变性工具
Immer：简洁的编写风格
Immer 允许您编写看起来像普通 JavaScript 代码，但会产生不可变结果的代码：
import produce from 'immer';
const initialCart = {
items: [],
total: 0,
customer: {
name: 'alice',
preferences: {
notifications: true
}
}
};
// 不使用 Immer（冗长方式）
const updatedCart = {
...initialCart,
items: [...initialCart.items, { id: 1, name: "laptop", price: 999 }],
total: initialCart.total + 999,
customer: {
...initialCart.customer,
preferences: {
...initialCart.customer.preferences,
notifications: false
}
}
};
// 使用 Immer（简洁方式）
const updatedCartImmer = produce(initialCart, draft => {
draft.items.push({ id: 1, name: "laptop", price: 999 });
draft.total += 999;
draft.customer.preferences.notifications = false;
});Immer 的优势：
- 熟悉的语法：像平时一样编写代码。
- 无需学习新的 API：使用常规 JavaScript 对象和数组。
- 快速：只复制修改的部分。
- 自动变更检测：只在需要时追踪变更并创建新引用。
- 与 TypeScript 配合良好：保留所有类型信息。
Immutable.js：高效的数据结构
Immutable.js 提供了专门用于不可变性的数据结构：
import { Map, List } from 'immutable';
// 创建不可变结构
const cartState = Map({
items: List([]),
total: 0
});
// 添加一个商品
const newCart = cartState
.updateIn(
['items'],
items => items.push(Map({
id: 1,
name: "laptop",
price: 999
}))
)
.update('total', total => total + 999);
// Immutable.js 方法总是返回新的实例
console.log(cartState.getIn(['items']).size); // 0
console.log(newCart.getIn(['items']).size); // 1
// 轻松比较
console.log(cartState.equals(newCart)); // false
// 转换回普通的 JavaScript 对象
const cartJS = newCart.toJS();Immutable.js 的优势：
- 快速的不可变数据结构。
- 用于处理数据的丰富 API。
- 节省内存的数据共享。
- 使用 equals() 轻松进行相等性检查。
- 防止意外修改。
用于实现不可变性的 ESLint 配置
ESLint 可以通过特定的规则来帮助执行不可变的编码实践：
// .eslintrc.js
module.exports = {
plugins: ['functional'],
rules: {
'functional/immutable-data': 'error',
'functional/no-let': 'error',
'functional/prefer-readonly-type': 'error'
}
};这些规则将：
- 防止直接数据变异。
- 鼓励使用 const 而不是 let。
- 建议在 TypeScript 中使用只读类型。
TypeScript 和不可变性
TypeScript 通过其类型系统来帮助强制执行不可变性：
// 商品和购物车的不可变类型
type Product = {
readonly id: number;
readonly name: string;
readonly price: number;
};
type Cart = {
readonly items: ReadonlyArray<Product>;
readonly total: number;
};
// TypeScript 防止修改
const cart: Cart = {
items: [],
total: 0
};
// 编译错误：items 是只读的
cart.items.push({ id: 1, name: "Laptop", price: 999 });
// 函数必须创建一个新的购物车
function addProduct(cart: Cart, product: Product): Cart {
return {
items: [...cart.items, product],
total: cart.total + product.price
};
}
// TypeScript 保证原对象不会被更改
const newCart = addProduct(cart, { id: 1, name: "Laptop", price: 999 });TypeScript 的只读修饰符：
- readonly：防止属性更改。
- ReadonlyArray
：防止数组更改。 - Readonly
：使所有属性都只读。
这些类型会在编译时进行检查，有助于尽早发现错误。
结论
不可变性使您的代码更可预测且更易于维护。虽然需要一些时间来适应，但可靠性和可维护性方面的好处是值得的。