看了此文,你還敢說你懂了Javascript運(yùn)算符嗎

2021-03-03    分類: 網(wǎng)站建設(shè)

“JavaScript的很多奇技淫巧,都來自于對運(yùn)算符的靈活使用。”

看了此文,你還敢說你懂了Javascript運(yùn)算符嗎


1.1 優(yōu)先級: 優(yōu)先級高的運(yùn)算符最先被執(zhí)行

 問題: 1 || 1 ? 2 : 3 ; 
 答案:2 
 解析:||的優(yōu)先級高
 相當(dāng)于: (1 || 1 )? 2 : 3 
 而不是: 1 || (1 ? 2 : 3 )

1.2 關(guān)聯(lián)性: 運(yùn)算符執(zhí)行時(shí)的方向。是從左向右,還是從右向左

 問題:+function (){var a = b = 1;}();
 console.log(b); 
 console.log(a); 
 答案:1 error
 解析:賦值從右到左,var a = b = 1所以相當(dāng)于
 b = 1;
 var a = b;
 那有同學(xué)可能會問,為什么不是?
 var b = 1;
 var a = b;
 還記得變量提升嗎?var a = b = 1;在變量提升的時(shí)候,只會把a(bǔ)去聲明,并不會執(zhí)行賦值中的b。
 所以要想把b也聲明了就需要按照語法 var a=1 , b ;

現(xiàn)在我們仔細(xì)把優(yōu)先級的題改一下

 1 || fn() && fn() 

MDN上寫的是優(yōu)先級高的運(yùn)算符最先被執(zhí)行,我們都知道 ||是短路的,后邊不會執(zhí)行。那么這個(gè)最先被執(zhí)行的含義是什么呢?

1.3 短路:

  • && 運(yùn)算符的短路(a && b):如果a為假,b就不用執(zhí)行了
  • | | 運(yùn)算符的短路(a || b):如果a為真,b就不用執(zhí)行了
 問題:1 || fn() && fn() 
 答案:1 fn不會執(zhí)行
 解析:就是利用&&運(yùn)算符的短路原理啊。

講到這有些同學(xué)會覺得很簡單啊,就是這樣啊,看到短路后邊就不用算了啊。也有的同學(xué)可能會有點(diǎn)懵,不是說好了, 優(yōu)先級高的先被執(zhí)行嗎?明明&&的優(yōu)先級高啊。哈哈,別吵吵,我們一起看下一題。

 問題:var a = 42;
 var b = "foo";
 var c = 0;
 c || b ? a : b ; // 42

剛才說短路的同學(xué)可能會說還是要參考優(yōu)先級。剛才說優(yōu)先級的同學(xué)可能一臉懵逼,靜靜地不想說話。那么我們開始今天的學(xué)習(xí)吧。

2 綁定

定義:運(yùn)算符的優(yōu)先級高先執(zhí)行,并不是真正的執(zhí)行,而是更強(qiáng)的綁定。

我們用上面來兩個(gè)問題

 1 || fn() && fn() // &&的優(yōu)先級高,所以將后邊的綁定
 1 ||(fn() && fn()) // 所以相當(dāng)于1 和(fn() && fn())的值去邏輯或
 1 ||(fn() && fn()) // 我們查表,邏輯或從左到右執(zhí)行。
 1 ||(fn() && fn()) // 左執(zhí)行,1是真值,所以短路,后邊不執(zhí)行
 問題: var a = 42;
 var b = "foo";
 var c = 0;
 c || b ? a : b ; 
 答案:42
 解析:c || b ? a : b ; //查表 條件運(yùn)算符權(quán)重是4,邏輯與符權(quán)重是6,所以邏輯與有更強(qiáng)的綁定
 (c || b )? a : b ; //(c || b )相當(dāng)于條件運(yùn)算符里的條件
 (c || b )? a : b ; //(c || b )值是0 ,所以值是 a 

好,我們在做兩題鞏固一下

 問題: var a = 5;
 var b = 5;
 var c = 5+a+++b;
 [ a , c ]
 答案: [6, 15]
 解析: b = 5+a+++b; //查表 后置遞增權(quán)重17 前置遞增權(quán)重16
 b = 5 +(a++)+ b; //++優(yōu)先級更高,所以和綁定a綁定在一起
 b = 5 +(a++)+ b; //根據(jù)語法后置遞增先執(zhí)行語句,后遞增
 b = 5 +(a++)+ b; //執(zhí)行語句時(shí)a是5,所以b是15
 b = 5 +(a++)+ b; //a在進(jìn)行自增,得到6
 問題: var a = 5;
 var b = 5;
 var c = ++a-b;
 [ a , c ]
 答案: [6, 1]
 解析: var c = ++a-b; //查表 前置遞增權(quán)重和一元減權(quán)重都是16,從左往右執(zhí)行
 var c = ++a-b; //根據(jù)語法前置遞增先遞增,后執(zhí)行語句 a = 6
 var c = ++a-b; //執(zhí)行語句時(shí)a是6,所以b是1

看到這,同學(xué)們可能恍然大悟,就這么回事啊。別急,我們來看下一題。 要解決這個(gè)問題,需要我們理解下一節(jié)的概念。

 問題: var a = 42;
 var b = "foo";
 var c = 0;
 a && b || c ? c || b ? a : c && b : a 

定義:運(yùn)算符的關(guān)聯(lián)性去定義表達(dá)式的處理方向

來,用題說話

 問題:a && b && c 的執(zhí)行順序
 解析:(1)兩個(gè)運(yùn)算符都是&&,權(quán)重一樣。所以這個(gè)時(shí)候就要看關(guān)聯(lián)性。
 (2)查表 &&的關(guān)聯(lián)性是從左到右
 (3)所以表達(dá)式應(yīng)該是 ( a && b ) && c
 問題:a ? b :c ? d : e 的執(zhí)行順序
 解析:(1)兩個(gè)運(yùn)算符都是條件運(yùn)算符,權(quán)重一樣。所以這個(gè)時(shí)候就要看關(guān)聯(lián)性。
 (2)查表?xiàng)l件運(yùn)算符的關(guān)聯(lián)性是從右到左
 (3)所以表達(dá)式應(yīng)該是 a ? b :(c ? d : e )

好了,現(xiàn)在創(chuàng)新互聯(lián)就可以輕松解決上面那個(gè)問題啦。

 問題: var a = 42;
 var b = "foo";
 var c = 0;
 a && b || c ? c || b ? a : c && b : a 
 答案: 42
 解析:(a && b) || c ? c || b ? a :(c && b) : a //首先查表邏輯與權(quán)重是6高
 ((a && b) || c) ? c || b ? a :(c && b) : a //然后是邏輯或
 ((a && b) || c) ? (c || b ? a :(c && b)) : a //兩個(gè)條件運(yùn)算符,權(quán)重一樣。關(guān)聯(lián)性從右到左

啊、、有沒有很開心 最后的最后,我們來講一個(gè)釋疑

釋疑顧名思義就是解釋調(diào)疑惑的地方,那最好的辦法就是加()。

如果你能夠熟練運(yùn)用優(yōu)先級/關(guān)聯(lián)的規(guī)則,你的代碼能更簡潔,許多框架都是這樣寫的,非常漂亮。

但是你要叫不準(zhǔn),那就加()吧,千萬別逞能,美其名曰有助于代碼的可閱讀性。

分享文章:看了此文,你還敢說你懂了Javascript運(yùn)算符嗎
本文路徑:http://www.bm7419.com/news29/103929.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作網(wǎng)站營銷、網(wǎng)站收錄品牌網(wǎng)站設(shè)計(jì)、關(guān)鍵詞優(yōu)化靜態(tài)網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)