44 個 JavaScript 變態題解析

當初筆者做這套題的時候不僅懷疑智商, 連人生都開始懷疑了….

不過, 對於基礎知識的理解是深入程式設計的前提. 讓我們一起來看看這些變態題到底變態不變態吧!

第1題

["1", "2", "3"].map(parseInt)

知識點:

• Array/map
• Number/parseInt
• JavaScript parseInt

首先, map接受兩個引數, 一個回撥函式 callback, 一個回撥函式的this值

其中回撥函式接受三個引數 currentValue, index, arrary;

而題目中, map只傳入了回撥函式–parseInt.

其次, parseInt 只接受兩個兩個引數 string, radix(基數).

可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。

如果省略該引數或其值為 0，則數字將以 10 為基礎來解析。如果它以 “0x” 或 “0X” 開頭，將以 16 為基數。

如果該引數小於 2 或者大於 36，則 parseInt() 將返回 NaN。

所以本題即問

parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);

首先後兩者引數不合法.

所以答案是 [1, NaN, NaN]

第2題

[typeof null, null instanceof Object]

兩個知識點:

• Operators/typeof
• Operators/instanceof
• Operators/instanceof(中)

typeof 返回一個表示型別的字串.

instanceof 運算子用來檢測 constructor.prototype 是否存在於引數 object 的原型鏈上.

這個題可以直接看連結… 因為 typeof null === 'object' 自語言之初就是這樣….

typeof 的結果請看下錶:

type         result
Undefined   "undefined"
Null        "object"
Boolean     "boolean"
Number      "number"
String      "string"
Symbol      "symbol"
Host object Implementation-dependent
Function    "function"
Object      "object"

所以答案 [object, false]

第3題

[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ]

知識點:

• Array/Reduce

arr.reduce(callback[, initialValue])

reduce接受兩個引數, 一個回撥, 一個初始值.

回撥函式接受四個引數 previousValue, currentValue, currentIndex, array

需要注意的是 If the array is empty and no initialValue was provided, TypeError would be thrown.

所以第二個表示式會報異常. 第一個表示式等價於 Math.pow(3, 2) => 9; Math.pow(9, 1) =>9

答案 an error

第4題

var val = 'smtg';
console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');

兩個知識點:

• Operators/Operator_Precedence
• Operators/Conditional_Operator

簡而言之 + 的優先順序 大於 ?

所以原題等價於 'Value is true' ? 'Somthing' : 'Nonthing' 而不是 'Value is' + (true ? 'Something' : 'Nonthing')

答案 'Something'

第5題

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

這個相對簡單, 一個知識點:

• Hoisting

在 JavaScript中， functions 和 variables 會被提升。變數提升是JavaScript將宣告移至作用域 scope (全域性域或者當前函式作用域) 頂部的行為。

這個題目相當於

var name = 'World!';
(function () {
    var name;
    if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

所以答案是 'Goodbye Jack'

第6題

var END = Math.pow(2, 53);
var START = END - 100;
var count = 0;
for (var i = START; i <= END; i++) {
    count++;
}
console.log(count);

一個知識點:

• Infinity

在 JS 裡, Math.pow(2, 53) == 9007199254740992 是可以表示的最大值. 最大值加一還是最大值. 所以迴圈不會停.

補充: @jelly7723

js中可以表示的最大整數不是2的53次方，而是1.7976931348623157e+308。
2的53次方不是js能表示的最大整數而應該是能正確計算且不失精度的最大整數，可以參見js權威指南。
9007199254740992 +1還是 9007199254740992 ，這就是因為精度問題，如果 9007199254740992 +11或者 9007199254740992 +111的話，值是會發生改變的，只是這時候計算的結果不是正確的值，就是因為精度丟失的問題。

第7題

var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) { return x === undefined;});

答案是 []

看一篇文章理解稀疏陣列

• 譯 JavaScript中的稀疏陣列與密集陣列
• Array/filter

我們來看一下 Array.prototype.filter 的 polyfill:

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun/*, thisArg*/) {
    'use strict';

    if (this === void 0 || this === null) {
      throw new TypeError();
    }

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
      throw new TypeError();
    }

    var res = [];
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t) { // 注意這裡!!!
        var val = t[i];
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }

    return res;
  };
}

我們看到在迭代這個陣列的時候, 首先檢查了這個索引值是不是陣列的一個屬性, 那麼我們測試一下.

0 in ary; => true
3 in ary; => false
10 in ary; => true

也就是說 從 3 – 9 都是沒有初始化的’坑’!, 這些索引並不存在與陣列中. 在 array 的函式呼叫的時候是會跳過這些’坑’的.

第8題

var two   = 0.2
var one   = 0.1
var eight = 0.8
var six   = 0.6
[two - one == one, eight - six == two]

• JavaScript的設計缺陷?浮點運算：0.1 + 0.2 != 0.3

IEEE 754標準中的浮點數並不能精確地表達小數

那什麼時候精準, 什麼時候不經準呢? 筆者也不知道…

答案 [true, false]

第9題

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

兩個知識點:

• Statements/switch
• String

switch 是嚴格比較, String 例項和 字串不一樣.

var s_prim = 'foo';
var s_obj = new String(s_prim);

console.log(typeof s_prim); // "string"
console.log(typeof s_obj);  // "object"
console.log(s_prim === s_obj); // false

答案是 'Do not know!'

第10題

function showCase2(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase2(String('A'));

解釋:

String(x) does not create an object but does return a string, i.e. typeof String(1) === "string"

還是剛才的知識點, 只不過 String 不僅是個建構函式 直接呼叫返回一個字串哦.

答案 'Case A'

第11題

function isOdd(num) {
    return num % 2 == 1;
}
function isEven(num) {
    return num % 2 == 0;
}
function isSane(num) {
    return isEven(num) || isOdd(num);
}
var values = [7, 4, '13', -9, Infinity];
values.map(isSane);

一個知識點

• Arithmetic_Operators#Remainder

此題等價於

7 % 2 => 1
4 % 2 => 0
'13' % 2 => 1
-9 % % 2 => -1
Infinity % 2 => NaN

需要注意的是 餘數的正負號隨第一個運算元.

答案 [true, true, true, false, false]

第12題

parseInt(3, 8)
parseInt(3, 2)
parseInt(3, 0)

第一個題講過了, 答案 3, NaN, 3

第13題

Array.isArray( Array.prototype )

一個知識點:

• Array/prototype

一個鮮為人知的實事: Array.prototype => [];

答案: true

第14題

var a = [0];
if ([0]) {
  console.log(a == true);
} else {
  console.log("wut");
}

• JavaScript-Equality-Table

答案: false

第15題

[]==[]

== 是萬惡之源, 看上圖

答案是 false

第16題

'5' + 3
'5' - 3

兩個知識點:

• Arithmetic_Operators#Addition
• Arithmetic_Operators#Subtraction

+ 用來表示兩個數的和或者字串拼接, -表示兩數之差.

請看例子, 體會區別:

> '5' + 3
'53'
> 5 + '3'
'53'
> 5 - '3'
2
> '5' - 3
2
> '5' - '3'
2

也就是說 - 會盡可能的將兩個運算元變成數字, 而 + 如果兩邊不都是數字, 那麼就是字串拼接.

答案是 '53', 2

第17題

1 + - + + + - + 1

這裡應該是(倒著看)

1 + (a)  => 2
a = - (b) => 1
b = + (c) => -1
c = + (d) => -1
d = + (e) => -1
e = + (f) => -1
f = - (g) => -1
g = + 1   => 1

所以答案 2

第18題

var ary = Array(3);
ary[0]=2
ary.map(function(elem) { return '1'; });

稀疏陣列. 同第7題.

題目中的陣列其實是一個長度為3, 但是沒有內容的陣列, array 上的操作會跳過這些未初始化的’坑’.

所以答案是 ["1", undefined × 2]

這裡貼上 Array.prototype.map 的 polyfill.

Array.prototype.map = function(callback, thisArg) {

        var T, A, k;

        if (this == null) {
            throw new TypeError(' this is null or not defined');
        }

        var O = Object(this);
        var len = O.length >>> 0;
        if (typeof callback !== 'function') {
            throw new TypeError(callback + ' is not a function');
        }
        if (arguments.length > 1) {
            T = thisArg;
        }
        A = new Array(len);
        k = 0;
        while (k < len) {
            var kValue, mappedValue;
            if (k in O) {
                kValue = O[k];
                mappedValue = callback.call(T, kValue, k, O);
                A[k] = mappedValue;
            }
            k++;
        }
        return A;
    };

第19題

function sidEffecting(ary) {
  ary[0] = ary[2];
}
function bar(a,b,c) {
  c = 10
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1)

這是一個大坑, 尤其是涉及到 ES6語法的時候

知識點:

• Functions/arguments

首先 The arguments object is an Array-like object corresponding to the arguments passed to a function.

也就是說 arguments 是一個 object, c 就是 arguments[2], 所以對於 c 的修改就是對 arguments[2] 的修改.

所以答案是 21.

然而!!!!!!

當函式引數涉及到 any rest parameters, any default parameters or any destructured parameters 的時候, 這個 arguments 就不在是一個 mapped arguments object 了…..

請看:

function sidEffecting(ary) {
  ary[0] = ary[2];
}
function bar(a,b,c=3) {
  c = 10
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1)

答案是 12 !!!!

請讀者細細體會!!

第20題

var a = 111111111111111110000,
    b = 1111;
a + b;

答案還是 111111111111111110000. 解釋是 Lack of precision for numbers in JavaScript affects both small and big numbers. 但是筆者不是很明白……………. 請讀者賜教!

第21題

var x = [].reverse;
x();

這個題有意思!

知識點:

• Array/reverse

The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.

也就是說 最後會返回這個呼叫者(this), 可是 x 執行的時候是上下文是全域性. 那麼最後返回的是 window.

答案是 window

第22題

Number.MIN_VALUE > 0

true

第23題

[1 < 2 < 3, 3 < 2 < 1]

這個題也還可以.

這個題會讓人誤以為是 2 > 1 && 2 < 3 其實不是的.

這個題等價於

 1 < 2 => true;
 true < 3 =>  1 < 3 => true;
 3 < 2 => false;
 false < 1 => 0 < 1 => true;

答案是 [true, true]

第24題

// the most classic wtf
2 == [[[2]]]

這個題我是猜的. 我猜的 true, 至於為什麼…..

both objects get converted to strings and in both cases the resulting string is "2" 我不能信服…

第25題

3.toString()
3..toString()
3...toString()

這個題也挺逗, 我做對了 答案是 error, '3', error

你如果換一個寫法就更費解了

var a = 3;
a.toString()

這個答案就是 '3';

為啥呢?

因為在 js 中 1.1, 1., .1 都是合法的數字. 那麼在解析 3.toString 的時候這個 . 到底是屬於這個數字還是函式呼叫呢? 只能是數字, 因為3.合法啊!

第26題

(function(){
  var x = y = 1;
})();
console.log(y);
console.log(x);

答案是 1, error

y 被賦值到全域性. x 是區域性變數. 所以列印 x 的時候會報 ReferenceError

第27題

var a = /123/,
    b = /123/;
a == b
a === b

即使正則的字面量一致, 他們也不相等.

答案 false, false

第28題

var a = [1, 2, 3],
    b = [1, 2, 3],
    c = [1, 2, 4]
a ==  b
a === b
a >   c
a <   c

字面量相等的陣列也不相等.

陣列在比較大小的時候按照字典序比較

答案 false, false, false, true

第29題

var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]

知識點:

• Object/getPrototypeOf

只有 Function 擁有一個 prototype 的屬性. 所以 a.prototype 為 undefined.

而 Object.getPrototypeOf(obj) 返回一個具體物件的原型(該物件的內部[[prototype]]值)

答案 false, true

第30題

function f() {}
var a = f.prototype, b = Object.getPrototypeOf(f);
a === b

f.prototype is the object that will become the parent of any objects created with new f while Object.getPrototypeOf returns the parent in the inheritance hierarchy.

f.prototype 是使用使用 new 建立的 f 例項的原型. 而 Object.getPrototypeOf 是 f 函式的原型.

請看:

a === Object.getPrototypeOf(new f()) // true
b === Function.prototype // true

答案 false

第31題

function foo() { }
var oldName = foo.name;
foo.name = "bar";
[oldName, foo.name]

答案 ['foo', 'foo']

知識點:

• Function/name

因為函式的名字不可變.

第32題

"1 2 3".replace(/\d/g, parseInt)

知識點:

• String/replace#Specifying_a_function_as_a_parameter

str.replace(regexp|substr, newSubStr|function)

如果replace函式傳入的第二個引數是函式, 那麼這個函式將接受如下引數

• match 首先是匹配的字串
• p1, p2 …. 然後是正則的分組
• offset match 匹配的index
• string 整個字串

由於題目中的正則沒有分組, 所以等價於問

parseInt('1', 0)
parseInt('2', 2)
parseInt('3', 4)

答案: 1, NaN, 3

第33題

function f() {}
var parent = Object.getPrototypeOf(f);
f.name // ?
parent.name // ?
typeof eval(f.name) // ?
typeof eval(parent.name) //  ?

先說以下答案 'f', 'Empty', 'function', error 這個答案並不重要…..

這裡第一小問和第三小問很簡單不解釋了.

第二小問筆者在自己的瀏覽器測試的時候是 '', 第四問是 'undefined'

所以應該是平臺相關的. 這裡明白 parent === Function.prototype 就好了.

第34題

var lowerCaseOnly =  /^[a-z]+$/;
[lowerCaseOnly.test(null), lowerCaseOnly.test()]

知識點:

• RegExp/test

這裡 test 函式會將引數轉為字串. 'nul', 'undefined' 自然都是全小寫了

答案: true, true

第35題

[,,,].join(", ")

[,,,] => [undefined × 3]

因為javascript 在定義陣列的時候允許最後一個元素後跟一個,, 所以這是個長度為三的稀疏陣列(這是長度為三, 並沒有 0, 1, 2三個屬性哦)

答案: ", , "

第36題

var a = {class: "Animal", name: 'Fido'};
a.class

這個題比較流氓.. 因為是瀏覽器相關, class是個保留字(現在是個關鍵字了)

所以答案不重要, 重要的是自己在取屬性名稱的時候儘量避免保留字. 如果使用的話請加引號 a['class']

第37題

var a = new Date("epoch")

知識點:

• Date
• Date/parse

簡單來說, 如果呼叫 Date 的建構函式傳入一個字串的話需要符合規範, 即滿足 Date.parse 的條件.

另外需要注意的是 如果格式錯誤 建構函式返回的仍是一個Date 的例項 Invalid Date.

答案 Invalid Date

第38題

var a = Function.length,
    b = new Function().length
a === b

我們知道一個function(Function 的例項)的 length 屬性就是函式簽名的引數個數, 所以 b.length == 0.

另外 Function.length 定義為1……

所以不相等…….答案 false

第39題

var a = Date(0);
var b = new Date(0);
var c = new Date();
[a === b, b === c, a === c]

還是關於Date 的題, 需要注意的是

• 如果不傳引數等價於當前時間.
• 如果是函式呼叫 返回一個字串.

答案 false, false, false

第40題

var min = Math.min(), max = Math.max()
min < max

知識點:

• Math/min
• Math/max

有趣的是, Math.min 不傳引數返回 Infinity, Math.max 不傳引數返回 -Infinity

答案: false

第41題

function captureOne(re, str) {
  var match = re.exec(str);
  return match && match[1];
}
var numRe  = /num=(\d+)/ig,
    wordRe = /word=(\w+)/i,
    a1 = captureOne(numRe,  "num=1"),
    a2 = captureOne(wordRe, "word=1"),
    a3 = captureOne(numRe,  "NUM=2"),
    a4 = captureOne(wordRe,  "WORD=2");
[a1 === a2, a3 === a4]

知識點:

• RegExp/exec

通俗的講

因為第一個正則有一個 g 選項 它會‘記憶’他所匹配的內容, 等匹配後他會從上次匹配的索引繼續, 而第二個正則不會

舉個例子

var myRe = /ab*/g;
var str = 'abbcdefabh';
var myArray;
while ((myArray = myRe.exec(str)) !== null) {
  var msg = 'Found ' + myArray[0] + '. ';
  msg += 'Next match starts at ' + myRe.lastIndex;
  console.log(msg);
}
// Found abb. Next match starts at 3
// Found ab. Next match starts at 9

所以 a1 = ’1′; a2 = ’1′; a3 = null; a4 = ’2′

答案 [true, false]

第42題

var a = new Date("2014-03-19"),
    b = new Date(2014, 03, 19);
[a.getDay() === b.getDay(), a.getMonth() === b.getMonth()]

這個….

JavaScript inherits 40 years old design from C: days are 1-indexed in C’s struct tm, but months are 0 indexed. In addition to that, getDay returns the 0-indexed day of the week, to get the 1-indexed day of the month you have to use getDate, which doesn’t return a Date object.

a.getDay()
3
b.getDay()
6
a.getMonth()
2
b.getMonth()
3

都是套路!

答案 [false, false]

第43題

if ('http://giftwrapped.com/picture.jpg'.match('.gif')) {
  'a gif file'
} else {
  'not a gif file'
}

知識點:

• String/match

String.prototype.match 接受一個正則, 如果不是, 按照 new RegExp(obj) 轉化. 所以 . 並不會轉義
那麼 /gif 就匹配了 /.gif/

答案: 'a gif file'

第44題

function foo(a) {
    var a;
    return a;
}
function bar(a) {
    var a = 'bye';
    return a;
}
[foo('hello'), bar('hello')]

在兩個函式裡, a作為引數其實已經宣告瞭, 所以 var a; var a = 'bye' 其實就是 a; a ='bye'

所以答案 'hello', 'bye'

英文原文：javascript-puzzlers