本文深入解析 JavaScript 中的空值合并运算符（??）。它仅在左侧为 null 或 undefined 时返回右侧值，区别于逻辑或运算符（||）对所有假值的处理。文章通过代码示例展示了如何使用 ?? 设置默认值、处理多个潜在空值，并结合可选链（?.）安全访问对象属性，帮助开发者写出更健壮的代码。
什么是空值合并运算符？
空值合并运算符（??）是一种逻辑运算符。当左侧操作数的值为 null 或 undefined 时，该运算符返回右侧操作数；若左侧操作数不为 null 且不为 undefined，则直接返回左侧操作数。
const foo = null ?? 'default string';
console.log(foo); //output: "default string"
const bar = 0 ?? 'default string'
console.log(bar); //output: 0
基本语法
let result = value1 ?? value2;- 当
value1的值既不是null也不是undefined时，表达式返回value1。 - 当
value1的值是null或者undefined时，表达式返回value2。
空值合并运算符的工作原理
与逻辑或运算符（||）不同，空值合并运算符仅针对 null 和 undefined 进行判断。它不会将其他 falsy（假值）类型，例如 false、0、NaN 或 ""（空字符串等），视为需要被替代的空值。
示例：
let a = null;
let b = 5;
let c = undefined;
let d = 0;
console.log(a ?? b); // 5，因为 a 是 null
console.log(c ?? b); // 5，因为 c 是 undefined
console.log(d ?? b); // 0，因为 d 不是 null 或 undefined，而是 0比较 ?? 和 ||
let x = 0;
let y = 10;
console.log(x || y); // 10，因为 x 是假值（0）
console.log(x ?? y); // 0，因为 x 不是 null 或 undefined在上面的例子中：
- 使用
||时，x的值为0。由于该值被视为假值（falsy），因此表达式返回了y（即10）。 - 使用
??时，x是0，它不是null或undefined，所以返回了0。
使用空值合并运算符的场景
提供默认值： 当某个变量的值可能为 null 或 undefined 时，可以使用 ?? 来指定一个默认备用值。
let userAge = null;
let defaultAge = 18;
let age = userAge ?? defaultAge;
console.log(age); // 18，因为 userAge 是 null避免无效值： 当你需要处理多个可能为 null 或 undefined 的变量时，可以使用空值合并运算符依次尝试，直到找到第一个非空的有效值。
let firstName = null;
let lastName = undefined;
let defaultName = "Anonymous";
let name = firstName ?? lastName ?? defaultName;
console.log(name); // "Anonymous" 因为 firstName 和 lastName 都是 null 或 undefined空值合并与可选链（?.）结合使用
将空值合并运算符与可选链操作符（?.）结合使用，可以更安全地访问嵌套对象属性，并在属性不存在时提供默认值。
let user = { name: "Alice" };
let userAge = user?.age ?? 18;
console.log(userAge); // 18，因为 user 对象中没有 `age` 属性，所以返回默认值 18在这个例子中，?. 用于安全地访问 user.age。如果 age 属性不存在，可选链返回 undefined，随后 ?? 提供默认值 18。
??运算符 与 || 运算符的区别
许多开发者容易混淆 ?? 运算符与 || 运算符，认为两者效果相同。实际上，这种看法并不严谨，它们之间存在关键差异，主要体现在对 false（布尔假值）与 falsy（假值类型）的处理逻辑上。
- ?? 运算符仅在左操作数为 null 或 undefined 时，才返回右操作数。
- || 运算符会将左操作数的所有 falsy（假值）类型结果视为需要替换的条件，从而返回右操作数。
例如：
// 1. 使用 0 作为输入
const a = 0;
console.log(`a || 10 = ${a || 10}`); // a || 10 = 10
console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = 0
// 2. 空字符串 '' 作为输入
const a = ''
console.log(`a || "ABC" = ${a || "ABC"}`); // a || "ABC" = ABC
console.log(`a ?? "ABC" = ${a ?? "ABC"}`); // a ?? "ABC" =
// 3. 使用 null 作为输入
const a = null;
console.log(`a || 10 = ${a || 10}`); // a || 10 = 10
console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = 10
// 4. 使用 undefined 作为输入
const a = {name: ''}
console.log(`a.name ?? 'varun 1' = ${a.name ?? 'varun 1'}`);
console.log(`a.name || 'varun 2' = ${a.name || 'varun 2'}`);
// a.name ?? 'varun 1' =
// a.name || 'varun 2' = varun 2
// 5. 使用 false 作为输入
const a = false;
console.log(`a || 10 = ${a || 10}`); // a || 10 = 10
console.log(`a ?? 10 = ${a ?? 10}`); // a ?? 10 = false
到此这篇关于JS中空值合并运算符 ?? 的使用的文章就介绍到这了,更多相关JS 空合并运算符内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！