JavaScript中如何优雅地按条件向函数传递部分或全部参数

现有扩展运算符写法的错误原因 #

你写的代码出现非预期输出有两个核心问题：

• 运算符优先级问题：扩展运算符...的优先级低于三元运算符?:，你没加括号的情况下，代码会被解析为先对check执行扩展操作，再判断三元条件，逻辑完全错位。
• 数组元素格式错误：你把后三个参数写在了同一个字符串里['param4, param5, param6']，这是只有1个元素的数组，扩展后只能给item4传值，item5、item6没有接收到参数，所以输出为undefined。

更优雅的实现方案 #

方案1：直接在参数位用带括号的扩展 #

给三元运算加括号提升优先级，同时把后三个参数拆成独立数组元素：

const check = true;
postData('param1', 'param2', 'param3', ...(check ? ['param4', 'param5', 'param6'] : []));

方案2：先拼接参数数组再扩展（适合参数较多的场景） #

提前把参数按条件拼接好再传入函数，可读性更高：

const condition = true;
const params = [param1, param2, param3];
if (condition) {
  params.push(param4, param5, param6);
}
postData(...params);

方案3：可选参数逻辑下沉到函数内部（可选优化） #

如果这个条件判断是postData通用逻辑，可以把判断放到函数内，调用侧不用关心参数截断逻辑：

const postData = (item1, item2, item3, ...rest) => {
  // 函数内根据条件判断是否使用剩余参数
  const [item4, item5, item6] = someCondition ? rest : [];
  return `${item1} ${item2} ${item3} ${item4 ?? ''} ${item5 ?? ''} ${item6 ?? ''}`;
}
// 调用侧直接传全部参数即可
postData(param1, param2, param3, param4, param5, param6);

内容的提问来源于stack exchange，提问作者stacky