?、??与||的区别以及运用场景

4 阅读3分钟

在编程中,||(逻辑或)、??(空值合并操作符)和 ?.(可选链操作符)是处理默认值、空值和安全访问的常用操作符。

一、逻辑或 ||

功能

返回第一个 “真值”(truthy) ,若所有值都是 “假值”(falsy) ,则返回最后一个值。
假值(falsy) 包括:false0""(空字符串)、nullundefinedNaN

示例

const a = 0 || "默认值";
console.log(a); // "默认值"(0 是假值,被跳过)

const b = "" || "Hello";
console.log(b); // "Hello"(空字符串是假值)

const c = null || 42;
console.log(c); // 42

应用场景

  • 当需要为变量提供默认值,且所有假值(如 0""false)都应被替换时。
  • 例如:配置参数中空字符串、0 等需要被覆盖的情况。

二、空值合并操作符 ??

功能

  • 功能?? 是空值合并运算符,用于判断左侧的值是否为 nullundefined,如果是,则返回右侧的值;否则返回左侧的值。它与 || 的区别在于,?? 只会对 nullundefined 进行判断,而 || 会对所有“假值”进行判断(如 false0、空字符串等)
  • 注意0""false 等非 null/undefined 的假值会被保留。

示例

const a = 0 ?? "默认值";
console.log(a); // 0(0 不是 null/undefined,被保留)

const b = null ?? 42;
console.log(b); // 42

const c = "" ?? "Hello";
console.log(c); // ""(空字符串被保留)

应用场景

  • 当需要区分 null/undefined 和其他假值(如 0"")时。
  • 例如:数值计算中允许 0 作为有效输入,但需要处理 null/undefined

三、可选链操作符 ?.

功能

?. 是可选链操作符,用于安全地访问对象的嵌套属性或调用函数。它可以避免在访问一个可能是 nullundefined 的对象属性时抛出错误。若某一部分是 nullundefined,则整个表达式返回 undefined,而不是报错。

示例

const user = {
  profile: { name: "Alice" }
};

// 安全访问嵌套属性
console.log(user.profile?.age); // undefined(不会报错)
console.log(user.settings?.theme); // undefined

// 安全调用方法
const result = user.profile.getName?.(); // 如果 getName 不存在,不报错

应用场景

  • 访问不确定是否存在的嵌套对象属性或方法。
  • 例如:处理 API 返回的深层数据结构时,避免因字段缺失导致程序崩溃。

四、适用场景总结

1. ?. 的典型场景

  • 访问深层嵌套对象
const user = { address: { city: "北京" } };
const city = user?.address?.city; // "北京"
const street = user?.address?.street; // undefined(不会报错)
  • 调用可能不存在的方法
const obj = {};
obj.method?.(); // 不会报错

2. ?? 的典型场景

  • 允许 0 或空字符串作为有效值
const temperature = 0;
const displayTemp = temperature ?? "未知"; // 0
  • 合并配置时保留显式假值
const userConfig = { timeout: 0 };
const defaultConfig = { timeout: 3000 };
const timeout = userConfig.timeout ?? defaultConfig.timeout; // 0

3. || 的典型场景

  • 需要过滤所有假值
const input = "";
const sanitizedInput = input || "暂无输入"; // "暂无输入"
  • 布尔逻辑判断
if (isLoading || error) {
  // 当 isLoading 为 true 或 error 存在时执行
}
  • ?. :当你不确定某个对象的某个属性或方法是否存在时,使用可选链,避免访问 null 或 undefined 时引发错误。
  • ?? :当你只想处理 null 或 undefined,而不想覆盖其他“假值”时使用空值合并运算符。
  • || :当你需要处理所有的“假值”(包括 0false、空字符串等)时,选择第一个非假值的值。