数组与元组解构
使用正确的元素类型解构数组和元组。
数组与元组解构 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。
按位置解构
数组解构按位置而不是按名称绑定变量。使用元组时，每个位置都带有特定类型，因此可以精确地按顺序提取值。
基本数组解构
左侧的方括号会按索引顺序提取元素。对于普通数组，每个绑定都共享数组的元素类型。
const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30为元组模式添加类型注解
在模式之后为绑定指定元组类型即可添加注解。每个位置都有自己的类型——这里依次是数字类型和字符串类型。
const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two类型遵循位置
在元组中，每个索引处的类型都是固定的。第一个绑定是数字类型，第二个是字符串类型；交换这些值会导致类型错误。
const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)用逗号跳过元素
使用空的逗号位置留出间隔，即可跳过不需要的位置。被跳过元素的类型会被直接忽略。
const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0使用剩余元素解构
剩余元素会将其余项目收集到一个数组中。对于元组，其类型会反映剩余的位置。
const [head, ...tail] = [1, 2, 3, 4]
console.log(head) // 1
console.log(tail.length) // 3从元组获取剩余类型
使用剩余元素解构元组时，TypeScript 会将剩余变量推断为由其余元素组成的元组，并保留它们的类型。
const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])交换变量
数组解构可以实现一个实用技巧：无需临时变量即可交换两个值。两者的类型必须兼容，交换才能通过类型检查。
let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1在函数返回值中解构
返回元组的函数与解构非常契合——React 中的 useState 模式正是如此。
function useCounter(): [number, () => number] {
let n = 0
return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())数组模式中的默认值
为可能是 undefined 的位置提供默认值。当元素缺失或为 undefined 时，才会应用该默认值。
const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0嵌套数组解构
您可以在一条语句中解构数组中的数组。类型也会相应嵌套，但对于深层结构，请注意保持可读性。
const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4快速检查
测试您对数组和元组解构的理解。
回顾
数组解构按位置绑定；在模式之后添加元组类型注解，就能为每个索引指定自己的类型。使用空的逗号位置跳过元素，使用剩余元素收集其余部分（其类型仍是由剩余位置组成的元组），并为可能缺失的位置提供默认值。元组返回值与解构结合后，就形成了 useState 这样的强大模式。
常见问题解答
「数组与元组解构」课时是免费的吗？
是的 — 「数组与元组解构」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 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 反馈 — 无需本地设置。