【面試說】怪異的 JavaScript

前言

在網(wǎng)上看到一個(gè)有趣的測(cè)試，訪問地址 ^[1]。里面包含了 25 道選擇題，每個(gè)都是一個(gè)簡(jiǎn)單的表達(dá)式，然后讓你選擇，都是一些 JavaScript 怪異行為的體現(xiàn)，最后網(wǎng)站生成答案和解析，幫助你更好的理解 JavaScript 怪異的行為。

這里我分享 10 道我認(rèn)為有趣的，希望對(duì)大家有所幫助

測(cè)試

1. [,,,].length

   a. 0

   b. 3

   c. 4

   d. SyntaxError

2. 10,2

   a. 10.2

   b. 10

   c. 2

   d. 20

3. true == "true"

   a. true

   b. false

4. 010 - 03

   a. 7

   b. 5

   c. 3

   d. NaN

5. 1/0 > Math.pow(10, 1000)

   a. true

   b. false

   c. NaN

   d. SyntaxError

6. 0/0

   a. 0

   b. Infinity

   c. NaN

   d. SyntaxError

7. true++

   a. 2

   b. undefined

   c. NaN

   d. SyntaxError

8. true + ("true" - 0)

   a. 1

   b. 2

   c. NaN

   d. SyntaxError

9. undefined + false

   a. "undefinedfalse"

   b. 0

   c. NaN

   d. SyntaxError

10. NaN++

    a. NaN

    b. Undefined

    c. TypeError

    d. SyntaxError

答案

1. [,,,].length

   a. 0

   b. 3

   c. 4

   d. SyntaxError

   解析：b。稀疏數(shù)組，[,,] 中間的元素為 empty ，這種我們就稱為稀疏數(shù)組，我們也可以通過類似 new Array (2) 的方式創(chuàng)建稀疏數(shù)組。那為什么不是 4 而是 3 呢？這個(gè)跟 JavaScript 的尾后逗號(hào)有關(guān)。MDN^[2] 中的解析如下：

   尾后逗號(hào) （有時(shí)叫做 “終止逗號(hào)”）在向 JavaScript 代碼添加元素、參數(shù)、屬性時(shí)十分有用。如果你想要添加新的屬性，并且上一行已經(jīng)使用了尾后逗號(hào)，你可以僅僅添加新的一行，而不需要修改上一行。這使得版本控制的代碼比較（diff）更加清晰，代碼編輯過程中遇到的麻煩更少。

   其實(shí)這個(gè)在我們平時(shí)寫對(duì)象的時(shí)候用得比較多（假如 ESlint 允許的話）。

   var object = {
     foo: "bar",
     baz: "qwerty",
     age: 42, // 注意
   };
   

   其實(shí)數(shù)組中也一樣，這樣就不難理解上面的輸出了。

   var arr = [
     1,
     2,
     3,
   ];
   
   arr; // [1, 2, 3]
   arr.length; // 3
   

2. 10,2

   a. 10.2

   b. 10

   c. 2

   d. 20

   解析：c。逗號(hào)操作符只返回最后一個(gè)操作符的值。這允許你創(chuàng)建一個(gè)復(fù)合表達(dá)式，在其中計(jì)算多個(gè)表達(dá)式，復(fù)合表達(dá)式為最后一個(gè)表達(dá)式的值。在 for  循環(huán)中可能會(huì)用到?？吹皆u(píng)論中沒整明白這個(gè)的，可以看 [MDN]

   for (var i = 0, j = 9; i <= 9; i++, j--)
     console.log('a[' + i + '][' + j + '] = ' + a[i][j]);
   

   function myFunc() {
     var x = 0;
   
     return (x += 1, x); // the same as return ++x;
   }
   

3. true == "true"

   a. true

   b. false

   解析：b。根據(jù)隱式類型轉(zhuǎn)換的規(guī)則。

   Number(true); // -> 1
   Number("true"); // -> NaN
   1 == NaN; // -> false
   

4. 010 - 03

   a. 7

   b. 5

   c. 3

   d. NaN

   解析：b。010 被 JavaScript 視為八進(jìn)制數(shù)。因此，它的值是以 8 為基數(shù)的。010 被解析成 8，減 3 得 5。

5. 1/0 > Math.pow(10, 1000)

   a. true

   b. false

   c. NaN

   d. SyntaxError

   解析：b。兩個(gè)表達(dá)式都是 Infinity。Infinity 兩者相等。

   1/0; // -> Infinity
   Math.pow(10, 1000); // -> Infinity
   Infinity > Infinity; // -> false
   

6. 0/0

   a. 0

   b. Infinity

   c. NaN

   d. SyntaxError

   解析：由于等式 0/0 是沒有有意義的數(shù)值答案，輸出簡(jiǎn)單地是 NaN。

7. true++

   a. 2

   b. undefined

   c. NaN

   d. SyntaxError

   解析：d。會(huì)存在以下的怪異行為，undefined 不會(huì)報(bào)錯(cuò)?！具@里我也找不到合適的理由去解釋】。

   1++; // -> SyntaxError
   "x"++; // -> SyntaxError
   undefined++; // -> NaN
   

   假如要使它不報(bào)錯(cuò)的話，就得：

   let x = true;
   x++;
   x; // -> 2
   

8. true + ("true" - 0)

   a. 1

   b. 2

   c. NaN

   d. SyntaxError

   解析：同 3。

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

9. undefined + false

   a. "undefinedfalse"

   b. 0

   c. NaN

   d. SyntaxError

   解析：false 可以轉(zhuǎn)換為數(shù)字，undefined 不能。

   Number(false); // -> 0
   Number(undefined); // -> NaN
   NaN + 0; // -> NaN
   

   但是 undefined 又可以轉(zhuǎn)換成 false。

   !!undefined === false; // -> true
   

   所以要以上為 0。應(yīng)該：

   !!undefined + false; // -> 0
   

10. NaN++

    a. NaN

    b. Undefined

    c. TypeError

    d. SyntaxError

    答案：a。NaN 不是一個(gè)數(shù)字，所以它不能遞增。這也意味著 NaN 和 NaN++ 表示相同的值。

結(jié)語

Javascript 之所以有以上怪異表現(xiàn)，主要是初期設(shè)計(jì)過于匆忙，1995 年僅用用了 10 天來完成的。可能上面的行為我們用得不多，但了解它們對(duì)于我們更加深入了解 JavaScript 也是有所幫助。所以強(qiáng)烈建議大家去做一些這 25 道題目 ^[3]，感受一下。

參考資料