分享 20 個(gè)稀奇古怪的 JS 表達(dá)式，看看你能答對(duì)多少

JavaScript是一種非常容錯(cuò)的編程語(yǔ)言，許多在其他編程語(yǔ)言中不合法的表達(dá)式在JavaScript中都能正常工作。

這導(dǎo)致了很多奇怪的代碼。你想挑戰(zhàn)它嗎？

挑戰(zhàn)

在這個(gè)挑戰(zhàn)中，你將看到20個(gè)古怪表達(dá)式，并要猜出其輸出結(jié)果。

1.

true + false

2.

**1.**

3.

[1, 2, 3] + [4, 5, 6]

4.

0.2 + 0.1 === 0.3

5.

10,2

6.

!!""

7.

+!![]

8.

true == "true"

9.

010 - 03

10.

"" - - ""

11.

null + 0

12.

0/0

13.

1/0 === 10 ** 1000

14.

true++

15.

"" - 1

16.

(null - 1) - "1"

17.

38 * 4343 * 2342+ (“true” — 0)

18.

5 + !5 + !!5

19.

[] + [1] + 2

20.

1 + 2 + "3"

結(jié)果和分析

true + false

試圖在兩個(gè)布爾值之間使用加法運(yùn)算符（+）時(shí)，它們會(huì)被轉(zhuǎn)換為數(shù)字。

而且我們都知道true應(yīng)該被轉(zhuǎn)換為1，false應(yīng)該被轉(zhuǎn)換為0。所以true+false返回1。

[,,,].length

[,,,] 輸出一個(gè)有三個(gè)空槽的數(shù)組。最后一個(gè)逗號(hào)是尾部的逗號(hào)。

你可以這么想。

[,]     ==> [empty,]
[,,]    ==> [empty, empty,]
[,,,]   ==> [empty, empty, empty,]

所以 [,,,].length 返回3。

[1, 2, 3] + [4, 5, 6]

當(dāng)你試圖在數(shù)組之間使用加法運(yùn)算符（+）時(shí)，它們會(huì)被轉(zhuǎn)換為字符串。

將一個(gè)數(shù)組轉(zhuǎn)換為字符串時(shí)，數(shù)組的 toString() 方法被調(diào)用。toString()方法是JavaScript 內(nèi)部使用的，當(dāng)一個(gè)數(shù)組需要顯示為文本時(shí)，它將用逗號(hào)連接其元素。

[1, 2, 3].toString() ==> '1, 2, 3'
[4, 5, 6].toString() ==> '4, 5, 6'

所以

[1, 2, 3] + [4, 5, 6] ==> '1, 2, 3' + '4, 5, 6' ==> "1,2,34,5,6"

0.2 + 0.1 === 0.3

由于浮點(diǎn)數(shù)很難在計(jì)算機(jī)中準(zhǔn)確表示，數(shù)學(xué)上的0.1和0.2在計(jì)算機(jī)中只能用近似的數(shù)字表示。

0.1+0.2的結(jié)果不完全是0.3。不僅僅是JavaScript，其他編程語(yǔ)言也有同樣的問(wèn)題。

10, 2

逗號(hào)（,）在JavaScript中也是一個(gè)合法的操作符，它評(píng)估每個(gè)操作數(shù)（從左到右），并返回最后一個(gè)操作數(shù)的值。

因此，10，2返回2

!!""

""是一個(gè)空字符串，它是一個(gè)虛值。

注意：0、空字符串""、null 和undefined都是虛值。

! 是邏輯上的 "非 "運(yùn)算符，把 true 變成 false，反之亦然。

如果我們使用兩次!，也就是!!，它將把一個(gè)正常的值轉(zhuǎn)換成一個(gè)布爾值。所以!""返回 false。

+!![]

數(shù)組都是真值，甚至是空數(shù)組。所以!![]將返回true。

!![]; // -> true

而+號(hào)會(huì)將真值轉(zhuǎn)換為其數(shù)字表示: 1，所以 +!![] 返回 1。

true == "true"

雙等運(yùn)算符（==）檢查其兩個(gè)操作數(shù)是否相等，并返回一個(gè)布爾值結(jié)果。

根據(jù)抽象的雙等比較規(guī)則，這兩個(gè)值在比較時(shí)都被轉(zhuǎn)換為數(shù)字。

true == "true" ==> Number(true) == Number("true") ==> 1 == NaN

所以，ture =="true" 返回false。

010 - 03

這里有一個(gè)小小的技巧：如果一個(gè)數(shù)字以0開(kāi)頭，那么在JavaScript中它就被當(dāng)作一個(gè)八進(jìn)制數(shù)字。所以：

010 - 03 ==> 8 - 3 ==> 5

另外：

• 如果一個(gè)數(shù)字以0b開(kāi)頭，那么它在JavaScript中被視為二進(jìn)制數(shù)字。
• 如果一個(gè)數(shù)字以0x開(kāi)頭，它在JavaScript中被當(dāng)作一個(gè)十六進(jìn)制數(shù)字。

** ""--"" **

這看起來(lái)是一個(gè)錯(cuò)誤的語(yǔ)法，但它確實(shí)工作正常。

空字符串可以被轉(zhuǎn)換為布爾值false或數(shù)字值0。所以 -"" 為 0

null + 0

正如我們之前所說(shuō)，null是一個(gè)虛值。它將被轉(zhuǎn)換為布爾值false或數(shù)字值0。所以結(jié)果返回 0。

0/0

這是一個(gè)非法的數(shù)學(xué)表達(dá)式。方程0/0沒(méi)有任何有意義的數(shù)字答案，輸出的結(jié)果只是NaN。

1/0 === 10 ** 1000

雖然1/0和之前一樣也是一個(gè)非法的數(shù)學(xué)表達(dá)式。但是當(dāng)除數(shù)不是0時(shí)，JavaScript認(rèn)為這個(gè)表達(dá)式的結(jié)果是Infinity。

而10**1000是一個(gè)很大數(shù)字，JS 無(wú)法正確表示這個(gè)數(shù)字。(JavaScript中最高的整數(shù)值是2^53-1)。所以10 * 1000也被當(dāng)作無(wú)限大(Infinity)。

無(wú)窮大總是等于另一個(gè)無(wú)窮大，所以1/0 === 10 ** 1000返回 true。

true++

這沒(méi)有什么特別的，這只是一個(gè)語(yǔ)法錯(cuò)誤。

""- 1

雖然加法運(yùn)算符（+）同時(shí)用于數(shù)字和字符串，但減法運(yùn)算符（-）對(duì)字符串沒(méi)有用處，所以JavaScript將其解釋為數(shù)字之間的操作。一個(gè)空的字符串會(huì)被類型強(qiáng)制為0。

"" - 1 ==> Number("") - 1 ==> 0 - 1 ==> -1

所以 "" — 1 返回 -1

** (null - 1) - "1" **

正如上面所說(shuō)。

null ==>  0
(null - 1) ==> -1
"1" ==> 1

所以 (null — 1) — “1” 返回 -2

38 * 4343 * 2342+ ("true" - 0)

你可能會(huì)懷疑JS是如此瘋狂，以至于它將字符串 "true" 轉(zhuǎn)換為布爾值 true 的數(shù)字表示。然而，它并沒(méi)有那么瘋狂。實(shí)際發(fā)生的情況是，它試圖將字符串轉(zhuǎn)換為數(shù)字，但失敗了。

Number("true"); // -> NaN

在JavaScript的數(shù)字運(yùn)算中，只要有一個(gè)值是NaN，運(yùn)算的最終結(jié)果就一定是NaN。38 * 4343 * 2342只是一個(gè)煙霧彈。

5 + !5 + !!5

正如上面所說(shuō)。

• 0、空字符串""、null和undefined都是虛值。
• 非零的數(shù)字是真值。

所以：

!5 ==> 0
!!5 ==> 1

**[] + [1] + 2 **

試圖在數(shù)組之間使用加法運(yùn)算符（+）時(shí)，它們會(huì)被轉(zhuǎn)換為字符串。

[] ==> ''
[1] ==> '1'
[] + [1] ==> '1'
'1' + 2 ==> '12'

所以結(jié)果是'12'。

1 + 2 + "3"

JavaScript 從左到右執(zhí)行這些操作。當(dāng)數(shù)字3與字符串3相加時(shí)，字符串連接將優(yōu)先進(jìn)行。

1 + 2; // -> 3
3 + "3"; // -> "33"

總結(jié)

坦率地說(shuō)，這些挑戰(zhàn)并沒(méi)有為我膠們編碼技能提供任何價(jià)值，所以不應(yīng)該在實(shí)際項(xiàng)目中寫(xiě)這種代碼

但是，把這些技巧作為朋友和同事之間的一些裝13，不是一件非常有趣的事情嗎？

作者：Marina Mosti  譯者：前端小智 來(lái)源：medium 原文：https://medium.com/frontend-canteen/20-useless-but-funny-challange-for-javascript-develor-9eea39bb8efb