快捷導(dǎo)航

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

更新時(shí)間：2023年12月04日 12:01:02 作者：田本初

空值合并運(yùn)算符是一個(gè)邏輯運(yùn)算符,當(dāng)左側(cè)的操作數(shù)為null或undefined時(shí),會(huì)返回右側(cè)操作數(shù),否則返回左側(cè)操作數(shù),本文就來(lái)詳細(xì)的介紹一下如何使用

前言

空值合并運(yùn)算符（??）是一個(gè)邏輯運(yùn)算符，當(dāng)左側(cè)的操作數(shù)為null或undefined時(shí)，會(huì)返回右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)。

與邏輯或運(yùn)算符（||）的區(qū)別

邏輯或運(yùn)算符（||）是一個(gè)布爾邏輯運(yùn)算符，即當(dāng)左側(cè)操作數(shù)會(huì)被強(qiáng)制轉(zhuǎn)為布爾值，所有假值（“”,0,NaN,null,undefined）都會(huì)隱式轉(zhuǎn)換為false時(shí)，此時(shí)會(huì)返回右側(cè)操作數(shù)?？墒钱?dāng) 0，""和NaN 需要當(dāng)做有效值時(shí)，邏輯或運(yùn)算符（||）會(huì)導(dǎo)致以下錯(cuò)誤：

let count = 0;
let text = "";

let res = count || 42;
let message = text || "hi!";
console.log(res); // 42，而不是 0
console.log(message); // "hi!"，而不是 ""

相比邏輯或運(yùn)算符（||），空值合并運(yùn)算符（??），如果左側(cè)操作數(shù)為0，“”，NaN，也會(huì)被返回。

let count = 0;
let text = "";

let res = count ?? 42;
let message = text ?? "hi!";
console.log(res); // 0
console.log(message); // ""

總結(jié)

當(dāng)你需要 0，""和NaN 作為有效值時(shí)，使用空值合并運(yùn)算符（??），否則使用邏輯或運(yùn)算符（||）。

與 OR（||）和 AND（&&）運(yùn)算符

與 OR 和 AND 邏輯運(yùn)算符相似，當(dāng)左表達(dá)式不為 null 或 undefined 時(shí)，短路，不會(huì)對(duì)右表達(dá)式進(jìn)行求值。

function A() {
  console.log("函數(shù) A 被調(diào)用了");
  return undefined;
}
function B() {
  console.log("函數(shù) B 被調(diào)用了");
  return false;
}
function C() {
  console.log("函數(shù) C 被調(diào)用了");
  return "foo";
}

console.log(A() ?? C());
// 依次打印 "函數(shù) A 被調(diào)用了"、"函數(shù) C 被調(diào)用了"、"foo"
// A() 返回了 undefined，所以運(yùn)算符兩邊的表達(dá)式都被執(zhí)行了

console.log(B() ?? C());
// 依次打印 "函數(shù) B 被調(diào)用了"、"false"
// B() 返回了 false（既不是 null 也不是 undefined）
// 所以右側(cè)表達(dá)式?jīng)]有被執(zhí)行

不能與 OR 和 AND 運(yùn)算符共用

?? 不能與 AND（&&）和 OR（||）運(yùn)算符組合使用。會(huì)拋出語(yǔ)法錯(cuò)誤（因?yàn)榭罩岛喜⑦\(yùn)算符和其他邏輯運(yùn)算符之間的運(yùn)算優(yōu)先級(jí)/運(yùn)算順序是未定義的）。

錯(cuò)誤寫法：

null || undefined ?? "666"; // 拋出 SyntaxError
true || undefined ?? "666"; // 拋出 SyntaxError

但是，如果配合括號(hào)來(lái)顯示表明運(yùn)算優(yōu)先級(jí)，是可行的。

(null || undefined) ?? "666"; // 返回 "666"

實(shí)例

const nullValue = null;
const emptyText = ""; // 空字符串，是一個(gè)假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默認(rèn)值";
const valB = emptyText ?? "valB 的默認(rèn)值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默認(rèn)值"
console.log(valB); // ""（空字符串雖然是假值，但不是 null 或者 undefined）
console.log(valC); // 42