1荔睹，前言
博主收錄了一些在實(shí)際開發(fā)過程中狸演，很實(shí)用且方便的JS操作符，熟練掌握的話僻他，不僅代碼看上去高大上（實(shí)為裝逼）宵距，而且簡潔大方。
2吨拗，代碼+應(yīng)用
2.1满哪，短路運(yùn)算符 ||
從左往右
1，只要有一個(gè)條件為true時(shí)劝篷，結(jié)果就為true哨鸭。
2，當(dāng)兩個(gè)條件都為false時(shí)娇妓，結(jié)果才為false像鸡。
3，當(dāng)一個(gè)條件為true時(shí)峡蟋，后面的條件不再判斷坟桅。
注意：當(dāng)數(shù)值參與邏輯或運(yùn)算時(shí)，結(jié)果為true蕊蝗，會(huì)返回第一個(gè)為真的值仅乓；如果結(jié)果為false，會(huì)返回第二個(gè)為假的值蓬戚；
console.log( 5 || 4 );//當(dāng)結(jié)果為真時(shí)夸楣，返回第一個(gè)為真的值 所以此處打印的是5
console.log( 0 || false );//當(dāng)結(jié)果為假時(shí)，返回第二個(gè)為假的值 所以此處打印的是false
在實(shí)際開發(fā)中子漩，可以利用這一特性豫喧，實(shí)現(xiàn)如下操作。
1幢泼，給某個(gè)變量設(shè)置初始值
var name = this.name || "張三";
2紧显，判斷某個(gè)值
// 如果age等于10或者等于20或者等于30都執(zhí)行
if(age === 10 || age === 20 || age === 30){
console.log(age)
}
2.2，短路運(yùn)算符 &&
從左往右
1缕棵，兩邊條件都為true時(shí)孵班，結(jié)果才為true。
2招驴，如果有一個(gè)為false篙程，結(jié)果就為false。
3别厘，當(dāng)?shù)谝粋€(gè)條件為false時(shí)虱饿，就不再判斷后面的條件。
注意：當(dāng)數(shù)值參與邏輯與運(yùn)算時(shí)，結(jié)果為true氮发，那么會(huì)返回的會(huì)是第二個(gè)為真的值渴肉；如果結(jié)果為false，返回的會(huì)是第一個(gè)為假的值
在實(shí)際開發(fā)中折柠，可以利用這一特性宾娜，實(shí)現(xiàn)如下操作批狐。
1扇售，如果某個(gè)值為true，則運(yùn)行某個(gè)function
function pdd(){
console.log("我是鵬多多");
};
var type = true;
type && pdd();//此時(shí)會(huì)執(zhí)行pdd方法嚣艇，打印出"我是鵬多多";
2承冰，判斷某個(gè)值
//如果age大于10并且小于20才會(huì)執(zhí)行
if(age > 10 && age < 20){
console.log(age)
}
2.3，零合并操作符 ??
零合并操作符 ?? 是一個(gè)邏輯操作符食零，當(dāng)左側(cè)的操作數(shù)為 null 或者 undefined 時(shí)困乒，返回右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)贰谣。
空值合并操作符一般用來為常量提供默認(rèn)值娜搂，保證常量不為 null 或者 undefined，以前一般使用|| 來做這件事吱抚，比如本文2.1章的例子百宇。然而，由于 || 是一個(gè)布爾邏輯運(yùn)算符秘豹，左側(cè)的操作數(shù)會(huì)被強(qiáng)制轉(zhuǎn)換成布爾值用于求值携御。任何假值0， ''既绕， NaN啄刹， null， undefined都不會(huì)被返回凄贩。這導(dǎo)致如果你使用 0誓军、''、NaN 作為有效值疲扎，就會(huì)出現(xiàn)不可預(yù)料的后果昵时。正因?yàn)?|| 存在這樣的問題，而 ?? 的出現(xiàn)就是解決了這些問題评肆，?? 只會(huì)在左側(cè)為 undefined债查、null 時(shí)才返回后者，?? 可以理解為是 || 的完善解決方案瓜挽。
在實(shí)際開發(fā)中盹廷，可以利用這一特性，實(shí)現(xiàn)如下操作久橙。
1俄占，給某個(gè)變量設(shè)置初始值
undefined ?? '默認(rèn)值' //打印出 '默認(rèn)值'
null ?? '默認(rèn)值' //打印出 '默認(rèn)值'
false ?? '默認(rèn)值' //打印出 'false'
0 ?? '默認(rèn)值' //打印出 0
NaN ?? '默認(rèn)值' //打印出 NaN
'' ?? '默認(rèn)值' //打印出 ''
2管怠，在賦值的時(shí)候，可以運(yùn)用賦值運(yùn)算符的簡寫 ??=
let pdd = {a: null, b: 10}
pdd.a ??= 20
pdd.b ??= 20
console.log(pdd) // 輸出 { a: 20, b: 10 }
2.4缸榄，可選鏈操作符 ?.
可選鏈操作符 ?. 允許讀取位于連接對象鏈深處的屬性的值渤弛，而不必驗(yàn)證鏈中的每個(gè)引用是否有效。?. 操作符的功能類似于.鏈?zhǔn)讲僮鞣醮煌幵谟谒希谝脼?code>null或者undefined的情況下不會(huì)引起錯(cuò)誤，該表達(dá)式短路返回值是undefined鹰贵。
在實(shí)際開發(fā)中晴氨，可以利用這一特性，實(shí)現(xiàn)如下操作碉输。
1籽前，當(dāng)嘗試訪問可能不存在的對象屬性時(shí)
var obj = {
a: '張三',
b: {
c: '李四'
}
};
console.log(obj.b?.c) // 輸出 李四
console.log(obj.age?.c) // 輸出 undefined
console.log(obj.name?.()) // 不報(bào)錯(cuò)，輸出 undefined
2敷钾，在不確定的情況下獲取一個(gè)深度嵌套的子屬性
var obj = {
a:'李四',
b:'王五',
c:{
name:"你猜我有沒有"
}
};
//原本的寫法
if(obj && obj.c && obj.c.name){
console.log("哈哈哈")
};
//使用可選鏈操作符的寫法
if(obj?.c?.name){
console.log("哈哈哈")
};
2.5枝哄，位運(yùn)算符 & 和 |
位運(yùn)算符是按位進(jìn)行運(yùn)算，& 與阻荒、| 或挠锥，使用位運(yùn)算符時(shí)會(huì)拋棄小數(shù)位，我們可以利用| 0來給數(shù)字取整财松。也可以使用 & 1來判斷奇偶數(shù)
在實(shí)際開發(fā)中瘪贱，可以利用這一特性，實(shí)現(xiàn)如下操作辆毡。
1菜秦，取整
1.3 | 0 // 打印出 1
-1.9 | 0 // 打印出 -1
2，判斷奇偶數(shù)
var num = 5
!!(num & 1) // true
!!(num % 2) // true
2.6舶掖，雙位運(yùn)算符 ~~
可以使用雙位操作符來替代正數(shù)的 Math.floor( )球昨，替代負(fù)數(shù)的 Math.ceil( )。雙否定位操作符的優(yōu)勢在于它執(zhí)行相同的操作運(yùn)行速度更快眨攘，對正數(shù)來說~~運(yùn)算結(jié)果與 Math.floor( ) 運(yùn)算結(jié)果相同主慰，而對于負(fù)數(shù)來說與 Math.ceil( ) 的運(yùn)算結(jié)果相同。
在實(shí)際開發(fā)中鲫售，可以利用這一特性共螺，實(shí)現(xiàn)如下操作。
1情竹，取整
Math.floor(3.9) === 3 // true
~~3.9 === 3 // true
Math.ceil(-4.5) === -4 // true
~~-4.5 === -4 // true
2.7藐不，邏輯運(yùn)算符 !
!，可將變量轉(zhuǎn)換成boolean類型，null雏蛮、undefined和空字符串''取反都為true涎嚼，其余都為false。一般來說會(huì)有好幾種用法挑秉，!法梯，!!，!=犀概，!==立哑，下面來逐個(gè)說明。
在實(shí)際開發(fā)中阱冶，可以利用這一特性刁憋，實(shí)現(xiàn)如下操作滥嘴。
1木蹬，利用!取反
let a = false;
console.log(!a); //打印出true
在vue.js中，利用這一特性很容易就可以寫一個(gè)開關(guān)函數(shù)
<div v-show="isShow">我是一個(gè)DIV</div>
show(){
this.isShow = !this.isShow;
};
2若皱，利用!!來做類型判斷镊叁，判斷變量a不等于null，undefined和''才能執(zhí)行的方法
var a;
if(a != null && typeof(a) != undefined && a != ''){
//a有內(nèi)容才執(zhí)行的代碼
}
實(shí)際上我們只需要寫一個(gè)判斷表達(dá)
if(!!a){
//a有內(nèi)容才執(zhí)行的代碼...
}
3走触，利用!=和!==來判斷兩個(gè)值是否相等
一般來說都是用的全不等于!==晦譬，因?yàn)槭褂貌坏扔?code>!=的話，0 != ""返回的是false互广，原因是JS中0和''轉(zhuǎn)化成布爾型都為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
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]惫皱，打印一下看看你得到了什么像樊？
如果看了覺得有幫助的，我是@鵬多多11997110103旅敷，歡迎 點(diǎn)贊 關(guān)注 評論生棍；
END
往期文章
個(gè)人主頁
