iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
1
Modern Web

JavaScript 之旅系列 第 29

JavaScript 之旅 (29):Logical assignment operators ( &&=、||= 和 ??= )

本篇介紹 ES2021 (ES12) 提供的 Logical assignment operators ( &&=||=??= )。

過去的邏輯運算子和賦值表達式

假設你要先用 &&||?? 運算子檢查某個值是否合適,然後再進行賦值,常見的作法有以下幾種。

例如:nickName 是用來儲存使用者的暱稱,若沒有設定 nickName,預設值為空字串,但顯示在 UI 上會顯示 Anonymous,代表是否者未設定暱稱 (即匿名)。常見的作法會先用 || 運算子

let nickName = '';

nickName = nickName || 'Anonymous';
console.log(nickName);
// Anonymous

另一個情境:有一個 text 變數,若沒有設定初始值時,會設為預設文字 default。常見的作法會先用 ?? 運算子 (或 || 運算子,依情境而定) 檢查,然後再用 = 進行賦值:

let text;

text = text ?? 'default';
console.log(text);
// default

看起來沒什麼問題啊?但本篇要介紹的提案將以上寫法更簡化!把邏輯運算子和賦值表達式合在一起!

現代的邏輯賦值運算子

把某個運算子和賦值表達式合在一起其實很常見,例如:

let count = 0;

count += 66;
console.log(count);
// 66

count -= 10;
console.log(count);
// 56

count /= 4;
console.log(count);
// 14

count *= 2;
console.log(count);
// 28

所以將邏輯運算子和賦值表達式合在一起就是邏輯賦值運算子:&&=||=??=

資料來源


上一篇
JavaScript 之旅 (28):Numeric Separators
下一篇
JavaScript 之旅 (30):總結 & 系列目錄
系列文
JavaScript 之旅30

尚未有邦友留言

立即登入留言