JavaScript中解构变量后传递给函数的快捷方式咨询

我太懂这种重复操作的麻烦了！每次解构完还要把变量一个个传给函数，确实有点啰嗦。这里有几个实用的快捷方式，能帮你省掉这些重复步骤：

对象场景：少写重复变量 #

如果你的源数据是对象，分两种情况来优化：

情况1：函数接受对象参数 #

直接在函数定义时就做参数解构，调用时只需要传原对象就行，完全不用提前解构：

// 定义函数时直接解构需要的属性
function showUserInfo({ name, age }) {
  console.log(`姓名：${name}，年龄：${age}`);
}

const user = { name: "Alice", age: 30, email: "alice@example.com" };
// 直接传原对象，省掉提前解构的步骤
showUserInfo(user);

情况2：函数接受独立参数 #

如果函数需要单个独立的参数，用对象展开+数组转换的方式，不用单独定义解构后的变量：

function showUserInfo(name, age) {
  console.log(`姓名：${name}，年龄：${age}`);
}

const user = { name: "Alice", age: 30, email: "alice@example.com" };
// 直接提取需要的属性并展开成参数
showUserInfo(...[user.name, user.age]);

// 或者更灵活的写法（适合需要多个属性时）
showUserInfo(...Object.values({ name: user.name, age: user.age }));

数组场景：简化参数传递 #

如果源数据是数组，同样可以用参数解构或展开运算符优化：

情况1：函数接受数组参数 #

在函数定义时解构数组参数，调用时直接传原数组：

function calculateSum([num1, num2]) {
  return num1 + num2;
}

const numbers = [10, 20, 30];
// 直接传原数组，不用提前解构
calculateSum(numbers);

情况2：函数接受独立参数 #

用数组切片+展开运算符，直接传递需要的元素：

function calculateSum(num1, num2) {
  return num1 + num2;
}

const numbers = [10, 20, 30];
// 提取前两个元素并展开成参数
calculateSum(...numbers.slice(0, 2));

通用小技巧 #

• 如果要传递解构后的所有变量，可以把解构后的对象转成数组再展开：

const { name, age, email } = user;
showFullInfo(...Object.values({ name, age, email }));

• 优先在函数定义阶段做参数解构，这是最简洁的方式，调用方完全不用处理解构逻辑。

内容的提问来源于stack exchange，提问作者αƞjiβ