JavaScript的解构赋值自ES6引入以来，几乎成了日常取数据的标配写法。大多数开发者熟悉从数组或对象中提取值的基础形式，但在实际工程里，还有一些相对冷门但非常实用的模式，能够显著简化逻辑并提升代码表达力。
一、对象解构中的剩余属性与重命名组合
在处理配置对象或接口返回数据时，我们常希望把少数已知字段单独取出，其余字段原样保留。此时可以结合冒号重命名与剩余运算符，一次性完成拆分。
下面示例中，我们从用户对象里提取id并改名为userId，同时用剩余运算符收集其他所有字段到rest中。这样避免了手动罗列每一个不需要处理的属性，也防止了重名覆盖。
const user = { id: 1001, name: '张三', age: 28, role: 'admin', dept: '研发' };
const { id: userId, ...rest } = user;
console.log(userId); // 1001
console.log(rest); // { name: '张三', age: 28, role: 'admin', dept: '研发' }
这种写法在编写中间件或数据清洗函数时尤其有用。比如只需要修改某个字段再合并回去，就可以先解构出目标字段，处理完后用扩展运算符合并。
需要注意的是，剩余属性必须放在解构模式的最末尾，且只能用于对象或数组的最后一项。如果尝试在中间写剩余运算符，语法层面就会直接报错。
二、函数参数中的解构与默认值
函数入参如果是一个复杂对象，在参数位置直接解构可以让调用约定更清晰，也能就地设置默认值，减少函数体内部的判空代码。
以下例子展示了一个绘制配置函数，参数对象中的color与width被重命名并设置默认值，而position使用嵌套解构提取。当调用方未传某些字段时，代码依然能安全运行。
function draw({
color: lineColor = 'black',
width: lineWidth = 1,
position: { x = 0, y = 0 } = {}
} = {}) {
console.log(lineColor, lineWidth, x, y);
}
draw({ color: 'red', position: { x: 10 } });
// 输出: red 1 10 0
上面的= {}写在最外层，是为了让函数在不传任何参数时也不会因解构undefined而抛出异常。这是一个容易遗漏的细节，很多线上报错都来源于直接对undefined做对象解构。
这种参数解构方式让API的自说明性更强，调用者一眼就能从函数签名看出需要哪些字段，以及哪些字段有缺省行为。但在参数较多时，过度嵌套解构会降低可读性，建议超过三层时改为在函数体内分步处理。
三、正则匹配结果的解构
RegExp的exec方法或字符串的match方法会返回类数组结果，其中索引0是整体匹配，后续索引是捕获分组。用数组解构可以直接把分组值赋给语义化变量。
比如解析一段日志时间，正则中写了三个捕获组，通过解构可以跳过整体匹配项，直接拿到时、分、秒，代码比通过下标访问更直观。
const log = 'time=14:23:55 level=info';
const pattern = /(d{2}):(d{2}):(d{2})/;
const [, hour, minute, second] = log.match(pattern);
console.log(hour, minute, second); // 14 23 55
这里使用逗号占位符跳过了match结果的第一项，这是解构中非常实用的“忽略某些元素”的技巧。同样的方式也适用于拆分CSV行或URL路径片段。
但要注意，如果正则没有匹配成功，match会返回null，此时解构会抛出Cannot destructure property错误。因此在不可控输入场景下，应先做空值判断或使用可选链配合默认值。
四、交换变量与嵌套解构的边界
不使用临时变量交换两个值是解构最经典的冷门技巧之一，利用数组字面量配合解构即可完成。该写法没有性能损耗，且语义明确。
let a = 5; let b = 10; [a, b] = [b, a]; console.log(a, b); // 10 5
嵌套解构则可以深入对象中的对象，但如果路径上某一层可能为null或undefined，就必须给该层提供默认空对象，否则运行时会中断。下面展示安全嵌套写法。
const data = { user: null };
const { user: { name } = {} } = data;
console.log(name); // undefined，不会报错
可见不常见用法大多围绕“重命名”“剩余”“忽略”“默认兜底”几个能力展开。合理运用能减少样板代码，但也要权衡团队阅读成本，避免为了炫技写出难以维护的深层解构。
JavaScriptdestructuring解构赋值修改时间：2026-08-08 09:30:25