或許你在閱讀別人代碼時候會遇到以下運算符管怠，總有一種似曾相識的感覺淆衷，但又說不清楚它的具體使用方法。今天我們就來一一說一下它們吧~~~
一渤弛、?. 可選鏈操作符
可選鏈操作符?.允許讀取位于連接對象鏈深處的屬性的值祝拯，而不必明確驗證鏈中的每個引用是否有效。操作符會隱式檢查對象的屬性是否為 null 或 undefined她肯，代碼更加優(yōu)雅簡潔佳头。
const obj = {
name: "杰克",
foo: {
bar: {
baz: 18,
fun: () => {},
},
},
school: {
students: [
{
name: "jack",
},
],
},
say() {
return "www.baidu.com";
},
};
console.log(obj?.foo?.bar?.baz); // 18
console.log(obj?.school?.students?.[0]["name"]); // jack
console.log(obj?.say?.()); // www.baidu.com
二、?: 三元運算符
它也叫三目運算符晴氨。額康嘉，這個就很常用了。
對于條件表達式b ? x : y籽前，先計算條件 b亭珍，然后進行判斷。如果 b 的值為 true聚假，計算 x 的值块蚌，運算結果為 x 的值；否則膘格，計算 y 的值，運算結果為 y 的值财松。
console.log(false ? 1 : 2); // 2
console.log(true ? 1 : 2); // 1
三瘪贱、?? 空值合并運算符
如果你第一次遇到它，看到的是兩個問號辆毡，估計腦海里還有更多的問號 (朋友們菜秦，你是否也有很多問號)
兩個問號??其美名曰空值合并操作符，如果第一個參數(shù)不是 null/undefined舶掖，將返回第一個參數(shù)球昨，否則返回第二個參數(shù)。
console.log(1 ?? "www.baidu.com"); // 1
console.log(false ?? "www.baidu.com"); // false
console.log(null ?? "www.baidu.com"); // www.baidu.com
console.log(undefined ?? "www.baidu.com"); // // www.baidu.com
所以眨攘，只有當?shù)谝粋€參數(shù)是 null/undefined 的時候主慰，才返回第二個參數(shù)。
注意鲫售，雖然 JS 中的未定義 undefined共螺、空對象 null、數(shù)值 0情竹、空數(shù)字 NaN藐不、布爾 false，空字符串''都是假值，但??非空運算符只對 null/undefined 做處理雏蛮。
它與邏輯或操作符（||）不同涎嚼，邏輯或操作符會在左側操作數(shù)為假值時返回右側操作數(shù)。比如為假值（'' 或 0）時挑秉。
console.log(1 || 2); // 1
console.log("" || 2); // 2
四法梯、??= 空賦值運算符
哦，現(xiàn)在還不止兩個問號衷模，還多了一個等號鹊汛，題目越來越難了么？
??=空賦值運算符阱冶，僅當值為 null 或 undefined 時刁憋，此賦值運算符才會賦值。
const student = { age: 20 };
student.age ??= 18;
console.log(student.age); // 20
student.name ??= "jack";
console.log(student.name); // 'jack'
它和上面的??空值合并運算符是有聯(lián)系的：x ??= y等價于x ?? (x = y)木蹬，只有當 x 為 null 或 undefined 時至耻，x = y才會執(zhí)行。
let x = null;
x ??= 20;
console.log(x); // 20
let y = 5;
y ??= 10;
console.log(y); // 5
五镊叁、邏輯與(&&)和邏輯或(||)
先來復習一下吧：
邏輯與(&&)：當?shù)谝粋€操作數(shù)為 true 時尘颓，將不會判斷第二個操作數(shù)，因為無論第二個操作數(shù)為何晦譬，最后的運算結果一定是 true疤苹。
實際開發(fā)中，利用設個特性敛腌，可實現(xiàn)如下操作：
1卧土、如果某個值為 true，則運行某個 function
function say() {
console.log("www.baidu.com");
}
let type = true;
type && say(); // www.baidu.com
2像樊、判斷某個值
// 如果age大于10并且小于20才會執(zhí)行
if (age > 10 && age < 20) {
console.log(age);
}
邏輯或(||): 當?shù)谝粋€操作數(shù)為 false 時(也就是 js 的假值)尤莺，將不會判斷第二個操作數(shù)，因為此時無論第二個操作數(shù)為何生棍，最后的運算結果一定是 false颤霎。
實際開發(fā)中，利用設個特性涂滴，可實現(xiàn)如下操作：
A友酱、給某個變量設置初始值
let student = {
name: "jack",
};
console.log(student.age || "www.baidu.com"); // www.baidu.com
B、判斷某個值
// 如果age等于10或者等于20或者等于30都執(zhí)行
if (age === 10 || age === 20 || age === 30) {
console.log(age);
}
六氢妈、位運算符 & 和 |
位運算符是按位進行運算粹污，&(與)、|(或)首量，使用位運算符時會拋棄小數(shù)位壮吩，我們可以利用|0來給數(shù)字取整进苍。也可以使用&1來判斷奇偶數(shù)。
實際開發(fā)中鸭叙，利用設個特性觉啊，可實現(xiàn)如下操作：
1、取整
1.3 |
(0 - // 打印出 1
1.9) |
0; // 打印出 -1
2沈贝、判斷奇偶數(shù)
let num = 5;
!!(num & 1); // true
!!(num % 2); // true
七杠人、雙位運算符 ~~
可以使用雙位操作符來替代正數(shù)的 Math.floor( )，替代負數(shù)的 Math.ceil( )宋下。
雙否定位操作符的優(yōu)勢在于它執(zhí)行相同的操作運行速度更快嗡善，對正數(shù)來說~~運算結果與 Math.floor( ) 運算結果相同，而對于負數(shù)來說與 Math.ceil( ) 的運算結果相同学歧。
Math.floor(5.2) === 5; // true
~~3.2 === 3; // true
Math.ceil(-6.6) === -6; // true
~~-4.5 === -6; // true
八罩引、邏輯運算符 !
!，可將變量轉換成 boolean 類型枝笨，null袁铐、undefined 和空字符串''取反都為 true，其余都為 false横浑。一般來說會有好幾種用法剔桨，!，!!徙融，!=洒缀，!==。
8.1 利用!取反
let cat = false;
console.log(!cat); // true
8.2 利用!!做類型判斷
判斷變量 a 不等于 null欺冀，undefined 和''才能執(zhí)行的方法帝洪。
var a;
if (a != null && typeof a != undefined && a != "") {
//a有內容才執(zhí)行的代碼
}
等價于：
if (!!a) {
//a有內容才執(zhí)行的代碼...
}
8.3 兩個值是否相等
一般來說都是用的全不等于!==，因為使用不等于!=的話脚猾，0 != ""返回的是 false，原因是 JS 中 0 和''轉化成布爾型都為 false砚哗，所以推薦還是使用全不等于!==龙助。
let a = 0;
let b = 0;
let c = "0";
let d = '';
a != b //false
a != c // false number和string的0 被判斷為相等
a != d // false 0和空字符串被判斷為相等
a !== b // false
a !== c // true
a !== d // true
