JavaScript 有趣的冷知識 ：神奇的比較運算子（下）

前言

繼上一次文章提到比較運算子中的相等比較後，今天要來進入另一種比較運算子：大小比較，在 JavaScript 的大小比較中總是會發生讓人意想不到的結果，今天就來好好的探討這些原因吧！

大小比較

相信讀者應該都知道大小比較不外乎就是 > 以及 < 兩種比較運算子，接下來筆者帶大家看幾段程式碼，讓大家猜一下最後結果是什麼。

console.log(3 < 5)        // ?
console.log(1 < 3 < 5)    // ?
console.log(5 > 3)        // ?
console.log(5 > 3 > 1)    // ?

大家看到這幾段程式碼應該都會覺得回傳 true ，畢竟根據數學的比較方式這幾個很明顯都是正確的比較，但在 JavaScript 裡面有一行其實是會回傳 false ，會回傳 false 的就是最後一行的 console.log(5 > 3 > 1) 。

至所以會有這樣的結果其實跟程式碼的判斷順序有關，接下來筆者就帶大家好好的探討程式碼的執行順序吧！

執行順序

不曉得大家有沒有在網路上看過這道題目：

這道號稱百萬網友都答錯的國小數學題，到底答案是 1 還是 9，甚至連維基百科都為了這道題目出了一頁講解，有興趣的讀者可以看點這個連結觀看。

其實這個就跟我們的判斷順序有關係，一般來說目前程式碼在執行的時候都會以四則運算的方式來計算，根據乘除後加減的原理若有一樣執行優先權的運算子則由左至右計算，所以上面的計算式在執行的時候其實是 6 / 2 * 3 答案為 9。

筆者至所以要介紹這道題目的原因是為了讓讀者知道其實程式碼在讀取的時候也是由左至右，也會依照運算子的執行優先權進行運算，有了這些觀念後接下來筆者就要來介紹整個比大小的過程了。

JavaScript 的大小比較過程

有了上面執行順序的觀念後，接下來就會比較好懂筆者一開始在大小比較提到的範例了， 這邊筆者就直接破題從連續比較的地方開始講起。

console.log(1 < 3 < 5)    // ?

由於大小比較運算子執行權重都一樣，所以這邊會由左至右開始，對於 1 < 3 這段比較來說結果為 true ，所以上面的比較會變成下面這樣：

console.log(true < 5)

這時候讀者心裡應該會想 true < 5 這邊要如何比大小，所以筆者又要帶大家看一下 ECMAScript 的文件規範了，讀者可以看下方的說明圖。

可以發現在大小比較的過程中，在運算子的左右兩邊的數值也會進行取值的動作，這時候 true 取值後就會變成 1，所以上面的 true < 5 這時候就會變成 1 < 5 了，而 1 < 5 也就會回傳 true 。

同理可證，這時候我們在看另一個題目：

console.log(5 > 3 > 1)    // ?

有了上面提到的觀念這邊就會更好理解了，由於大小比較運算子執行權重都一樣，所以這邊會由左至右開始，對於 5 > 3 這段比較來說結果為 true ，所以上面的比較會變成下面這樣：

console.log(true > 1)

這時候 true 取值後就會變成 1，所以上面的 true > 1 這時候就會變成 1 > 1 了，而 1 > 1 也就會回傳 false 。

各位讀者這時候就可以大聲的去跟國小數學老師說：我利用程式碼證明了 5 > 3 > 1 並不是正確的了🤣

小結

終於把比較運算子的內容介紹完了，希望這些內容可以讓讀者對於比較運算子的坑有了更深入的了解XD

由於 JavaScript 並沒有針對連續比較進行優化，因此之後讀者如果要進行連續比較還是建議可以用 () 的方式把要先比較的內容先比較完，這樣比較不會有奇怪的問題發生。

如果對於文章內容有任何問題也歡迎在下面留言給我，之後筆者也會盡量去挖掘一些有趣的冷知識跟大家介紹🤣