0%

JS 空值合併運算子 Nullish coalescing operator

1 分鐘閱讀時間
此篇會介紹 JS 中常用技巧「空值合併運算子」，以及其優缺點。

此篇會介紹 JS 中常用技巧「空值合併運算子」，以及其優缺點。

建議先閱讀前一篇「JS 短路求值 Short-circuit evaluation」後再接下去閱讀。

MDN：?? 左邊是 null 或 undefined 則不會執行右邊。

MDN 語法

leftExpr ?? rightExpr

e.g. 判斷是否使用過

情境：假設有一間銀行，發給新辦用戶 100 摳

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let person1 = {
  name: 'kent',
  age: 18,
  wallet: 0
};

let person2 = {
  name: 'clark',
  age: 20,
  wallet: null
};

person1.wallet ?? {personOld, ...{wallet: 100}}; // {person1: {…}, wallet: 0}
person2.wallet ?? {personNew, ...{wallet: 100}}; // {person2: {…}, wallet: 100}

e.g. 預設值

  • 再賦予值的過程透過 ?? 來設置預設值，只要 ?? 左邊 為 null、undefined 則就會賦予 ?? 右邊 為新值。
1
2
let n;
let num = n ?? '0';

使用 tips

不能與 &&、|| 一起使用。（不然會噴 SyntaxError）

1
2
null || undefined ?? "foo"; // 噴 SyntaxError
(null || undefined ) ?? "foo"; // 返回 "foo"

conclusion

reference