前言

大家好，今天我們來學習一下JavaScript中的幾個容易混淆的運算符，它們分別為|、||、?、??運算符，并通過一些例子和場景說明他們的用法，避免在項目開發(fā)中混淆它們的用法。

位運算符或（|）

按位或（ | ）運算符在其中一個或兩個操作數(shù)對應的二進制位為 1 時，該位的結果值為 1。

例子：

const a = 3; // 11
const b = 5; // 101

console.log(a | b); // 111

在以上例子中，十進制3的二進制值為11，十進制5的二進制值為101，那么對a和b使用|運算符計算的結果為111。簡單來說，其實有點像是在對應二進制位為1的并集。

 11
101
// 保持位數(shù)一致，合并1
111

使用場景——合并權限：

const PERMISSION_READ = 1; //    0001
const PERMISSION_WRITE = 2; //   0010
const PERMISSION_EXECUTE = 4; // 0100
const PERMISSION_ADMIN = 8; //   1000

// 將READ和WRITE權限合并
const readAndWritePermissions = PERMISSION_READ | PERMISSION_WRITE;
console.log(readAndWritePermissions); // 輸出：3 (0011)

權限合并如何判斷是否具備合并后的權限？首先還得了解一下&運算符。

前面我們說了|像是求對應二進制位為1的并集，那么&想必大家也能猜到一點，那就是求對應位數(shù)為1的交集，只有兩個都為1時，對應位才為1，否則為0。

下面開始接著判斷前面合并的權限：

// 按規(guī)律設置權限值
const PERMISSION_READ = 1; //    0001
const PERMISSION_WRITE = 2; //   0010
const PERMISSION_EXECUTE = 4; // 0100
const PERMISSION_ADMIN = 8; //   1000

// 將READ和WRITE權限合并
const readAndWritePermissions = PERMISSION_READ | PERMISSION_WRITE;
console.log(readAndWritePermissions); // 輸出：3 (0011)

// 判斷readAndWritePermissions是否有可讀權限
consoloe.log(readAndWritePermissions & PERMISSION_READ)  // 0001 = PERMISSION_READ
// 計算過程
readAndWritePermissions：0011
PERMISSION_READ：        0001
result：                 0001
// 以上縮進為了讓大家便于閱讀計算交集

consoloe.log(readAndWritePermissions & PERMISSION_WRITE)  // 0010 = PERMISSION_WRITE
// 計算過程
readAndWritePermissions：0011
PERMISSION_WRITE：       0010
result：                 0010

如何一句話記住|和&的用法： 求對應二進制位數(shù)為1的并集和交集。

邏輯或運算符（||）

在JavaScript中，認為一個值不屬于真值的有以下情況：

• false
• 0
• ''（空字符串）
• null
• undefined
• NaN

邏輯或運算符||，用于判斷至少一個操作值是否為真。如果左側操作值為真，則返回它。如果為假，則計算并返回右側操作值。

測試例子：

// 由于沒有真值，所以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的計算結果為mobile的值"152****5086"。

三元運算符（?）

三元條件運算符是JavaScript中唯一使用三個操作數(shù)的運算符。一個條件后跟一個問號（?），如果條件為真值則執(zhí)行冒號（:）前的表達式；若條件為假值，則執(zhí)行最后的表達式。該運算符經(jīng)常當作if...else語句的簡捷形式來使用。

基本用法：

const age = 20;
const persion = age >= 18 ? "成年人" : "未成年人";
console.log(persion); // 輸出：成年人

進階用法：

const num = -1;
const result = num > 0 ? "正數(shù)" : num < 0 ? "負數(shù)" : "零";
console.log(result); // 輸出：負數(shù)

在以上例子中，首先判斷num是否大于零，條件不滿足，繼續(xù)執(zhí)行冒號:右邊的表達式判斷num < 0，發(fā)現(xiàn)滿足條件，直接返回結果負數(shù)。

空值合并運算符（??）

空合并運算符 (??) 也是一個邏輯運算符，當其左側操作值為null或者undefined時，它返回其右側操作值，否則返回其左側操作值。它與||運算符不同，它不會將其他虛假值（false、0、''、NaN）視為觸發(fā)回退。

例子1：

const name = null;
const name2 = 'vilan';

const result = name ?? name2;
console.log(result); // 輸出：vilan

在這個例子中，由于name的值為null，所以打印結果為vilan。

例子2：

const age = 0;
const age2 = 18;

const result = age ?? age2;
console.log(result); // 輸出：0

在這個例子中，即使age是0（被認為是假的），??操作符也不會將其視為回退的觸發(fā)器，因為0不是null或undefined。因此，result結果年齡的值為0。

總結

邏輯或運算符 (||) 和空合并運算符 (??)這兩個運算符經(jīng)常會被混淆或誤解，所以我們在使用時要特別注意它們的內(nèi)部原理及用法，避免出現(xiàn)意料之外的錯誤。