JavaScript Academy · 课时

不可变更新模式

Q: 「不可变更新模式」这节课中我会学到什么？

通过创建新副本来更新数据。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

通过创建新副本来更新数据。

不可变更新模式 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

不修改原对象进行更新

不可变更新会创建一个应用了修改的新 copy，同时保持 original 不变。这是现代 JavaScript 中实现可预测 state 管理的核心。

展开运算符 ... 是主要工具。

使用展开运算符复制对象

将对象展开到一个新对象中，然后覆盖某个属性。original 会保留旧值。

const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };

console.log(user.age);
console.log(older.age);

它们是不同的对象

copy 是全新的对象，而不是同一个引用。通过身份比较可以确认这一点。

const original = { x: 1 };
const copy = { ...original };

console.log(original === copy);
console.log(original.x === copy.x);

以不可变方式添加属性

要添加字段，请展开旧对象并包含新的 key。original 不会获得任何改变。

const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };

console.log(point);
console.log(point3d);

以不可变方式删除属性

使用解构取出不需要的 key，并接收其余内容。剩余对象不包含该 key。

const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;

console.log(safe);
console.log(user.secret);

使用展开运算符复制数组

展开数组即可复制它。map 和 filter 等方法也会返回新数组，从不修改源数组。

const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);

console.log(nums);
console.log(doubled);

以不可变方式向数组添加元素

不要使用会修改数组的 push，而应使用展开运算符创建新数组。original 的长度保持不变。

const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];

console.log(list);
console.log(added);
console.log(prepended);

以不可变方式从数组中删除元素

使用 filter 生成一个不包含目标项的新数组，同时保持 original 完整不变。

const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);

console.log(nums);
console.log(withoutThree);

更新嵌套对象

更新嵌套对象时，需要在每个发生变化的层级使用展开运算符。只有被修改的分支会重新创建，其余部分通过引用共享。

const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
  ...state,
  user: { ...state.user, age: 37 }
};

console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);

更新数组中的元素

使用 map 为匹配的元素返回一个修改后的 copy，为其余元素返回 original。不会修改任何元素。

const todos = [
  { id: 1, done: false },
  { id: 2, done: false }
];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

console.log(todos[1].done);
console.log(updated[1].done);

不可变更新为何重要

永不修改共享 state 可以降低变更检测的成本（比较引用），支持撤销/重做，并防止远距离作用错误。模式是：先复制，再修改 copy。对于深度复制，下一节会介绍 structuredClone。

function setName(state, name) {
  return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);

快速检查

当 user 已经有一个 age 时，{ ...user, age: 37 } 会生成什么？

回顾：不可变更新模式

您已经学会了在不修改原对象的情况下进行更新：

使用展开运算符 { ...obj, key: value } 进行复制和覆盖。
解构出剩余部分，以不可变方式删除属性。
使用 map、filter 和数组展开运算符代替 push/splice。
嵌套更新时在每个层级使用展开运算符，其余部分通过引用共享。

常见问题解答

「不可变更新模式」课时是免费的吗？

是的 — 「不可变更新模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「不可变更新模式」这节课中我会学到什么？

通过创建新副本来更新数据。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「不可变更新模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy