什么是数据可变性？
直接修改现有数据值的行为称为可变性。在 JavaScript 中，对象和数组默认是可变的：
// 可变性示例const user = { name: 'alice' };user.name = 'bob'; // 修改对象属性const numbers = [1, 2, 3];numbers.push(4); // 修改数组numbers[0] = 0; // 修改数组元素
这种可变性可能导致难以察觉的错误，尤其是在大型应用中。
为何要避免可变性？
立即学习“Java免费学习笔记（深入）”；
来看一个简单的例子：
// 使用可变性的代码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); // 0console.log(newCart.getIn(['items']).size); // 1// 轻松比较console.log(cartState.equals(newCart)); // false// 转换回普通的 JavaScript 对象const cartJS = newCart.toJS();
Immutable.js 的优势：
快速的不可变数据结构。用于处理数据的丰富 API。节省内存的数据共享。使用 equals() 轻松进行相等性检查。防止意外修改。
用于实现不可变性的 ESLint 配置
ESLint 可以通过特定的规则来帮助执行不可变的编码实践：
// .eslintrc.jsmodule.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; 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：使所有属性都只读。
这些类型会在编译时进行检查，有助于尽早发现错误。
结论
不可变性使您的代码更可预测且更易于维护。虽然需要一些时间来适应，但可靠性和可维护性方面的好处是值得的。
以上就是干净的代码：JavaScript 不变性、核心概念和工具的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500799.html
微信扫一扫 
支付宝扫一扫 
![Go语言接口与切片：如何识别和操作[]interface{}](https://cdn.chuangxiangniao.com/www/2025/12/176369856569294-1.jpg?imageMogr2/crop/480x300/gravity/center)
