JavaScript不可变性

JavaScript不可变性

不可变性（Immutability）是函数式编程中的核心概念，指数据一旦创建就不能被修改。在JavaScript中，虽然变量默认是可变的，但通过特定的技术可以实现不可变性，从而提高代码的可预测性、简化状态管理并减少副作用。

基本概念

不可变性意味着：

• 数据创建后不能被更改。
• 任何“修改”操作都会返回一个新的数据副本，而非直接修改原数据。
• 有助于避免意外的副作用，使程序更易于调试和测试。

可变 vs 不可变

在JavaScript中，原始类型（如字符串、数字、布尔值）默认是不可变的，而对象和数组是可变的。

// 原始类型不可变
let str = "hello";
str[0] = "H"; // 无效，str仍然是"hello"

// 对象可变
let obj = { a: 1 };
obj.a = 2; // obj被修改为 { a: 2 }

实现不可变性的方法

使用 const 声明

`const` 可以防止变量重新赋值，但不会阻止对象内部的修改：

const arr = [1, 2, 3];
arr.push(4); // 仍然可以修改数组

使用 Object.freeze

`Object.freeze` 可以浅冻结对象，使其属性不可修改：

const obj = Object.freeze({ a: 1 });
obj.a = 2; // 静默失败（严格模式下会报错）

使用不可变库

如 Immutable.js 或 Immer 提供深层次的不可变性支持。

不可变操作示例

数组操作

使用 `concat`、`slice`、`map`、`filter` 等返回新数组的方法：

const original = [1, 2, 3];
const updated = original.concat(4); // [1, 2, 3, 4]

对象操作

使用展开运算符或 `Object.assign` 创建新对象：

const original = { a: 1, b: 2 };
const updated = { ...original, b: 3 }; // { a: 1, b: 3 }

性能考虑

不可变性可能导致内存开销，因为每次修改都会创建新对象。但现代JavaScript引擎（如V8）通过结构共享（Structural Sharing）优化性能。

graph LR A[原数据] --> B[修改操作] B --> C[新数据] A -.共享未修改部分.-> C

实际应用案例

React 状态管理

React 推崇不可变性，状态更新必须通过 `setState` 或 `useState` 返回新对象：

function Counter() {
  const [state, setState] = useState({ count: 0 });
  
  // 正确做法：返回新对象
  const increment = () => setState(prev => ({ ...prev, count: prev.count + 1 }));
}

Redux Reducer

Redux 要求 reducer 必须是纯函数，返回新状态：

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.payload] };
    default:
      return state;
  }
}

数学基础

不可变数据可以被视为数学中的值：$f(x)$ 总是返回相同结果，不会改变 $x$ 本身。

总结

方法	优点	缺点
`const`	防止重新赋值	不阻止对象修改
`Object.freeze`	浅层不可变	不适用于嵌套对象
不可变库	深层不可变	需要学习额外API

不可变性是构建可靠JavaScript应用的重要模式，尤其在函数式编程和现代前端框架中广泛应用。初学者应从简单的 `const` 和展开运算符开始，逐步掌握更高级的不可变技术。