JS实现函数首参动态可选传参：数组为null时不传仅传配置对象

核心问题 #

直接对可能为null的arrayOfArguments使用展开运算符传参时，会出现两类异常：要么抛出类型错误，要么错误将null作为首个参数传入函数，无法满足以下业务规则：

• 当arrayOfArguments为有效值且长度大于0时，先传入展开后的数组元素，末尾追加配置对象{test: "test"}
• 当arrayOfArguments为null时，不传入数组相关参数，仅传入配置对象

可选实现方式 #

方式1：参数数组预拼接（兼容性最好、逻辑最清晰） #

提前判断参数数组的有效性，拼接出最终要传入的完整参数列表，再统一展开调用，没有隐式逻辑，所有支持ES6的环境都能稳定运行：

const config = { test: "test" };
// 按规则拼接最终参数
const args = Array.isArray(arrayOfArguments) && arrayOfArguments.length
  ? [...arrayOfArguments, config]
  : [config];
// 执行调用
functionName(...args);

方式2：空值兜底简化写法（代码量最少） #

展开空数组不会向函数传入任何参数，利用这个特性可以直接给可能为null的参数做空数组兜底，一行代码就能实现需求：

// 支持ES2020空值合并运算符的环境用这个
functionName(...(arrayOfArguments ?? []), { test: "test" });

// 需要兼容更低版本环境，且确认arrayOfArguments只会是数组或null时可以用这个
functionName(...(arrayOfArguments || []), { test: "test" });

这个写法同时兼容arrayOfArguments为空数组的场景：空数组展开无任何输出，最终传入的参数只有末尾的配置对象，完全符合要求。

避坑说明 #

不要直接使用functionName(...arrayOfArguments, { test: "test" })的写法，会出现以下问题：

• 当arrayOfArguments为null/undefined时，展开运算符会直接抛出TypeError: Found non-callable @@iterator错误
• 部分老旧转译工具会将该逻辑转译为把null作为首个参数传入函数，导致函数参数解析不符合预期

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