JS 中如何正确覆盖对象默认值？

在 JavaScript 开发中，我们经常需要设置默认配置，并根据用户传入的选项覆盖部分默认值。常见的错误做法是使用逻辑或（||）来设置默认值，但这可能导致意外的行为。本文将介绍为什么 || 不适合对象合并，以及如何用 ES6 对象展开运算符（Spread Operator） 正确实现默认配置覆盖。

1. 问题：为什么 || 不够好？

假设我们有如下代码：

const enabledEngines = this.settings?.enabledEngines || {
    baidu: true,
    google: true,
    bing: true,
    so: true,
    sogou: true
};

❌ 潜在问题：

1. || 只检查“假值”（falsy），无法正确覆盖 false      - 如果 this.settings?.enabledEngines 是 { google: false }，由于它是一个对象（truthy），|| 不会生效，导致 google 仍然被设为 true（错误！）。      - 只有 undefined/null 时才会回退到默认值。

2. 无法部分覆盖      - 如果用户只想禁用某一个引擎（如 { bing: false }），其他引擎仍然应该保持默认值，但 || 无法实现这一点。

---

2. 解决方案：使用对象展开运算符（...）

正确的做法是让用户传入的配置覆盖默认值，而不是完全替换整个对象。ES6 的对象展开运算符（Spread Operator） 可以完美解决这个问题：

const enabledEngines = {
    baidu: true,
    google: true,
    bing: true,
    so: true,
    sogou: true,
    ...this.settings?.enabledEngines  // 用户设置会覆盖默认值
};

✅ 优势：

1. 正确覆盖 false 值      - 如果用户传入 { google: false }，google 会被正确设为 false，其他引擎保持默认。
2. 支持部分覆盖      - 用户只需传入需要修改的字段，其余保持默认。
3. 更安全，避免 || 的误判      - 即使 enabledEngines 是空对象 {}，也不会错误回退到默认值。

---

3. 实际示例对比

情况 1：用户禁用 Google

const userSettings = { google: false };


// ❌ 错误方式（||）
const badResult = userSettings || { google: true, bing: true };
// => { google: false } （bing 丢失！）


// ✅ 正确方式（...）
const goodResult = { google: true, bing: true, ...userSettings };
// => { google: false, bing: true } （正确！）

情况 2：用户未传任何设置

const userSettings = undefined;


// ❌ 错误方式（||）
const badResult = userSettings || { google: true };
// => { google: true } （勉强可用，但无法处理 false）


// ✅ 正确方式（...）
const goodResult = { google: true, ...userSettings };
// => { google: true } （同样可用，且更一致）

---

4. 什么时候可以用 ||？

虽然 || 不适合对象合并，但在某些情况下仍然有用：

• 适用于基本类型（如 string/number/boolean）的默认值     javascript   const limit = userLimit || 10;  // 如果 userLimit 是 0，可能有问题！  
• 如果确实需要整个对象回退（而非合并）     javascript   const config = userConfig || defaultConfig;  // 完全替换，而非合并  

但对于对象合并，... 是更安全、更精准的选择。