JavaScript 中如何优雅地传递可选参数以触发默认行为-js教程-PHP中文网

JavaScript 中如何优雅地传递可选参数以触发默认行为

在封装 HTTP 请求库时，常需根据是否传入自定义 headers 来决定使用默认配置还是用户指定值；本文介绍通过空对象 {} 作为默认占位符，并结合 ?? 空值合并操作符，实现参数“未传入”与“显式传 null/undefined”的统一处理。

在封装 http 请求库时，常需根据是否传入自定义 headers 来决定使用默认配置还是用户指定值；本文介绍通过空对象 `{}` 作为默认占位符，并结合 `??` 空值合并操作符，实现参数“未传入”与“显式传 null/undefined”的统一处理。

在 TypeScript/JavaScript 的函数设计中，“不传参”与“传 undefined”在调用时语义等价，而 null 是显式传入的值——二者均会被 ?? 操作符捕获并替换为右侧默认值。因此，最简洁、语义清晰的写法是：

public async getWidgets(headers?: Record<string string>) {
  const getResponse: APIResponse = await super.get(SOME_URL, headers ?? {});
  return getResponse;
}</string>

该写法的关键在于：

Add Typescript Best Practices

在 CLAUDE.md 中配置 TypeScript 最佳实践和代码风格规则

下载

headers? 表示该参数可选（即调用时可完全省略），此时 headers 值为 undefined；
?? {} 将 undefined 或 null 统一转换为空对象 {}，从而精准匹配父类 get(url, headers = {}) 的默认参数逻辑；
父类中 if (Object.keys(headers).length === 0) 判断依然有效，因 {} 确实无自有属性。

⚠️ 注意事项：

❌ 不要使用 headers ?? null：null 会透传给父方法，导致 headers = {} 不生效（因 null 是真值，不会触发默认参数）；
❌ 避免 headers || {}：若传入 { Authorization: '' }（空字符串值），该对象为真值但可能不符合业务预期，|| 会错误忽略；?? 仅对 null/undefined 生效，更安全；
✅ 推荐类型标注 headers?: Record，既明确意图，又避免 any 类型带来的维护隐患。

总结：利用可选参数 + ?? {} 是兼顾简洁性、类型安全与语义准确的最佳实践。它让“未传参”和“传 null/undefined”自然归一，无缝衔接父类默认逻辑，无需冗余 if/else 分支，代码更健壮、易读、易测试。