数组解构可安全提取前若干元素,长度不足时对应变量为undefined;支持跳过元素、设置默认值、获取剩余元素(...rest须在末尾);嵌套解构需严格匹配结构,函数参数解构需防null/undefined报错。

用 const [a, b, c] = arr 提取前几个元素最直接
只要数组长度 ≥ 你要解构的变量个数,就能安全取值;少于时对应位置得是 undefined,不会报错。但别指望它自动补默认值——没传就是 undefined,不是空字符串或 0。
- 想取前两个:写
const [first, second] = arr,比arr[0]和arr[1]更简洁,也更易读 - 只想要第一个、跳过第二个、再取第三个?写
const [first, , third] = arr,中间留空就行,不用占位符变量 - 如果数组可能为空或太短,又不想让变量是
undefined,得手动加默认值:const [a = 'default', b = null] = arr
解构时用 ... 拿剩余元素必须放最后
... 是剩余参数语法,在解构里只能出现在末尾,否则会报 SyntaxError: Rest element must be last element。它不“截取”,而是把剩下的全收走,哪怕一个都不剩,结果也是空数组。
- 要前两个 + 剩下的所有:
const [a, b, ...rest] = arr——rest是数组,哪怕arr只有两个元素,rest就是[] - 不能写成
const [...head, tail] = arr,这是非法语法,JS 不支持“从后往前”解构 -
...rest会触发一次浅拷贝,如果原数组超大(比如几万项),这里会有轻微性能开销,不过日常用基本感知不到
嵌套数组解构容易漏掉层级或写错括号
遇到二维数组,比如 [[1, 2], [3, 4]],想直接取出 1 和 4,就得对齐结构写括号,多一层就多一对 [ ],少一个就变成取错层级。
- 取第一项里的第一个和第二项里的第二个:
const [[a], [, d]] = arr2d—— 注意外层是[...],内层是[a]和[, d] - 如果写成
const [a, , d] = arr2d,那a是[1, 2],d是undefined(因为第二项是[3, 4],没有第三项) - 嵌套深了建议拆成两步:先解出子数组,再对子数组解构,可读性高,也方便加类型提示或调试
在函数参数里直接解构数组参数要小心调用方传的是什么
函数声明时写 function fn([a, b]) { } 看似省事,但调用时如果传的不是数组(比如 null 或 undefined),会直接报 TypeError: Cannot destructure property 'x' of 'y' as it is undefined,连函数体都进不去。
- 稳妥做法是加默认值:
function fn([a, b] = []) { },这样传undefined也不会崩 - 如果函数本意是接受任意可迭代对象(如
Set、arguments),不能直接用数组解构,得先转成数组,或改用 rest 参数function fn(...args) - TypeScript 用户注意:
function fn([a]: [number, number])这种写法类型检查严格,但如果运行时传的是[1],TS 编译通过,但运行时a是1,b是undefined,类型上不报错,行为上可能出乎意料

















