摘要：是一門偉大的語(yǔ)言，它擁有非常簡(jiǎn)潔的語(yǔ)法，龐大的生態(tài)系統(tǒng)，以及最重要的有一個(gè)偉大的社區(qū)支撐著?？墒且?yàn)樗呀?jīng)被廣泛使用，所以委員會(huì)覺(jué)得保留它，但是違背了的規(guī)范。其實(shí)最小的數(shù)是，盡管它不是一個(gè)實(shí)際存在的數(shù)。

譯者按： JavaScript有很多坑，經(jīng)常一不小心就要寫(xiě)bug。

原文: What the f*ck JavaScript?

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

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

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

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

相等(==)判斷操作會(huì)將兩邊的類型都轉(zhuǎn)換為數(shù)字(number)，然后再比較。因?yàn)?b>[]和![]都會(huì)轉(zhuǎn)換為0。我們可以理解[]是一個(gè)數(shù)組，只不過(guò)為空而已，那么為true。右側(cè)![]則為false。false然后轉(zhuǎn)換為數(shù)字0。左側(cè)[]直接轉(zhuǎn)換為數(shù)字，因?yàn)榭諗?shù)組會(huì)轉(zhuǎn)換為0，所以盡管我們認(rèn)為[]為true，這里卻變成了0。

下面是簡(jiǎn)化的計(jì)算過(guò)程:

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

參考:

12.5.9 Logical NOT Operator (!)

7.2.13 Abstract Equality Comparison

!!"false" ==  !!"true"  // -> true
!!"false" === !!"true" // -> true

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

true == "true"    // -> false
false == "false"  // -> false

"false"是一個(gè)有意義的字符串。

!!"false" // -> true
!!"true"  // -> true

參考:7.2.13 Abstract Equality Comparison

"b" + "a" + + "a" + "a" // -> baNaNa

這是一個(gè)舊笑話，不過(guò)改進(jìn)過(guò)的。原始的長(zhǎng)這樣：

"foo" + + "bar" // -> "fooNaN"

該表達(dá)式以"foo" + (+"bar")的形式計(jì)算，因?yàn)?b>bar不是數(shù)字，所以轉(zhuǎn)換為NaN。

參考:

12.8.3 The Addition Operator (+)

12.5.6 Unary + Operator

NaN === NaN // -> false

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

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

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

由此可以得出值為false的結(jié)論。

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

如果我們仔細(xì)觀察序列的規(guī)律，會(huì)發(fā)現(xiàn)下面的模式出現(xiàn)很多次：

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

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

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

對(duì)于一個(gè)字符串，我們就可以通過(guò)下標(biāo)來(lái)獲取對(duì)應(yīng)的字符：

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

剩下的都很直觀，除了i很取巧。fail中的i是通過(guò)在falseundefined中獲取第十個(gè)下標(biāo)對(duì)應(yīng)的字符而得到。

空數(shù)組不等于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是一個(gè)false的值，但是null不等于false。

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

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

0 == false  // -> true
"" == false // -> true

參考: 7.2.13 Abstract Equality Comparison

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

??這個(gè)是前端瀏覽器API，在Nodejs環(huán)境無(wú)法使用。

盡管document.all可以返回一個(gè)像數(shù)組一樣的對(duì)象，可以用來(lái)訪問(wèn)DOM節(jié)點(diǎn)。但是呢，通過(guò)typeof查看document.all，你會(huì)驚訝地發(fā)現(xiàn)類型是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是一個(gè)過(guò)去常用的獲取DOM元素的方法，特別是老版本的IE。但是從未進(jìn)入標(biāo)準(zhǔn)，盡管廣泛使用在過(guò)去的JS代碼中。當(dāng)新的API突出來(lái)(比如document.getElementById)后，document.all就被淘汰了。標(biāo)準(zhǔn)委員會(huì)不得不覺(jué)得怎么處理它?？墒且?yàn)樗呀?jīng)被廣泛使用，所以委員會(huì)覺(jué)得保留它，但是違背了JavaScript的規(guī)范。

參考:

Obsolete features - document.all

Chapter 4 - ToBoolean - Falsy values

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

Number.MIN_VALUE > 0 // -> true

因?yàn)?b>Number.MIN_VALUE是5e-324。也就是說(shuō)即使最小的值也可以用浮點(diǎn)數(shù)表示出來(lái)，雖然離0很接近，但是依然比0大。其實(shí)最小的數(shù)是Number.NEGATIVE_INFINITY，盡管它不是一個(gè)實(shí)際存在的數(shù)。

在StackOverflow有相關(guān)問(wèn)題:Why is 0 less than Number.MIN_VALUE in JavaScript?。

參考: 20.1.2.9 Number.MIN_VALUE