譯者按： JavaScript有很多坑，經常一不小心就要寫bug。

• 原文: What the f*ck JavaScript?
• 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用于學習。

JavaScript是一門偉大的語言，它擁有非常簡潔的語法，龐大的生態系統，以及最重要的：有一個偉大的社區支撐著。同時，我們也知道JavaScript是一個充滿技巧性的語言。有些坑足以讓我們崩潰，也有些奇淫技巧讓我們覺得很有趣。本文的思想源自于Brian Leroux在dotJS2012上的演講“WTFJS” at dotJS 2012。

<div style="text-align: center;">
<img style="width:80%;" src="javascript-werid-series-1/brian.jpeg" />
</div>

我收集這些例子的主要目的是將它們整理并清楚理解它們的原理。從中學到很多以前不懂的知識是一件很有趣的事情。如果你是初學者，你可以通過學習這些筆記深入理解JavaScript；如果你是一個專業的開發者，那么可以將這些筆記作為一個不錯的引用資料。不管怎樣，只要讀下去，你就會學到新東西的。

[]等于![]

[ ] == ![ ] // -> true

相等(==)判斷操作會將兩邊的類型都轉換為數字(number)，然后再比較。因為[]和![]都會轉換為0。我們可以理解[]是一個數組，只不過為空而已，那么為true。右側![]則為false。false然后轉換為數字0。左側[]直接轉換為數字，因為空數組會轉換為0，所以盡管我們認為[]為true，這里卻變成了0。

下面是簡化的計算過程:

+[] == +![] 0 == +false 0 == 0 true

參考:

• 12.5.9 Logical NOT Operator (!)
• 7.2.13 Abstract Equality Comparison

true 是 false

!!'false' == !!'true' // -> true !!'false' === !!'true' // -> true

true是一個真值，用1表示；字符串的“true”則為NaN。

true == 'true' // -> false false == 'false' // -> false

'false'是一個有意義的字符串。

!!'false' // -> true !!'true' // -> true

參考:7.2.13 Abstract Equality Comparison

baNaNa

'b' + 'a' + + 'a' + 'a' // -> baNaNa

這是一個舊笑話，不過改進過的。原始的長這樣：

'foo' + + 'bar' // -> 'fooNaN'

該表達式以'foo' + (+'bar')的形式計算，因為bar不是數字，所以轉換為NaN。

參考:

• 12.8.3 The Addition Operator (+)
• 12.5.6 Unary + Operator

NaN不等于NaN

NaN === NaN // -> false

根據===的算法，我們可以容易理解為什么為false。

如果typeof(x)和typeof(y)不同，那么返回false.
否則，如果typeof(x)是Number，那么

如果x是NaN，那么返回false；

如果y是NaN，那么返回false；

...

由此可以得出值為false的結論。

fail

(![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]] // -> fail

如果我們仔細觀察序列的規律，會發現下面的模式出現很多次：

(![]+[]) // -> 'false' ![] // -> false

因此，我們嘗試將[]和false相加。但是根據內部一些列函數的計算(binary + Operator -> ToPrimitive -> [[DefaultValue]])，右側的[]最終轉換為string：

(![]+[].toString()) // 'false'

對于一個字符串，我們就可以通過下標來獲取對應的字符：

'false'[0] // -> 'f'

剩下的都很直觀，除了i很取巧。fail中的i是通過在falseundefined中獲取第十個下標對應的字符而得到。

[]包含值，但不是true

空數組不等于true。(An array is a truthy value, however, it's not equal to true.)

!![] // -> true [] == true // -> false

參考:

• 12.5.9 Logical NOT Operator (!)
• 7.2.13 Abstract Equality Comparison

null不等于false

盡管null是一個false的值，但是null不等于false。

!!null // -> false null == false // -> false

不過，如果和其它false的值比較，那么他們又是相等的。

0 == false // -> true '' == false // -> true

參考: 7.2.13 Abstract Equality Comparison

JavaScript坑很多，趕緊使用fundebug扶一扶！

document.all是一個對象，不過是undefined

??這個是前端瀏覽器API，在Nodejs環境無法使用。

盡管document.all可以返回一個像數組一樣的對象，可以用來訪問DOM節點。但是呢，通過typeof查看document.all，你會驚訝地發現類型是undefined。

document.all instanceof Object // -> true typeof document.all // -> 'undefined'

而且，document.all并不等于undefined。

document.all === undefined // -> false document.all === null // -> false

而且，更驚訝的是：

document.all == null // -> true

document.all是一個過去常用的獲取DOM元素的方法，特別是老版本的IE。但是從未進入標準，盡管廣泛使用在過去的JS代碼中。當新的API突出來(比如document.getElementById)后，document.all就被淘汰了。標準委員會不得不覺得怎么處理它。可是因為它已經被廣泛使用，所以委員會覺得保留它，但是違背了JavaScript的規范。

參考:

• Obsolete features - document.all
• Chapter 4 - ToBoolean - Falsy values

最小值比0還大

Number.MIN_VALUE是最小的數，但是它比0還大。

Number.MIN_VALUE > 0 // -> true

因為Number.MIN_VALUE是5e-324。也就是說即使最小的值也可以用浮點數表示出來，雖然離0很接近，但是依然比0大。其實最小的數是Number.NEGATIVE_INFINITY，盡管它不是一個實際存在的數。

在StackOverflow有相關問題:Why is 0 less than Number.MIN_VALUE in JavaScript?。

參考: 20.1.2.9 Number.MIN_VALUE

總結

以上是生活随笔為你收集整理的怪异的JavaScript系列(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。