编辑“︁JavaScript不可变性”︁

= JavaScript不可变性 =

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

== 基本概念 ==

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

=== 可变 vs 不可变 ===

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

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

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

== 实现不可变性的方法 ==

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

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

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

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

=== 使用不可变库 ===
如 [https://immutable-js.com/ Immutable.js] 或 [https://immerjs.github.io/immer/ Immer] 提供深层次的不可变性支持。

== 不可变操作示例 ==

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

<syntaxhighlight lang="javascript">
const original = [1, 2, 3];
const updated = original.concat(4); // [1, 2, 3, 4]
</syntaxhighlight>

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

<syntaxhighlight lang="javascript">
const original = { a: 1, b: 2 };
const updated = { ...original, b: 3 }; // { a: 1, b: 3 }
</syntaxhighlight>

== 性能考虑 ==

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

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

== 实际应用案例 ==

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

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

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

<syntaxhighlight lang="javascript">
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.payload] };
    default:
      return state;
  }
}
</syntaxhighlight>

== 数学基础 ==

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

== 总结 ==

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

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

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript函数式编程]]