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

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

空值合并運算符是一個邏輯運算符,當左側的操作數(shù)為null或undefined時,會返回右側操作數(shù),否則返回左側操作數(shù),本文就來詳細的介紹一下如何使用

前言

空值合并運算符（??）是一個邏輯運算符，當左側的操作數(shù)為null或undefined時，會返回右側操作數(shù)，否則返回左側操作數(shù)。

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

邏輯或運算符（||）是一個布爾邏輯運算符，即當左側操作數(shù)會被強制轉為布爾值，所有假值（“”,0,NaN,null,undefined）都會隱式轉換為false時，此時會返回右側操作數(shù)?？墒钱?0，""和NaN 需要當做有效值時，邏輯或運算符（||）會導致以下錯誤：

let count = 0;
let text = "";

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

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

let count = 0;
let text = "";

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

總結

當你需要 0，""和NaN 作為有效值時，使用空值合并運算符（??），否則使用邏輯或運算符（||）。

與 OR（||）和 AND（&&）運算符

與 OR 和 AND 邏輯運算符相似，當左表達式不為 null 或 undefined 時，短路，不會對右表達式進行求值。

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

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

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

不能與 OR 和 AND 運算符共用

?? 不能與 AND（&&）和 OR（||）運算符組合使用。會拋出語法錯誤（因為空值合并運算符和其他邏輯運算符之間的運算優(yōu)先級/運算順序是未定義的）。

錯誤寫法：

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

但是，如果配合括號來顯示表明運算優(yōu)先級，是可行的。

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

實例

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

const valA = nullValue ?? "valA 的默認值";
const valB = emptyText ?? "valB 的默認值";
const valC = someNumber ?? 0;

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