幾個 JavaScript 有趣的冷知識

分享會大綱：

1. JavaScript 中的 NaN
2. 印出 banana
3. JavaScript 中 == 與 === 的差別
4. if(a == 1 && a == 2 && a == 3) 為 true
5. JavaScript 的比大小

JavaScript 中的 NaN

Nan 全名為：Not a Number

猜猜底下的程式碼會回傳什麼？

              
                typeof NaN
              
            

答案是：

所以 NaN 在 JavaScript 中就是個介在是數字與不是數字之間

也就是薛丁格的數字XD

猜猜看底下會回傳 true 或 false

              
                NaN === NaN
              
            

答案是：

其實 JS 自己就有定義了

印出 banana

              
                console.log('banana')  // banana
              
            

這邊要套用一下剛剛提到的 NaN 的觀念

其實 JS 可以用旁門左道印出 banana

              
                console.log(('b' + 'a' + + 'a' + 'a').toLowerCase())  
                // banana
              
            

為什麼會這樣呢？

1. JS 在判斷的過程中，會把 + 'a' 當作是一個要被加入的東西
2. 而 JS 並不知道 + 'a' 是什麼東西所以就會回傳 NaN
3. 這時候我們用字串加起來所以就會變成 baNaNa
4. 所以把剛剛的 baNaNa 轉成小寫就變成 banana 啦

JavaScript 中 == 與 === 的差別

很多人都以為 == 與 === 的差別在於有沒有做型別檢查

但真的是這樣嗎？

if(a == 1 && a == 2 && a == 3) 為 true

JavaScript 的原型污染

JavaScript 是個弱型別語言，所以會進行自動轉型的動作

在物件中，物件優先取值使用的是 valueOf() 這個 method，若沒有 valueOf() 則用 toString()

所以我今天可以這樣寫：

              
                const a = { 
                  value: 0,
                  valueOf: function() {
                    return this.value += 1
                  }
                }
                console.log(a == 1 && a == 2 && a == 3)  // true
              
            

這時候你可能會這樣想

那我就直接把 == 改成 === 就行啦

              
                const a = { 
                  value: 0,
                  valueOf: function() {
                    return this.value += 1
                  }
                }
                console.log(a === 1 && a === 2 && a === 3)  // false
              
            

的確因為 === 會優先進行型別的比較，不會先轉型，所以這邊的 a 其實是 { value: 1, valueOf: func() }

所以 a === 1 就永遠會是 false

JavaScript 提供了 defineProperty 的函數，裡面有一個 get() 的 method，這時候在裡面修改 get() 又會得到一樣的結果了

這個方法比較複雜一點，需要用全域變數的方式來處理

              
                window.value = 0
                Object.defineProperty(window, 'a', {
                    get: function() {
                        return this.value += 1
                    }
                })
                console.log(a===1 && a===2 && a===3) // true
              
            

JavaScript 的比大小

2 + 3 * 3 = ?

6 / 2 * 3 = 9 or 1 ?

              
                console.log(10 < 100)
              
            

              
                console.log(1 < 10 < 100)
              
            

              
                console.log(100 < 10 < 1)
              
            

              
                console.log(1 < 10 < 100) => console.log(true < 100)
              
            

              
                console.log(true < 100) => console.log(1 < 100)
              
            

              
                console.log(100 < 10 < 1) => console.log(false < 1)
              
            

              
                console.log(false < 1) => console.log(0 < 1)
              
            

以上就是今天的分享會

謝謝大家