怎么在JavaScript函数参数中使用解构赋值？

一、基础对象解构：从传统属性访问到直接提取

在编写接受配置对象（Options Pattern）或复合数据结构的函数时，传统方式往往是将整个对象作为单一参数接收，然后在函数体内逐一读取其字段：

// 传统传参取值写法
function renderUser(user) {
  const name = user.name;
  const age = user.age;
  const role = user.role;
  console.log(`${name} (${age}岁) - 身份: ${role}`);
}

利用函数参数的对象解构，可以直接在参数位置将对象属性映射为同名变量：

// 参数解构写法
function renderUser({ name, age, role }) {
  console.log(`${name} (${age}岁) - 身份: ${role}`);
}

const currentUser = { name: "李小明", age: 28, role: "系统管理员", department: "研发部" };
renderUser(currentUser);
// 打印结果：李小明 (28岁) - 身份: 系统管理员

在这个例子中，函数只关心 name、age 和 role，即使传入的对象包含 department 等额外属性，也不会影响提取流程。这种显式的形参声明，让函数调用者一眼就能看清该函数实际需要哪些字段。

图 1：传入的对象实参通过形参解构模式快速映射为函数作用域内的独立局部变量

二、进阶技巧：重命名、默认值与参数回退

在实际开发中，直接解构常遇到两个问题：一是传入对象的属性名与函数内部已有的标识符冲突，或是属性名不够直观；二是调用方未提供某个字段，导致取值为 undefined，甚至未传入整个对象导致代码直接报错。

1. 属性别名（重命名）

语法规则为 { 原属性名: 新变量名 }。此时在函数体内部必须使用新变量名：

function setupCanvas({ width: canvasWidth, height: canvasHeight }) {
  // width 和 height 在函数体内不存在，使用的是 canvasWidth 与 canvasHeight
  console.log(`画布尺寸已设定为: ${canvasWidth} x ${canvasHeight}`);
}

setupCanvas({ width: 1920, height: 1080 });
// 打印结果：画布尺寸已设定为: 1920 x 1080

2. 字段默认值与整个参数默认值

解构默认值仅在对应属性严格等于 undefined 时生效。当属性值为 null、false 或 0 时，不会触发默认值：

// 字段默认值 + 别名
function initButton({ text = "确定", size: btnSize = "medium", disabled = false }) {
  console.log(`文本: ${text}, 规格: ${btnSize}, 禁用: ${disabled}`);
}

initButton({ text: "提交表单" });
// 打印结果：文本: 提交表单, 规格: medium, 禁用: false

图 2：参数整体回退与属性默认值的触发判定逻辑

三、数组解构与 Rest 剩余属性收集

除了对象解构，函数参数也可以针对数组或具备 Iterator 接口的数据结构进行按位置提取。常见于处理坐标系、多返回值元组或键值对列表。

1. 数组按序解构与元素跳过

数组解构依靠的是索引顺序而非键名。若不需要前面的某个元素，直接保留逗号占位即可：

// 提取二维坐标中的 x, y
function drawPoint([x, y = 0]) {
  console.log(`绘制点位置: X=${x}, Y=${y}`);
}
drawPoint([120, 350]); // 绘制点位置: X=120, Y=350

// 跳过部分元素提取指定项
function handleDate([year, , day]) {
  console.log(`年份: ${year}, 日期: ${day}`);
}
handleDate([2026, 10, 23]); // 年份: 2026, 日期: 23

2. 配合 Rest 参数收集未被显式解构的剩余内容

使用展开运算符 ...rest，可以将未匹配的其余属性收集为一个新对象或新数组：

// 对象剩余属性收集
function configureServer({ host, port = 8080, ...otherConfigs }) {
  console.log(`连接基础节点: ${host}:${port}`);
  console.log("其余附加配置:", otherConfigs);
}

configureServer({
  host: "api.internal.net",
  port: 9000,
  timeout: 5000,
  ssl: true,
  retryCount: 3
});
// host 为 "api.internal.net"，port 为 9000
// otherConfigs 得到 { timeout: 5000, ssl: true, retryCount: 3 }

图 3：对象解构与数组解构在匹配规则、语法形式与适用场景的对比

四、嵌套解构与实际业务场景

当外部传入复杂的深层对象（例如 API 响应结构或事件对象）时，可以在参数中使用嵌套解构语法直击目标数据。

// 嵌套提取内部属性
function handleOrder({ id, customer: { name, address: { city } } }) {
  console.log(`订单号: ${id}, 客户: ${name}, 发货城市: ${city}`);
}

const orderData = {
  id: "ORD-2026-9901",
  amount: 299.0,
  customer: {
    name: "王先生",
    contact: "13800000000",
    address: {
      province: "广东省",
      city: "深圳市",
      detail: "南山区科技园"
    }
  }
};

handleOrder(orderData);
// 打印结果：订单号: ORD-2026-9901, 客户: 王先生, 发货城市: 深圳市

五、规范与最佳实践总结

在函数参数中使用解构赋值能够极大提升接口设计的整洁度，但在工程落地时应遵循以下规范：

• 始终为可选的对象解构参数提供 = {} 默认值：避免在调用方不传任何实参时引发运行时 TypeError。
• 嵌套深度不宜超过两层：参数签名超过两层嵌套会导致函数头过于臃肿晦涩，阅读体验急剧下降；此时应在函数体内进行局部解构。
• 优先使用解构替代布尔标志参数：相比 fetchData(true, false, true)，使用 fetchData({ cache: true, retry: false, sync: true }) 具备更高的自解释性与可维护性。
• 配合 TypeScript 接口使用：在 TypeScript 项目中，参数解构与类型注解并存时，应将类型写在最外层，例如 function create({ url, method }: RequestOptions)。

图 4：函数参数解构实践要点与标准设计链路总结