快捷導(dǎo)航

JS中空值合并運(yùn)算符 ?? 的使用

更新時間：2025年07月17日 10:33:40 作者：Mr.怪獸

本文介紹了JavaScript中的空值合并運(yùn)算符??,解釋了它在null或undefined值時的使用,并對比了與邏輯運(yùn)算符||的不同之處,感興趣的可以了解一下

什么是空合并運(yùn)算符？

空合并運(yùn)算符 ?? (Nullish coalescing operator) 是一個邏輯運(yùn)算符，當(dāng)其左側(cè)操作數(shù)為 null 或 undefined 時，它返回其右側(cè)操作數(shù)，否則返回其左側(cè)操作數(shù)

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。

空值合并運(yùn)算符的工作原理

與邏輯或 (||) 運(yùn)算符不同，空值合并運(yùn)算符只會考慮 null 和 undefined，而不會將其他假值（如 false、0、NaN、"" 空字符串等）視為需要替代的值。

示例：

let a = null;
let b = 5;
let c = undefined;
let d = 0;

console.log(a ?? b);  // 5，因?yàn)?a 是 null
console.log(c ?? b);  // 5，因?yàn)?c 是 undefined
console.log(d ?? b);  // 0，因?yàn)?d 不是 null 或 undefined，而是 0

比較 ?? 和 ||

let x = 0;
let y = 10;

console.log(x || y);  // 10，因?yàn)?x 是假值（0）
console.log(x ?? y);  // 0，因?yàn)?x 不是 null 或 undefined

在上面的例子中：

使用 || 時，x 的值為 0，它被視為假值，所以返回了 y（即 10）。
使用 ?? 時，x 是 0，它不是 null 或 undefined，所以返回了 0。

使用空值合并運(yùn)算符的場景

提供默認(rèn)值：當(dāng)一個值可能為 null 或 undefined 時，可以用 ?? 來提供一個默認(rèn)值。

let userAge = null;
let defaultAge = 18;

let age = userAge ?? defaultAge;
console.log(age);  // 18，因?yàn)?userAge 是 null

避免無效值：當(dāng)你有多個潛在的 null 或 undefined 值時，可以使用空值合并運(yùn)算符來選擇第一個有效值。

let firstName = null;
let lastName = undefined;
let defaultName = "Anonymous";

let name = firstName ?? lastName ?? defaultName;
console.log(name);  // "Anonymous" 因?yàn)?firstName 和 lastName 都是 null 或 undefined

空值合并與可選鏈（?.）結(jié)合使用

空值合并運(yùn)算符和可選鏈（?.）結(jié)合使用時，能夠更安全地訪問對象的屬性，并且提供一個默認(rèn)值。

let user = { name: "Alice" };

let userAge = user?.age ?? 18;
console.log(userAge);  // 18，因?yàn)?user 對象中沒有 `age` 屬性，所以返回默認(rèn)值 18

在這個例子中，?. 用于安全地訪問 user.age，如果 age 不存在，它返回 undefined，然后 ?? 提供默認(rèn)值 18。

??運(yùn)算符與 || 運(yùn)算符的區(qū)別

很多人會搞混?? 運(yùn)算符與 || 運(yùn)算符，覺得這兩個實(shí)現(xiàn)的效果都一樣。其實(shí)這是不嚴(yán)謹(jǐn)?shù)?，它們之間還是有一些細(xì)微的差別。
?? 和 || 主要區(qū)別在于假 (false) 和假值(falsy) 的區(qū)別。

?? 僅當(dāng)左操作數(shù)為 null 或 undefined 時， ?? 運(yùn)算符才會將結(jié)果作為右操作數(shù)。
||運(yùn)算符會將左操作數(shù)的所有假值(falsy) 的結(jié)果作為右操作數(shù)

例如：

// 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

到此這篇關(guān)于JS中空合并運(yùn)算符 ?? 的使用的文章就介紹到這了,更多相關(guān)JS 空合并運(yùn)算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: