在 JavaScript 开发中，函数参数默认值是简化代码、处理边界场景的常用语法，既能减少冗余的参数校验代码，也能提升代码的可读性和可维护性。但在实际使用中，很多开发者会陷入一个常见误区------认为只要传入的是"空值"（如 null），就会触发参数默认值，实则不然。本文将从核心规则、代码示例、实用技巧、进阶场景及踩坑点五个方面，详细解析函数参数默认值的生效逻辑，帮你彻底理清其中关键，避免开发中的相关踩坑。
首先，我们明确函数参数默认值的核心生效规则，这是理解所有场景的基础。
一、核心规则：默认值仅在参数为 undefined 时生效
JavaScript 官方规范明确规定：函数参数的默认值，仅在该参数的值为 undefined 时才会被启用。也就是说，只要开发者显式传入了参数值（无论该值是否为"空"），JavaScript 都会将其视为有效的参数输入，不会触发默认值。
以下几种常见场景，均不会触发参数默认值：
- 传入
null：最易踩坑的场景，很多开发者误将 null 等同于"未传参" - 传入
0、NaN：数值类型的"空值"或无效值 - 传入空字符串
''：字符串类型的空值 - 传入
false：布尔类型的"假值"
结合上述场景可总结，只有两种情况会触发默认值：一是调用函数时未传入该参数，二是主动传入 undefined。为了更直观地验证这一规则，我们通过具体代码示例进一步拆解不同传参场景的表现。
二、代码示例：直观理解生效场景
通过具体代码对比，能更清晰地看到不同传参方式下的结果差异，帮助我们牢记生效规则：
scss
// 定义带有默认值的函数
function getUserName(name = '匿名用户') {
console.log('当前用户：', name);
}
// 场景1：未传参 → 参数值为 undefined → 触发默认值
getUserName(); // 输出：当前用户：匿名用户
// 场景2：传入有效参数 → 不触发默认值
getUserName('前端开发者'); // 输出：当前用户：前端开发者
// 场景3：传入 null → 不触发默认值
getUserName(null); // 输出：当前用户：null
// 场景4：传入空字符串 → 不触发默认值
getUserName(''); // 输出：当前用户：
// 场景5：传入 0 → 不触发默认值
getUserName(0); // 输出：当前用户：0
// 场景6：主动传入 undefined → 触发默认值
getUserName(undefined); // 输出：当前用户：匿名用户从上述示例中可以明显看出，只有未传参和主动传入 undefined 时，默认值才会生效；而传入 null 等"空值"时，函数会直接使用传入的 null，这也是很多开发中出现空值报错的常见原因。基于这一问题，实际业务中我们常常需要实现"未传参、传 null 时均使用默认值"的需求，此时可借助专门的语法实现兜底处理。
三、实用技巧：让 null 也能触发默认值
实际业务开发中，我们常常需要实现"未传参、传 null 时，均使用默认值"的需求。此时，仅依靠参数默认值无法满足需求，推荐使用 空值合并运算符（??） 进行手动兜底，其逻辑更精准、更安全。
空值合并运算符（??）的核心逻辑：当左侧值为 null 或 undefined 时，返回右侧的值；否则返回左侧的值。与逻辑或运算符（||）相比，它不会误吞 0、false、空字符串等"假值"，能精准匹配"仅 null/undefined 兜底"的需求，更适合参数兜底场景，具体实现如下：
scss
// 优化后的函数：未传参、传 null 均触发默认值
function getUserName(name) {
// 当 name 为 null 或 undefined 时，使用默认值
name = name ?? '匿名用户';
console.log('当前用户：', name);
}
// 测试场景
getUserName(); // 输出：当前用户：匿名用户（未传参）
getUserName(null); // 输出：当前用户：匿名用户（传 null）
getUserName(''); // 输出：当前用户：（传空字符串，不触发默认值）
getUserName(0); // 输出：当前用户：0（传 0，不触发默认值）除了普通参数，函数参数解构赋值中，默认值的生效规则也遵循上述核心逻辑，这是开发中另一个高频使用场景，需重点关注。
四、进阶场景：解构赋值中的默认值
在函数参数解构赋值中，默认值的生效规则与普通参数一致，同样仅在参数为 undefined 时生效。但解构赋值存在特殊注意点：若未给解构对象设置默认值，当未传参时会直接报错，因此通常会给解构对象设置一个默认空对象，再给内部属性设置默认值，具体示例如下：
javascript
// 解构赋值 + 默认值（推荐写法）
function getUserInfo({ name = '匿名用户', age = 18 } = {}) {
console.log('用户信息：', { name, age });
}
// 场景1：未传参 → 解构对象为 undefined → 触发外层默认空对象，再触发内部属性默认值
getUserInfo(); // 输出：用户信息：{ name: '匿名用户', age: 18 }
// 场景2：传入部分参数 → 未传的属性触发默认值
getUserInfo({ name: '前端君' }); // 输出：用户信息：{ name: '前端君', age: 18 }
// 场景3：传入 null → 解构对象为 null → 不触发默认值，直接报错
// getUserInfo(null); // 报错：Cannot destructure property 'name' of 'null' as it is null.
// 场景4：优化 null 兼容（结合 ??）
function getUserInfoOpt({ name = '匿名用户', age = 18 } = {}) {
name = name ?? '匿名用户';
age = age ?? 18;
console.log('用户信息：', { name, age });
}
getUserInfoOpt(null); // 输出：用户信息：{ name: '匿名用户', age: 18 }结合前面的核心规则、基础示例、实用技巧及进阶场景，我们梳理出开发中最常见的踩坑点，帮助大家规避同类问题。
五、常见踩坑点总结
- 不要将 null 等同于 undefined：两者语义不同，null 是"主动传入的空值"，undefined 是"未定义的值"，只有后者会触发默认值。
- 避免使用 || 兜底默认值：|| 会将 0、false、空字符串等"假值"都视为无效值，可能导致预期之外的结果，优先使用 ??。
- 解构赋值时，务必给外层对象设置默认空对象（= {}），否则未传参时会报错。
综上，函数参数默认值的核心逻辑的是"仅 undefined 触发"，这是 JavaScript 官方规范定义的标准行为。掌握这一规则，结合空值合并运算符（??）处理 null 兼容、给解构对象设置默认空对象等技巧，能帮助我们写出更健壮、更符合预期的代码，减少因空值处理不当导致的线上问题。在实际开发中，只需根据业务场景灵活运用这些方法，就能兼顾代码的简洁性和可靠性。