JavaScript 中的效率提升工具：??、?. 等现代语法技巧

在日常 JavaScript 开发中，我们经常会遇到 判空处理、链式调用、默认值设置 等场景。传统写法往往需要嵌套冗余的逻辑，不仅繁琐，还容易出错。

ES2020 及之后的版本引入了一些新特性，如 空值合并运算符 (??) 和 可选链运算符 (?.)，极大地提升了代码的可读性与执行效率。本文将带你梳理这些现代工具的用法和应用场景。

1. 空值合并运算符（??）

1.1 传统写法的问题

在给变量设置默认值时，过去常用 逻辑或运算符 (||)：

const input = "";
const result = input || "默认值";
console.log(result); // "默认值"

这里有一个问题：空字符串 ""、数字 0、布尔值 false 都会被当作 假值，从而错误地触发默认值。

1.2 使用 ?? 的改进

?? 只在 值为 null 或 undefined 时才会使用默认值。

const input = "";
const result = input ?? "默认值";
console.log(result); // ""

这样我们就能避免误判，确保只有在真正的“缺失值”时才使用默认值。

✅ 应用场景

• 用户输入可能为空，但需要区分 "" 和 undefined。
• 配置项读取时避免覆盖有效的 0 或 false。

2. 可选链运算符（?.）

2.1 深层访问的痛点

假设我们有一个嵌套对象：

const user = {
  profile: {
    address: {
      city: "Shanghai"
    }
  }
};

若要安全获取 user.profile.address.city，传统写法往往需要层层判断：

const city = user && user.profile && user.profile.address && user.profile.address.city;

这种写法不仅冗长，还极容易出错。

2.2 使用 ?. 的简化

可选链运算符让代码更简洁：

const city = user?.profile?.address?.city;
console.log(city); // "Shanghai"

如果某一层级不存在，表达式会立即返回 undefined，而不会抛出错误。

✅ 应用场景

• 处理后端返回的嵌套 JSON 数据。
• 安全读取可能为空的 DOM 节点属性。
• 避免因 null 或 undefined 引发的运行时错误。

3. ?? 与 ?. 的组合使用

很多时候，这两个运算符可以一起使用：

const config = {
  api: {
    retryCount: 0
  }
};

const retry = config?.api?.retryCount ?? 3;
console.log(retry); // 0

在这个例子中：

• ?. 保证访问安全，不会报错。
• ?? 确保在 retryCount 缺失时，使用默认值 3，但不会误判 0。

4. 其他效率提升工具

除了 ?? 和 ?.，现代 JavaScript 还提供了许多高效特性：

4.1 Nullish Assignment (??=)

如果变量为 null 或 undefined，才进行赋值：

let count;
count ??= 10;
console.log(count); // 10

4.2 可选链调用函数 (?.())

安全调用可能不存在的方法：

const handler = config?.onClick?.();

4.3 动态属性访问 (?.[])

当属性名动态变化时依旧安全：

const value = user?.settings?.["theme"];

5. 总结

现代 JavaScript 的新特性极大提升了代码的 安全性 与 可读性：

• ?? —— 精准控制默认值，仅在 null/undefined 时触发。
• ?. —— 优雅地处理深层对象访问，避免冗长判断。
• ??=、?.()、?.[] —— 进一步扩展场景，提升开发体验。

在实际项目中，合理使用这些语法糖，可以让代码更简洁、更健壮，从而显著提升开发效率。