TypeScript Academy · 课时

数组与对象中的展开运算

Q: 「数组与对象中的展开运算」这节课中我会学到什么？

展开值，同时保留准确的类型信息。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

展开值，同时保留准确的类型信息。

数组与对象中的展开运算 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

展开值

展开运算符 ... 会将数组的元素或对象的属性复制到一个新对象或数组中。TypeScript 会精确跟踪结果类型，这对于不可变更新至关重要。

数组展开

将两个数组展开到一个新数组中，即可将它们连接起来。结果的元素类型是两个源数组元素类型的联合。

const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]

混合使用展开和字面量

您可以将展开元素与单个值交替排列。顺序会严格按照书写顺序保留。

const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]

展开元素的类型

当展开源具有不同的元素类型时，结果会是一个元素类型为这些类型联合的数组。您可以添加注解，也可以让类型推断完成这项工作。

const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)

对象展开

对象展开会将对象自身的可枚举属性复制到一个新对象中。结果类型会合并源对象的结构。

const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }

展开时覆盖属性

当键发生冲突时，最后一个会生效。先展开一个对象，再覆盖特定字段，这是实现不可变更新的基础。

const user = { name: "Ada", age: 36 }
const older = { ...user, age: 37 }
console.log(older.age) // 37

顺序决定最终结果

属性的优先级取决于源的顺序。将覆盖项放在展开之后才能生效；放在之前则会被展开内容覆盖。

const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came last

被覆盖属性的类型

如果覆盖项改变了属性的类型，结果类型也会反映新类型。TypeScript 会将类型缩小为最后一次出现的类型。

const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())

展开是浅拷贝

展开只复制一层。嵌套对象按引用共享，因此修改嵌套字段会影响两个副本。若要进行更深层的复制，也要展开嵌套对象。

const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared reference

展开与只读

展开 readonly 数组或对象会生成一个新的可变副本。readonly 修饰符不会通过展开传递，因为您正在构建一个新值。

const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4

不可变更新模式

展开是无需修改即可更新状态的惯用方式：复制旧对象，覆盖发生变化的字段，然后返回新对象。

interface State { count: number; name: string }
function increment(s: State): State {
  return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))

快速检查

测试您对展开类型和优先级的理解。

回顾

展开会将数组元素或对象属性复制到新值中。数组展开会与联合元素类型进行拼接；对象展开会合并形状，而发生 key 冲突时，最后出现的值会覆盖之前的值。展开是浅拷贝——嵌套对象仍然共享——即使来源是 readonly，它也会生成新的可变值。这是惯用的不可变更新模式。

常见问题解答

「数组与对象中的展开运算」课时是免费的吗？

是的 — 「数组与对象中的展开运算」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「数组与对象中的展开运算」这节课中我会学到什么？

展开值，同时保留准确的类型信息。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「数组与对象中的展开运算」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy