1. 程式人生 > >部分JS經典題目解析

部分JS經典題目解析

此次列舉出一些覺得有意思的JS題目(來源於出了名的44題),相信有非常多關於這些題目的部落格,寫這篇部落格的目的在於鞏固一些知識點,希望能和讀者共同進步。

1. map函式執行過程
[“1”, “2”, “3”].map(parseInt)

答案: [1, NaN, NaN]
解析: map(function callback(current, index, array)), map 回掉提供三個引數,current value, index of current value, array.
parseInt(value, radix), parseInt 提供兩個引數,value 表示需要轉換的string,radix表示string原本的進位制單位,從2到36.

所以這道題的執行過程是這樣的:
array.map(parseInt(value(current), radix(index) )); 回掉會自動按序分配引數
current => value, index => radix;

真實執行過程
array.map(parseInt(1, 0)) => parseInt(1, 0), 0 預設代表十進位制。
parseInt(2, 1), 沒有1進位制,所以返回NaN,
parseInt(3,2), 2進位制只有0,1, 所以同樣返回NaN

2.[typeof null, null instanceof Object]
答案: [object, false]
解析: typeof 返回一個表示型別的字串, typeof null == object.
instanceof 用來測試一個物件在其原型鏈中是否存在一個建構函式的 prototype 屬性, 顯而易見,null 沒有建構函式,所以返回的是false

  1. 運算子優先順序
    var val = ‘smtg’;

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

答案:Something
解析:+ 運算子優先順序高於 > ,所以沒有括號的情況下, 會先執行字串連線操作。
所以等價於 ‘Value is true’? ‘Something’ : ‘Nothing’
如果搞不清運算子優先順序的時候,可以加上括號

  1. 稀疏陣列與Array.filter
var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) { return x === undefined;});

答案:[]

解析: 這邊的ary 是一個稀疏陣列,index從3到9都沒有定義,所以ary[3~9]的值是undefined(可以在chrome tool裡通過ary[index]來檢視),那麼乍一看這個題的答案應該是返回7個undefined組成的陣列。

但是這裡返回的是[],原因在於filter函式的作用。

if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();
   
    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;  //前端全棧學習交流圈:866109386.
    if (thisArg === undefined){//面相1-3年前端開發人員.
      while (++i !== len){     //幫助突破技術瓶頸,提升思維能力.
        // checks to see if the key was set
        //看這裡 看這裡
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
   
    res.length = c; // shrink down array to proper size
    return res;
  };
}

可以看紅色文字下方的程式碼,filter函式會先判斷當前index是否在陣列中被設定,即是否有ary[index] = value的過程,否則會跳過這個index。

所以對於稀疏陣列,未定義的index會被跳過,從而導致這道題的答案是[]。 如果有ary[index] = undefined, 那麼結果就會是返回由undefined 組成的陣列。

5. String(‘A’) 和 new String(‘A’) 的區別

以下兩個程式碼段的輸出結果是?

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'));
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'));

答案:‘Do not know!’ ; ‘Case A’

解析:為什麼兩個程式碼段的輸出不一致呢?

兩個原因:1.switch進行比較的時候用的是全等符“===”,所以不會做型別轉換,即“10”不會等於10;

  1. new String() 和 String 返回的型別不同,前者返回的是object,後者返回的是string,所以在做全等比較的時候,返回的結果是false。

所以如果有需要用到switch對於字串做比較的時候,需要注意傳入的引數型別。

6. 你真的瞭解"=="嗎?
下面兩個程式碼段的輸出是?

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

答案:false, false

解析:如果單純的把[0]轉換成boolean型別的話,結果會是true,所以if判斷語句的結果是true。

看了很多其他的部落格,都有說到“==”會做型別轉換,比較其值,我覺得這個答案依然無法詳細解釋上述程式碼的結果。

查閱了更多資料後,找到了一些“==“的規則:

1、如果兩個值型別相同,進行 === 比較,比較規則同上 
2、如果兩個值型別不同,他們可能相等。根據下面規則進行型別轉換再比較: 
a、如果一個是null、一個是undefined,那麼[相等]。 
b、如果一個是字串,一個是數值,把字串轉換成數值再進行比較。 
c、如果任一值是 true,把它轉換成 1 再比較;如果任一值是 false,把它轉換成 0 再比較。 
d、如果一個是物件,另一個是數值或字串,把物件轉換成基礎型別的值再比較。物件轉換成基礎型別,利用它的toString或者valueOf方法。js核心內建類,會嘗試valueOf先於toString;例外的是Date,Date利用的是toString轉換。非js核心的物件,令說(比較麻煩,我也不大懂) 
e、任何其他組合(array陣列等),都不相等。

所以其實”==“的轉換規則,並沒有想象的那麼簡單,由此可見[0] == true, 應該採用的是規則c, 而[] == [] 應該採用的是規則e.

最後附上一張”==“比較的結果圖

7.  Arguments of methods

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

答案:21, 12

解析:第一個程式碼段的答案,我相信很容易得出。問題是第二個程式碼段,乍一看結果應該和第一個程式碼段相同,實則不然,那麼是為什麼呢?

其實這邊不同的結果是由arguments 這個物件(arguments 不是陣列)造成的,如果函式的引數有預設值的時候,那麼arguments這個物件不會追蹤引數值的變化,並且只記錄傳遞過來的值。

所以第二個程式碼段中,arguments的結果是(1,1,1),sideEffecting函式拿到的結果是ary[0] =1, ary[2] =1; 所以回到a+b+c = 1+1+10 ==》 12。
8. 有趣的比較符又來了
[1 < 2 < 3, 3 < 2 < 1]
答案: true, true

解析:1<2<3 等價於1<2=> true; true<3 => 1<3=> true;

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

9.變數提升

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

答案: 1, error

解析:這道題目涉及到變數提升的範圍,以及賦值語法。

var x=y=1 等價於 var x=1; y=1; 這裡的y會被提升至全域性域,所以的除上述答案。

var x=1,y=1 等價於var x=1; var y=1, 這樣寫的話,x,y都是區域性變數,不會被提升。

先總結這麼幾道,之後碰到覺得有趣的題目,會持續更新。