不可变数据

不可变性（Immutability）是函数式编程的核心原则之一。理解不可变性不仅能帮助你写出更可靠的代码，还能让你更好地理解 React、Redux 等现代框架的工作原理。

什么是不可变性？

根据 MDN 的定义，不可变值是指其内容在不创建全新值的情况下无法被更改的值。换句话说，一旦数据被创建，它就不能被修改。任何看似"修改"的操作，实际上都是创建了一个新的数据副本。

JavaScript 中的可变与不可变

JavaScript 中的数据类型分为两类：

原始类型（Primitive Types）天生不可变：

// 字符串是不可变的
let str = 'hello';
str[0] = 'H';  // 静默失败，str 仍然是 'hello'

// 数字是不可变的
let num = 42;
num = 100;     // 这是重新赋值，不是修改

// 布尔值是不可变的
let flag = true;
flag = false;  // 重新赋值

原始类型的值一旦创建就不能改变。当你给变量赋予新值时，变量指向了一个全新的值，原来的值并没有被修改。

引用类型（Reference Types）默认可变：

// 对象是可变的
const user = { name: '张三', age: 25 };
user.age = 26;  // 直接修改了原对象
console.log(user);  // { name: '张三', age: 26 }

// 数组是可变的
const arr = [1, 2, 3];
arr.push(4);    // 直接修改了原数组
console.log(arr);  // [1, 2, 3, 4]

// 这就是"可变"的含义：数据本身被修改了

这种可变性在函数式编程中会带来问题。当多个地方引用同一个对象时，一处修改会影响所有引用，这种隐式的数据共享是 bug 的常见来源。

不可变操作 vs 可变操作

理解两者区别是掌握不可变性的关键：

const original = [1, 2, 3, 4, 5];

// 可变操作 - 修改原数组
const mutableExample = [...original];  // 先复制
mutableExample.push(6);                // 再修改
mutableExample[0] = 0;                 // 再修改
// 原数组 original 未受影响，因为我们先复制了

// 但如果不小心忘记了复制...
const badExample = original;
badExample.push(6);  // original 也被修改了！
console.log(original);  // [1, 2, 3, 4, 5, 6]

// 不可变操作 - 总是返回新数据
const goodExample = [...original, 6];  // 创建新数组
// 或者使用 concat
const anotherWay = original.concat(6);  // 创建新数组

console.log(original);      // [1, 2, 3, 4, 5] 未改变
console.log(goodExample);   // [1, 2, 3, 4, 5, 6]

不可变操作的核心思想是：永远不修改原数据，每次"修改"都创建新数据。这看起来可能浪费内存，但实际上有很多好处。

为什么需要不可变性？

1. 可预测性

当数据不可变时，你可以确信数据不会被意外修改。这大大降低了理解代码的难度。

// 问题：可变数据导致难以追踪的变化
let sharedData = { count: 0 };

function increment() {
  sharedData.count++;  // 隐式修改外部状态
}

function processData() {
  increment();  // 这里修改了 sharedData
  // ... 其他代码
  // 调用者可能不知道 sharedData 已经变了
}

// 解决：不可变数据让变化显式化
function incrementImmutable(data) {
  return { count: data.count + 1 };  // 返回新对象
}

function processDataImmutable(data) {
  const newData = incrementImmutable(data);  // 显式接收新数据
  // 原来的 data 不会变，变化都在 newData 中
  return newData;
}

2. 易于调试和时间旅行

不可变数据天然支持"快照"功能。每次状态变化都是一次新的快照，你可以轻松回溯到任意历史状态。

// 使用不可变数据实现简单的状态历史
class StateHistory {
  constructor(initialState) {
    this.history = [initialState];
    this.currentIndex = 0;
  }

  // 获取当前状态
  get current() {
    return this.history[this.currentIndex];
  }

  // 更新状态（不可变方式）
  update(newSnapshot) {
    // 丢弃当前位置之后的历史（如果有的话）
    this.history = this.history.slice(0, this.currentIndex + 1);
    // 添加新快照
    this.history.push(newSnapshot);
    this.currentIndex++;
  }

  // 撤销
  undo() {
    if (this.currentIndex > 0) {
      this.currentIndex--;
    }
    return this.current;
  }

  // 重做
  redo() {
    if (this.currentIndex < this.history.length - 1) {
      this.currentIndex++;
    }
    return this.current;
  }
}

// 使用示例
const history = new StateHistory({ count: 0 });
history.update({ count: 1 });  // 更新
history.update({ count: 2 });  // 更新
console.log(history.current);  // { count: 2 }
console.log(history.undo());   // { count: 1 }
console.log(history.redo());   // { count: 2 }

Redux DevTools 的"时间旅行调试"功能正是基于这个原理实现的。

3. 性能优化：引用比较

在 React 中，不可变数据使得组件更新判断变得非常高效。

// React 组件更新判断
function shouldComponentUpdate(nextProps, nextState) {
  // 如果数据不可变，直接比较引用即可
  // 引用相同 = 数据没变 = 不需要重新渲染
  return nextProps.data !== this.props.data;
}

// 如果数据可变，就需要深比较
function deepEqual(a, b) {
  // 递归比较每个属性...性能开销大
}

// 使用不可变数据的好处
const oldState = { user: { name: '张三' } };
const newState = { user: { name: '李四' } };  // 新对象

// 引用比较，O(1) 时间复杂度
oldState === newState  // false，状态变了

// React 的 PureComponent 和 memo 就是基于这个原理
const MyComponent = React.memo(function MyComponent({ data }) {
  // 只有当 data 引用变化时才重新渲染
  return <div>{data.name}</div>;
});

4. 并发安全

在多线程或异步环境中，不可变数据消除了数据竞争的问题。因为数据不会被修改，多个"线程"可以安全地读取同一份数据。

// 模拟并发问题
let sharedState = { value: 0 };

// 可变数据的并发问题
async function problematicConcurrent() {
  const promise1 = Promise.resolve().then(() => {
    sharedState.value += 1;  // 修改共享状态
  });
  const promise2 = Promise.resolve().then(() => {
    sharedState.value += 1;  // 同时修改
  });
  await Promise.all([promise1, promise2]);
  // sharedState.value 可能不是预期的 2
}

// 不可变数据的并发安全
function safeConcurrent(currentState) {
  // 每个操作都基于当前状态创建新状态
  // 不会相互干扰
  const newState1 = { value: currentState.value + 1 };
  const newState2 = { value: currentState.value + 1 };
  // 然后通过合并策略决定最终结果
  return { value: currentState.value + 2 };
}

JavaScript 中的不可变操作

数组的不可变操作

const original = [1, 2, 3, 4, 5];

// ========== 添加元素 ==========
// 在末尾添加
const pushed = [...original, 6];
// [1, 2, 3, 4, 5, 6]

// 在开头添加
const unshifted = [0, ...original];
// [0, 1, 2, 3, 4, 5]

// 在指定位置插入
const insertAt = (arr, index, value) => [
  ...arr.slice(0, index),
  value,
  ...arr.slice(index)
];
const inserted = insertAt(original, 2, 2.5);
// [1, 2, 2.5, 3, 4, 5]

// ========== 删除元素 ==========
// 删除末尾元素
const popped = original.slice(0, -1);
// [1, 2, 3, 4]

// 删除开头元素
const shifted = original.slice(1);
// [2, 3, 4, 5]

// 删除指定位置元素
const removeAt = (arr, index) => [
  ...arr.slice(0, index),
  ...arr.slice(index + 1)
];
const removed = removeAt(original, 2);
// [1, 2, 4, 5]

// 删除指定值
const withoutValue = original.filter(x => x !== 3);
// [1, 2, 4, 5]

// ========== 修改元素 ==========
// 修改指定位置
const updated = original.map((x, i) => i === 2 ? 99 : x);
// [1, 2, 99, 4, 5]

// 条件修改
const doubled = original.map(x => x * 2);
// [2, 4, 6, 8, 10]

// ========== 其他操作 ==========
// 反转（创建新数组）
const reversed = [...original].reverse();
// [5, 4, 3, 2, 1]

// 排序（创建新数组）
const sorted = [...original].sort((a, b) => b - a);
// [5, 4, 3, 2, 1]

// 去重
const unique = [...new Set([1, 1, 2, 2, 3])];
// [1, 2, 3]

// 扁平化
const flattened = [[1, 2], [3, 4]].flat();
// [1, 2, 3, 4]

对象的不可变操作

const original = { a: 1, b: 2, c: 3 };

// ========== 添加属性 ==========
const withD = { ...original, d: 4 };
// { a: 1, b: 2, c: 3, d: 4 }

// ========== 修改属性 ==========
const modifiedB = { ...original, b: 20 };
// { a: 1, b: 20, c: 3 }

// ========== 删除属性 ==========
// 使用解构赋值
const { b, ...withoutB } = original;
// withoutB: { a: 1, c: 3 }

// 使用函数
const omit = (obj, key) => {
  const { [key]: _, ...rest } = obj;
  return rest;
};
const withoutC = omit(original, 'c');
// { a: 1, b: 2 }

// ========== 嵌套对象更新 ==========
const nested = {
  user: {
    name: '张三',
    profile: {
      age: 25,
      address: {
        city: '北京'
      }
    }
  }
};

// 更新深层嵌套的值
const updated = {
  ...nested,
  user: {
    ...nested.user,
    profile: {
      ...nested.user.profile,
      address: {
        ...nested.user.profile.address,
        city: '上海'
      }
    }
  }
};

// 这种嵌套更新确实繁琐，后面会介绍更好的方案

Object.freeze 的使用与局限

Object.freeze() 可以让对象变得"只读"，但它是浅冻结：

// 浅冻结示例
const frozen = Object.freeze({ 
  name: '张三', 
  address: { city: '北京' } 
});

frozen.name = '李四';  // 静默失败（或严格模式下报错）
console.log(frozen.name);  // '张三'，无法修改

// 但嵌套对象仍然可变！
frozen.address.city = '上海';
console.log(frozen.address.city);  // '上海'，被修改了！

// 深冻结函数
function deepFreeze(obj) {
  // 先冻结所有嵌套对象
  Object.keys(obj).forEach(key => {
    const value = obj[key];
    if (value && typeof value === 'object') {
      deepFreeze(value);
    }
  });
  // 再冻结当前对象
  return Object.freeze(obj);
}

const deeplyFrozen = deepFreeze({ 
  name: '张三', 
  address: { city: '北京' } 
});

deeplyFrozen.address.city = '上海';  // 无效
console.log(deeplyFrozen.address.city);  // '北京'

Object.freeze 的局限：

只能冻结对象自身的可枚举属性
浅冻结，嵌套对象需要递归处理
性能有一定影响，通常只在开发环境使用