在JavaScript的函数开发中，解构参数可以让函数直接接收对象或数组的结构化数据，避免手动从参数中提取属性或元素，大幅简化代码逻辑。解构参数的核心是将函数参数的解构语法和函数定义结合，让参数传递更直观。
JS函数解构参数的基本定义方式
JS函数解构参数分为对象解构参数和数组解构参数两种类型，分别对应函数接收对象类型和数组类型参数的场景，语法上和常规的解构赋值逻辑一致，只是将解构语句放在函数参数位置。
对象解构参数定义
对象解构参数允许函数直接提取传入对象的指定属性，不需要在函数体内手动写obj.name这样的提取逻辑。基本语法是在函数参数位置使用花括号包裹需要提取的属性名。
// 基础对象解构参数定义
function printUserInfo({ name, age }) {
console.log(`姓名：${name}，年龄：${age}`);
}
// 传入对象参数
printUserInfo({ name: '张三', age: 25 }); // 输出：姓名：张三，年龄：25
如果传入的对象没有对应的属性，解构出来的变量会是undefined，可以结合默认值避免这个问题。
// 带默认值的解构参数
function printUserInfo({ name = '未知', age = 0 } = {}) {
console.log(`姓名：${name}，年龄：${age}`);
}
// 传入空对象或者不传参数
printUserInfo({}); // 输出：姓名：未知，年龄：0
printUserInfo(); // 输出：姓名：未知，年龄：0
这里第二个默认值{}是为了避免不传参数时解构undefined报错，属于对象解构参数的常用兜底写法。
数组解构参数定义
数组解构参数适用于函数接收数组类型参数的场景，通过方括号提取数组对应位置的元素，语法和数组解构赋值一致。
// 基础数组解构参数定义
function sumFirstTwo([a, b]) {
return a + b;
}
// 传入数组参数
console.log(sumFirstTwo([1, 2, 3])); // 输出：3
数组解构参数同样支持默认值和剩余参数，比如提取数组前几个元素，剩下的元素用剩余参数收集。
// 带剩余参数的数组解构
function handleArray([first, second, ...rest]) {
console.log('第一个元素：', first);
console.log('第二个元素：', second);
console.log('剩余元素：', rest);
}
handleArray([10, 20, 30, 40, 50]);
// 输出：
// 第一个元素：10
// 第二个元素：20
// 剩余元素：[30,40,50]
解构参数的实际应用场景
场景一：配置项参数传递
很多函数的参数都是配置对象，使用对象解构参数可以让调用方不用关心参数顺序，只需要传对应的属性即可，比如常见的请求函数配置。
function request({ url, method = 'GET', headers = {}, body = null }) {
console.log('请求地址：', url);
console.log('请求方法：', method);
console.log('请求头：', headers);
console.log('请求体：', body);
// 实际请求逻辑省略
}
// 调用时不需要按顺序传参，只需要传对应的配置属性
request({
url: 'https://ipipp.com/api/list',
method: 'POST',
body: { page: 1 }
});
场景二：数组数据批量处理
当函数需要处理数组的结构化数据时，数组解构参数可以快速提取需要的元素，比如处理坐标点、RGB颜色值等场景。
// 处理RGB颜色值，提取红、绿、蓝分量
function rgbToHex([r, g, b]) {
const toHex = (num) => num.toString(16).padStart(2, '0');
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
console.log(rgbToHex([255, 128, 0])); // 输出：#ff8000
解构参数的注意事项
- 对象解构参数如果允许不传参，一定要设置默认值为
{}，否则不传参数时解构会报错。 - 解构参数的变量名要和传入对象/数组的结构对应，对象解构看属性名，数组解构看位置。
- 解构参数可以和普通参数混合使用，比如先放普通参数，再放解构参数，或者反过来。
混合参数的示例如下：
// 混合普通参数和解构参数
function createUser(id, { name, age }) {
return {
id,
name,
age
};
}
const user = createUser(1, { name: '李四', age: 30 });
console.log(user); // 输出：{ id: 1, name: '李四', age: 30 }
常见问题解答
解构参数可以重命名吗？
可以，对象解构参数支持属性重命名，语法是{ 原属性名: 新变量名 }，示例如下：
function printName({ username: name }) {
console.log('用户名：', name);
}
printName({ username: 'test_user' }); // 输出：用户名：test_user
解构参数支持嵌套解构吗？
支持，无论是对象还是数组都可以嵌套解构，比如提取对象内部的嵌套属性：
function printAddress({ address: { city, street } }) {
console.log(`城市：${city}，街道：${street}`);
}
printAddress({
address: {
city: '北京',
street: '朝阳路'
}
}); // 输出：城市：北京，街道：朝阳路