1，前言
博主收錄了一些在實際開發過程中，很實用且方便的JS操作符，熟練掌握的話，不僅程式碼看上去高大上（實為裝逼），而且簡潔大方。
2，程式碼+應用
2.1，短路運算子 ||
從左往右
1，只要有一個條件為true時，結果就為true。
2，當兩個條件都為false時，結果才為false。
3，當一個條件為true時，後面的條件不再判斷。
注意：當數值參與邏輯或運算時，結果為true，會返回第一個為真的值；如果結果為false，會返回第二個為假的值；
console.log( 5 || 4 );//當結果為真時，返回第一個為真的值 所以此處列印的是5
console.log( 0 || false );//當結果為假時，返回第二個為假的值 所以此處列印的是false
在實際開發中，可以利用這一特性，實現如下操作。
1，給某個變數設定初始值
var name = this.name || "張三";
2，判斷某個值
// 如果age等於10或者等於20或者等於30都執行
if(age === 10 || age === 20 || age === 30){
console.log(age)
}
2.2，短路運算子 &&
從左往右
1，兩邊條件都為true時，結果才為true。
2，如果有一個為false，結果就為false。
3，當第一個條件為false時，就不再判斷後面的條件。
注意：當數值參與邏輯與運算時，結果為true，那麼會返回的會是第二個為真的值；如果結果為false，返回的會是第一個為假的值
在實際開發中，可以利用這一特性，實現如下操作。
1，如果某個值為true，則執行某個function
function pdd(){
console.log("我是鵬多多");
};
var type = true;
type && pdd();//此時會執行pdd方法，列印出"我是鵬多多";
2，判斷某個值
//如果age大於10並且小於20才會執行
if(age > 10 && age < 20){
console.log(age)
}
2.3，零合併操作符 ??
零合併操作符 ?? 是一個邏輯操作符，當左側的運算元為 null 或者 undefined 時，返回右側運算元，否則返回左側運算元。
空值合併操作符一般用來為常量提供預設值，保證常量不為 null 或者 undefined，以前一般使用|| 來做這件事，比如本文2.1章的例子。然而，由於 || 是一個布林邏輯運算子，左側的運算元會被強制轉換成布林值用於求值。任何假值0， ''， NaN， null， undefined都不會被返回。這導致如果你使用 0、''、NaN 作為有效值，就會出現不可預料的後果。正因為 || 存在這樣的問題，而 ?? 的出現就是解決了這些問題，?? 只會在左側為 undefined、null 時才返回後者，?? 可以理解為是 || 的完善解決方案。
在實際開發中，可以利用這一特性，實現如下操作。
1，給某個變數設定初始值
undefined ?? '預設值' //列印出 '預設值'
null ?? '預設值' //列印出 '預設值'
false ?? '預設值' //列印出 'false'
0 ?? '預設值' //列印出 0
NaN ?? '預設值' //列印出 NaN
'' ?? '預設值' //列印出 ''
2，在賦值的時候，可以運用賦值運算子的簡寫 ??=
let pdd = {a: null, b: 10}
pdd.a ??= 20
pdd.b ??= 20
console.log(pdd) // 輸出 { a: 20, b: 10 }
2.4，可選鏈操作符 ?.
可選鏈操作符 ?. 允許讀取位於連線物件鏈深處的屬性的值，而不必驗證鏈中的每個引用是否有效。?. 操作符的功能類似於.鏈式操作符，不同之處在於，在引用為null或者undefined的情況下不會引起錯誤，該表示式短路返回值是undefined。
在實際開發中，可以利用這一特性，實現如下操作。
1，當嘗試訪問可能不存在的物件屬性時
var obj = {
a: '張三',
b: {
c: '李四'
}
};
console.log(obj.b?.c) // 輸出 李四
console.log(obj.age?.c) // 輸出 undefined
console.log(obj.name?.()) // 不報錯，輸出 undefined
2，在不確定的情況下獲取一個深度巢狀的子屬性
var obj = {
a:'李四',
b:'王五',
c:{
name:"你猜我有沒有"
}
};
//原本的寫法
if(obj && obj.c && obj.c.name){
console.log("哈哈哈")
};
//使用可選鏈操作符的寫法
if(obj?.c?.name){
console.log("哈哈哈")
};
2.5，位運算子 & 和 |
位運算子是按位進行運算，& 與、| 或，使用位運算子時會拋棄小數位，我們可以利用| 0來給數字取整。也可以使用 & 1來判斷奇偶數
在實際開發中，可以利用這一特性，實現如下操作。
1，取整
1.3 | 0 // 列印出 1
-1.9 | 0 // 列印出 -1
2，判斷奇偶數
var num = 5
!!(num & 1) // true
!!(num % 2) // true
2.6，雙位運算子 ~~
可以使用雙位操作符來替代正數的 Math.floor( )，替代負數的 Math.ceil( )。雙否定位操作符的優勢在於它執行相同的操作執行速度更快，對正數來說~~運算結果與 Math.floor( ) 運算結果相同，而對於負數來說與 Math.ceil( ) 的運算結果相同。
在實際開發中，可以利用這一特性，實現如下操作。
1，取整
Math.floor(3.9) === 3 // true
~~3.9 === 3 // true
Math.ceil(-4.5) === -4 // true
~~-4.5 === -4 // true
2.7，邏輯運算子 !
!，可將變數轉換成boolean型別，null、undefined和空字串''取反都為true，其餘都為false。一般來說會有好幾種用法，!，!!，!=，!==，下面來逐個說明。
在實際開發中，可以利用這一特性，實現如下操作。
1，利用!取反
let a = false;
console.log(!a); //列印出true
在vue.js中，利用這一特性很容易就可以寫一個開關函式
<div v-show="isShow">我是一個DIV</div>
show(){
this.isShow = !this.isShow;
};
2，利用!!來做型別判斷，判斷變數a不等於null，undefined和''才能執行的方法
var a;
if(a != null && typeof(a) != undefined && a != ''){
//a有內容才執行的程式碼
}
實際上我們只需要寫一個判斷表達
if(!!a){
//a有內容才執行的程式碼...
}
3，利用!=和!==來判斷兩個值是否相等
一般來說都是用的全不等於!==，因為使用不等於!=的話，0 != ""返回的是false，原因是JS中0和''轉化成布林型都為false，所以推薦還是使用全不等於!++。
var a = 0;
var b = 0;
var c = "0";
var d = '';
a != b //false
a != c // false number和string的0 被判斷為相等
a != d // false 0和空字串被判斷為相等
a !== b // false
a !== c // true
a !== d // true
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]，列印一下看看你得到了什麼？
如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END
往期文章
個人主頁