怎么使用Javascript運算符

本篇內容主要講解“怎么使用Javascript運算符”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么使用Javascript運算符”吧!

1 運算符基礎

1.1 優先級: 優先級高的運算符最先被執行

問題： 1 || 1 ? 2 : 3 ; 
 答案：2 
 解析：||的優先級高
 相當于： （1 || 1 ）? 2 : 3 
 而不是： 1 || （1 ? 2 : 3 ）

1.2 關聯性: 運算符執行時的方向。是從左向右，還是從右向左

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

現在我們仔細把優先級的題改一下

1 || fn() && fn()

MDN上寫的是優先級高的運算符最先被執行，我們都知道 ||是短路的，后邊不會執行。那么這個最先被執行的含義是什么呢？

1.3 短路:

• && 運算符的短路(a && b)：如果a為假，b就不用執行了

• | | 運算符的短路(a || b)：如果a為真，b就不用執行了

 問題：1 || fn() && fn() 
 答案：1 fn不會執行
 解析：就是利用&&運算符的短路原理啊。

講到這有些同學會覺得很簡單啊，就是這樣啊，看到短路后邊就不用算了啊。也有的同學可能會有點懵，不是說好了， 優先級高的先被執行嗎？明明&&的優先級高啊。哈哈，別吵吵，我們一起看下一題。

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

剛才說短路的同學可能會說還是要參考優先級。剛才說優先級的同學可能一臉懵逼，靜靜地不想說話。那么我們開始今天的學習吧。

2 綁定

定義：運算符的優先級高先執行，并不是真正的執行，而是更強的綁定。

我們用上面來兩個問題

 1 || fn() && fn() // &&的優先級高，所以將后邊的綁定
 1 ||（fn() && fn()） // 所以相當于1 和（fn() && fn()）的值去邏輯或
 1 ||（fn() && fn()） // 我們查表，邏輯或從左到右執行。
 1 ||（fn() && fn()） // 左執行，1是真值，所以短路，后邊不執行
 問題： var a = 42;
 var b = "foo";
 var c = 0;
 c || b ? a : b ; 
 答案：42
 解析：c || b ? a : b ; //查表 條件運算符權重是4，邏輯與符權重是6，所以邏輯與有更強的綁定
 (c || b )? a : b ; //(c || b )相當于條件運算符里的條件
 (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; //查表 后置遞增權重17 前置遞增權重16
 b = 5 +（a++）+ b; //++優先級更高，所以和綁定a綁定在一起
 b = 5 +（a++）+ b; //根據語法后置遞增先執行語句，后遞增
 b = 5 +（a++）+ b; //執行語句時a是5，所以b是15
 b = 5 +（a++）+ b; //a在進行自增，得到6
 問題： var a = 5;
 var b = 5;
 var c = ++a-b;
 [ a , c ]
 答案： [6, 1]
 解析： var c = ++a-b; //查表 前置遞增權重和一元減權重都是16，從左往右執行
 var c = ++a-b; //根據語法前置遞增先遞增，后執行語句 a = 6
 var c = ++a-b; //執行語句時a是6，所以b是1

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

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

3 關聯

定義：運算符的關聯性去定義表達式的處理方向

來，用題說話

問題：a && b && c 的執行順序
 解析：（1）兩個運算符都是&&，權重一樣。所以這個時候就要看關聯性。
 （2）查表 &&的關聯性是從左到右
 （3）所以表達式應該是 （ a && b ） && c
 問題：a ？ b ：c ？ d : e 的執行順序
 解析：（1）兩個運算符都是條件運算符，權重一樣。所以這個時候就要看關聯性。
 （2）查表條件運算符的關聯性是從右到左
 （3）所以表達式應該是 a ？ b ：（c ？ d : e ）

好了，現在我們就可以輕松解決上面那個問題啦。

一個人學習會有迷茫，動力不足。這里推薦一下我的前端學習交流群：731771211 ，里面都是學習前端的，如果你想制作酷炫的網頁，想學習編程。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小伙伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小伙伴歡迎加入學習。

問題： 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 //首先查表邏輯與權重是6最高
 ((a && b) || c) ? c || b ? a :(c && b) : a //然后是邏輯或
 ((a && b) || c) ? （c || b ? a :(c && b)） : a //兩個條件運算符，權重一樣。關聯性從右到左

啊、、有沒有很開心 最后的最后，我們來講一個釋疑

4 釋疑

釋疑顧名思義就是解釋調疑惑的地方，那最好的辦法就是加（）。

如果你能夠熟練運用優先級／關聯的規則，你的代碼能更簡潔，許多框架都是這樣寫的，非常漂亮。

但是你要叫不準，那就加（）吧，千萬別逞能，美其名曰有助于代碼的可閱讀性。

到此，相信大家對“怎么使用Javascript運算符”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！