前言
大家好，今天我們來學(xué)習(xí)一下JavaScript中的幾個容易混淆的運(yùn)算符，它們分別為|、||、?、??運(yùn)算符，并通過一些例子和場景說明他們的用法，避免在項(xiàng)目開發(fā)中混淆它們的用法。
位運(yùn)算符或（|）
按位或（ | ）運(yùn)算符在其中一個或兩個操作數(shù)對應(yīng)的二進(jìn)制位為 1 時，該位的結(jié)果值為 1。
例子：
const a = 3; // 11
const b = 5; // 101
console.log(a | b); // 111
在以上例子中，十進(jìn)制3的二進(jìn)制值為11，十進(jìn)制5的二進(jìn)制值為101，那么對a和b使用|運(yùn)算符計(jì)算的結(jié)果為111。簡單來說，其實(shí)有點(diǎn)像是在對應(yīng)二進(jìn)制位為1的并集。
11
101
// 保持位數(shù)一致，合并1
111
使用場景——合并權(quán)限：
const PERMISSION_READ = 1; // 0001
const PERMISSION_WRITE = 2; // 0010
const PERMISSION_EXECUTE = 4; // 0100
const PERMISSION_ADMIN = 8; // 1000
// 將READ和WRITE權(quán)限合并
const readAndWritePermissions = PERMISSION_READ | PERMISSION_WRITE;
console.log(readAndWritePermissions); // 輸出：3 (0011)
權(quán)限合并如何判斷是否具備合并后的權(quán)限？首先還得了解一下&運(yùn)算符。
前面我們說了|像是求對應(yīng)二進(jìn)制位為1的并集，那么&想必大家也能猜到一點(diǎn)，那就是求對應(yīng)位數(shù)為1的交集，只有兩個都為1時，對應(yīng)位才為1，否則為0。
下面開始接著判斷前面合并的權(quán)限：
// 按規(guī)律設(shè)置權(quán)限值
const PERMISSION_READ = 1; // 0001
const PERMISSION_WRITE = 2; // 0010
const PERMISSION_EXECUTE = 4; // 0100
const PERMISSION_ADMIN = 8; // 1000
// 將READ和WRITE權(quán)限合并
const readAndWritePermissions = PERMISSION_READ | PERMISSION_WRITE;
console.log(readAndWritePermissions); // 輸出：3 (0011)
// 判斷readAndWritePermissions是否有可讀權(quán)限
consoloe.log(readAndWritePermissions & PERMISSION_READ) // 0001 = PERMISSION_READ
// 計(jì)算過程
readAndWritePermissions：0011
PERMISSION_READ： 0001
result： 0001
// 以上縮進(jìn)為了讓大家便于閱讀計(jì)算交集
consoloe.log(readAndWritePermissions & PERMISSION_WRITE) // 0010 = PERMISSION_WRITE
// 計(jì)算過程
readAndWritePermissions：0011
PERMISSION_WRITE： 0010
result： 0010
如何一句話記住|和&的用法： 求對應(yīng)二進(jìn)制位數(shù)為1的并集和交集。
邏輯或運(yùn)算符（||）
在JavaScript中，認(rèn)為一個值不屬于真值的有以下情況：
邏輯或運(yùn)算符||，用于判斷至少一個操作值是否為真。如果左側(cè)操作值為真，則返回它。如果為假，則計(jì)算并返回右側(cè)操作值。
測試?yán)樱?/strong>
// 由于沒有真值，所以a返回0
var a = false || 0 // a = 0
var b = '' || 0 || 1 // b = 1
var c = 1 || 2 // c = 1
場景例子：
let mobile = "152****5086";
let nickname = null;
let name = nickname || mobile; // "152****5086"
由于nickname用戶昵稱為null,j即為假值，因此name的計(jì)算結(jié)果為mobile的值"152****5086"。
三元運(yùn)算符（?）
三元條件運(yùn)算符是JavaScript中唯一使用三個操作數(shù)的運(yùn)算符。一個條件后跟一個問號（?），如果條件為真值則執(zhí)行冒號（:）前的表達(dá)式；若條件為假值，則執(zhí)行最后的表達(dá)式。該運(yùn)算符經(jīng)常當(dāng)作if...else語句的簡捷形式來使用。
基本用法：
const age = 20;
const persion = age >= 18 ? "成年人" : "未成年人";
console.log(persion); // 輸出：成年人
進(jìn)階用法：
const num = -1;
const result = num > 0 ? "正數(shù)" : num < 0 ? "負(fù)數(shù)" : "零";
console.log(result); // 輸出：負(fù)數(shù)
在以上例子中，首先判斷num是否大于零，條件不滿足，繼續(xù)執(zhí)行冒號:右邊的表達(dá)式判斷num < 0，發(fā)現(xiàn)滿足條件，直接返回結(jié)果負(fù)數(shù)。
空值合并運(yùn)算符（??）
空合并運(yùn)算符 (??) 也是一個邏輯運(yùn)算符，當(dāng)其左側(cè)操作值為null或者undefined時，它返回其右側(cè)操作值，否則返回其左側(cè)操作值。它與||運(yùn)算符不同，它不會將其他虛假值（false、0、''、NaN）視為觸發(fā)回退。
例子1：
const name = null;
const name2 = 'vilan';
const result = name ?? name2;
console.log(result); // 輸出：vilan
在這個例子中，由于name的值為null，所以打印結(jié)果為vilan。
例子2：
const age = 0;
const age2 = 18;
const result = age ?? age2;
console.log(result); // 輸出：0
在這個例子中，即使age是0（被認(rèn)為是假的），??操作符也不會將其視為回退的觸發(fā)器，因?yàn)?code style="margin: 0px 2px; padding: 2px 4px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; color: rgb(30, 107, 184); line-height: 1.8em; letter-spacing: 0em; background: none 0% 0% / auto no-repeat scroll padding-box border-box rgba(27, 31, 35, 0.05); width: auto; height: auto; border-style: none; border-width: 3px; border-color: rgb(0, 0, 0) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4); border-radius: 4px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all;">0不是null或undefined。因此，result結(jié)果年齡的值為0。
總結(jié)
邏輯或運(yùn)算符 (||) 和空合并運(yùn)算符 (??)這兩個運(yùn)算符經(jīng)常會被混淆或誤解，所以我們在使用時要特別注意它們的內(nèi)部原理及用法，避免出現(xiàn)意料之外的錯誤。
該文章在 2024/6/1 17:07:08 編輯過
400 186 1886
