在编程中,||
(逻辑或)、??
(空值合并操作符)和 ?.
(可选链操作符)是处理默认值、空值和安全访问的常用操作符。
一、逻辑或 ||
功能
返回第一个 “真值”(truthy) ,若所有值都是 “假值”(falsy) ,则返回最后一个值。
假值(falsy) 包括:false
、0
、""
(空字符串)、null
、undefined
、NaN
。
示例
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 等需要被覆盖的情况。
二、空值合并操作符 ??
功能
- 功能:
??
是空值合并运算符,用于判断左侧的值是否为null
或undefined
,如果是,则返回右侧的值;否则返回左侧的值。它与||
的区别在于,??
只会对null
和undefined
进行判断,而||
会对所有“假值”进行判断(如false
、0
、空字符串等) - 注意:
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
。
三、可选链操作符 ?.
功能
?.
是可选链操作符,用于安全地访问对象的嵌套属性或调用函数。它可以避免在访问一个可能是 null
或 undefined
的对象属性时抛出错误。若某一部分是 null
或 undefined
,则整个表达式返回 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
,而不想覆盖其他“假值”时使用空值合并运算符。||
:当你需要处理所有的“假值”(包括0
、false
、空字符串等)时,选择第一个非假值的值。