看了此文,你還敢說你懂了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 釋疑
釋疑顧名思義就是解釋調疑惑的地方,那最好的辦法就是加()。
如果你能夠熟練運用優先順序/關聯的規則,你的程式碼能更簡潔,許多框架都是這樣寫的,非常漂亮。
但是你要叫不準,那就加()吧,千萬別逞能,美其名曰有助於程式碼的可閱讀性。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2646528/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 看完動畫你還敢說不會 快速排序動畫排序
- 你真的瞭解js運算子嗎JS
- 難道你還敢忽視網路安全嗎?
- 中國程式設計師真的過多了嗎?你還敢入行嗎?程式設計師
- 3個膝上型電腦冷知識 看完你還敢說懂電腦嗎?
- HTML 屬性你都懂了嗎HTML
- 設計模式你真的懂了嗎?設計模式
- 網際網路公司頻繁裁員,程式設計師,你還敢說學不動了嗎?程式設計師
- vue作用域插槽,你真的懂了嗎?Vue
- 【JAVA】Class.forName( )你搞懂了嗎Java
- 你真的會用 Java 中的三目運算子嗎?Java
- 計算機看了你的兒時照片,還能認出長大成人的你嗎?計算機
- 你敢說自己瞭解單例模式?單例模式
- 用VR技術學車 你敢嗎?VR
- 聽說你還不理解JavaScript閉包JavaScript
- 當AI開始“踢髒球”,你還敢信任強化學習嗎?AI強化學習
- rem和em的用法,你弄懂了嗎?REM
- javascript運算子——邏輯運算子JavaScript
- JS的資料型別你真的懂了嗎JS資料型別
- 這些併發模型你真的懂了嗎?未必模型
- JavaScript /= 運算子JavaScript
- JavaScript += 運算子JavaScript
- JavaScript -= 運算子JavaScript
- JavaScript *= 運算子JavaScript
- JavaScript %= 運算子JavaScript
- JavaScript |= 運算子JavaScript
- JavaScript <<= 運算子JavaScript
- JavaScript >>>= 運算子JavaScript
- JavaScript >>= 運算子JavaScript
- JavaScript &= 運算子JavaScript
- JavaScript ^= 運算子JavaScript
- JavaScript in 運算子JavaScript
- JavaScript:運算子JavaScript
- JavaScript運算子JavaScript
- JavaScript陣列你都掰扯不明白,簡歷上你敢寫精通JavaScript?JavaScript陣列
- 你前端都只是半桶水而已,你還敢問我怎麼學後端?前端後端
- 聽說你還不理解JavaScript裡的閉包JavaScript
- 機器人紋身師出世,你敢讓它幫你紋身嗎?機器人