1、使用 typeof bar === "object"
來確定 bar
是否是對象的潛在陷阱是什么?如何避免這個陷阱?



杭州IT培訓
美國上市IT培訓機構
0571-56026878
在求職面試的過程中,我們會遇到各種面試題,本文收集了些基本的JavaScript面試題,同時還附上了參考答案。快來看看吧。
1、使用 typeof bar === "object"
來確定 bar
是否是對象的潛在陷阱是什么?如何避免這個陷阱?
盡管 typeof bar === "object"
是檢查 bar
是否對象的可靠方法,令人驚訝的是在JavaScript中 null
也被認為是對象!
因此,令大多數開發人員驚訝的是,下面的代碼將輸出 true
(而不是false
) 到控制臺:
var bar = null; console.log(typeof bar === "object"); // logs true!
只要清楚這一點,同時檢查 bar
是否為 null
,就可以很容易地避免問題:
console.log((bar !== null) && (typeof bar === "object")); // logs false
要答全問題,還有其他兩件事情值得注意:
首先,上述解決方案將返回 false
,當 bar
是一個函數的時候。在大多數情況下,這是期望行為,但當你也想對函數返回 true
的話,你可以修改上面的解決方案為:
console.log((bar !== null) && ((typeof bar === "object") || (typeof bar === "function")));
第二,上述解決方案將返回 true
,當 bar
是一個數組(例如,當 var bar = [];
)的時候。在大多數情況下,這是期望行為,因為數組是真正的對象,但當你也想對數組返回 false
時,你可以修改上面的解決方案為:
console.log((bar !== null) && (typeof bar === "object") && (toString.call(bar) !== "[object Array]"));
或者,如果你使用jQuery的話:
console.log((bar !== null) && (typeof bar === "object") && (! $.isArray(bar)));
(function(){ var a = b = 3; })(); console.log("a defined? " + (typeof a !== 'undefined')); console.log("b defined? " + (typeof b !== 'undefined'));
由于 a
和 b
都定義在函數的封閉范圍內,并且都始于 var
關鍵字,大多數JavaScript開發人員期望 typeof a
和 typeof b
在上面的例子中都是undefined。
然而,事實并非如此。這里的問題是,大多數開發人員將語句 var a = b = 3;
錯誤地理解為是以下聲明的簡寫:
var b = 3; var a = b;
但事實上,var a = b = 3;
實際是以下聲明的簡寫:
b = 3; var a = b;
因此(如果你不使用嚴格模式的話),該代碼段的輸出是:
a defined? false b defined? true
但是, b
如何才能被定義在封閉函數的范圍之外呢?是的,既然語句 var a = b = 3;
是語句 b = 3;
和 var a = b;
的簡寫, b
最終成為了一個全局變量(因為它沒有前綴 var
關鍵字),因此仍然在范圍內甚至封閉函數之外。
需要注意的是,在嚴格模式下(即使用 use strict
),語句var a = b = 3;
將生成ReferenceError: b is not defined
的運行時錯誤,從而避免任何否則可能會導致的headfakes /bug。 (還是你為什么應該理所當然地在代碼中使用 use strict
的最好例子!)
var myObject = { foo: "bar", func: function() { var self = this; console.log("outer func: this.foo = " + this.foo); console.log("outer func: self.foo = " + self.foo); (function() { console.log("inner func: this.foo = " + this.foo); console.log("inner func: self.foo = " + self.foo); }()); } }; myObject.func();
上面的代碼將輸出以下內容到控制臺:
outer func: this.foo = bar outer func: self.foo = bar inner func: this.foo = undefined inner func: self.foo = bar
在外部函數中, this
和self
兩者都指向了 myObject
,因此兩者都可以正確地引用和訪問 foo
。
在內部函數中, this
不再指向 myObject
。其結果是,this.foo
沒有在內部函數中被定義,相反,指向到本地的變量self
保持在范圍內,并且可以訪問。(在ECMA 5之前,在內部函數中的this
將指向全局的 window
對象;反之,因為作為ECMA 5,內部函數中的功能this
是未定義的。)
這是一個越來越普遍的做法,被許多流行的JavaScript庫(jQuery,Node.js等)采用。這種技術創建了一個圍繞文件全部內容的閉包,也許是最重要的是,創建了一個私有的命名空間,從而有助于避免不同JavaScript模塊和庫之間潛在的名稱沖突。
這種技術的另一個特點是,允許一個易于引用的(假設更短的)別名用于全局變量。這通常用于,例如,jQuery插件中。jQuery允許你使用jQuery.noConflict()
,來禁用 $
引用到jQuery命名空間。在完成這項工作之后,你的代碼仍然可以使用$
利用這種閉包技術,如下所示:
(function($) { /* jQuery plugin code referencing $ */ } )(jQuery);
use strict
有什么意義和好處?
對于這個問題,既簡要又最重要的答案是,use strict
是一種在JavaScript代碼運行時自動實行更嚴格解析和錯誤處理的方法。那些被忽略或默默失敗了的代碼錯誤,會產生錯誤或拋出異常。通常而言,這是一個很好的做法。
嚴格模式的一些主要優點包括:
使調試更加容易。那些被忽略或默默失敗了的代碼錯誤,會產生錯誤或拋出異常,因此盡早提醒你代碼中的問題,你才能更快地指引到它們的源代碼。
防止意外的全局變量。如果沒有嚴格模式,將值分配給一個未聲明的變量會自動創建該名稱的全局變量。這是JavaScript中最常見的錯誤之一。在嚴格模式下,這樣做的話會拋出錯誤。
消除 this
強制。如果沒有嚴格模式,引用null或未定義的值到 this
值會自動強制到全局變量。這可能會導致許多令人頭痛的問題和讓人恨不得拔自己頭發的bug。在嚴格模式下,引用 null或未定義的 this
值會拋出錯誤。
不允許重復的屬性名稱或參數值。當檢測到對象(例如,var object = {foo: "bar", foo: "baz"};
)中重復命名的屬性,或檢測到函數中(例如,function foo(val1, val2, val1){}
)重復命名的參數時,嚴格模式會拋出錯誤,因此捕捉幾乎可以肯定是代碼中的bug可以避免浪費大量的跟蹤時間。
使eval()
更安全。在嚴格模式和非嚴格模式下,eval()
的行為方式有所不同。最顯而易見的是,在嚴格模式下,變量和聲明在 eval()
語句內部的函數不會在包含范圍內創建(它們會在非嚴格模式下的包含范圍中被創建,這也是一個常見的問題源)。
在 delete
使用無效時拋出錯誤。delete
操作符(用于從對象中刪除屬性)不能用在對象不可配置的屬性上。當試圖刪除一個不可配置的屬性時,非嚴格代碼將默默地失敗,而嚴格模式將在這樣的情況下拋出異常。
function foo1() { return { bar: "hello" }; } function foo2() { return { bar: "hello" }; }
出人意料的是,這兩個函數返回的內容并不相同。更確切地說是:
console.log("foo1 returns:"); console.log(foo1()); console.log("foo2 returns:"); console.log(foo2());
將產生:
foo1 returns: Object {bar: "hello"} foo2 returns: undefined
這不僅是令人驚訝,而且特別讓人困惑的是, foo2()
返回undefined卻沒有任何錯誤拋出。
原因與這樣一個事實有關,即分號在JavaScript中是一個可選項(盡管省略它們通常是非常糟糕的形式)。其結果就是,當碰到 foo2()
中包含 return
語句的代碼行(代碼行上沒有其他任何代碼),分號會立即自動插入到返回語句之后。
也不會拋出錯誤,因為代碼的其余部分是完全有效的,即使它沒有得到調用或做任何事情(相當于它就是是一個未使用的代碼塊,定義了等同于字符串 "hello"
的屬性 bar
)。
這種行為也支持放置左括號于JavaScript代碼行的末尾,而不是新代碼行開頭的約定。正如這里所示,這不僅僅只是JavaScript中的一個風格偏好。
NaN
是什么?它的類型是什么?你如何可靠地測試一個值是否等于 NaN
?
NaN
屬性代表一個“不是數字”的值。這個特殊的值是因為運算不能執行而導致的,不能執行的原因要么是因為其中的運算對象之一非數字(例如, "abc" / 4
),要么是因為運算的結果非數字(例如,除數為零)。
雖然這看上去很簡單,但 NaN
有一些令人驚訝的特點,如果你不知道它們的話,可能會導致令人頭痛的bug。
首先,雖然 NaN
意味著“不是數字”,但是它的類型,不管你信不信,是 Number
:
console.log(typeof NaN === "number"); // logs "true"
此外, NaN
和任何東西比較——甚至是它自己本身!——結果是false:
console.log(NaN === NaN); // logs "false"
一種半可靠的方法來測試一個數字是否等于 NaN,是使用內置函數 isNaN()
,但即使使用 isNaN()
依然并非是一個完美的解決方案。
一個更好的解決辦法是使用 value !== value
,如果值等于NaN,只會產生true。另外,ES6提供了一個新的 Number.isNaN()
函數,這是一個不同的函數,并且比老的全局 isNaN()
函數更可靠。
console.log(0.1 + 0.2); console.log(0.1 + 0.2 == 0.3);
一個稍微有點編程基礎的回答是:“你不能確定。可能會輸出“0.3”和“true”,也可能不會。JavaScript中的數字和浮點精度的處理相同,因此,可能不會總是產生預期的結果。“
以上所提供的例子就是一個演示了這個問題的典型例子。但出人意料的是,它會輸出:
0.30000000000000004 false
isInteger(x)
的可能方法,用于確定x是否是整數。
這可能聽起來是小菜一碟,但事實上,這很瑣碎,因為ECMAScript 6引入了一個新的正以此為目的 Number.isInteger()
函數。然而,之前的ECMAScript 6,會更復雜一點,因為沒有提供類似的 Number.isInteger()
方法。
問題是,在ECMAScript規格說明中,整數只概念上存在:即,數字值總是存儲為浮點值。
考慮到這一點,最簡單又最干凈的ECMAScript6之前的解決方法(同時也非常穩健地返回 false
,即使一個非數字的值,如字符串或 null
,被傳遞給函數)如下:
function isInteger(x) { return (x^0) === x; }
下面的解決方法也是可行的,雖然不如上面那個方法優雅:
function isInteger(x) { return Math.round(x) === x; }
請注意 Math.ceil()
和 Math.floor()
在上面的實現中等同于 Math.round()
。
或:
function isInteger(x) { return (typeof x === 'number') && (x % 1 === 0);
相當普遍的一個不正確的解決方案是:
function isInteger(x) { return parseInt(x, 10) === x; }
雖然這個以 parseInt
函數為基礎的方法在 x
取許多值時都能工作良好,但一旦 x
取值相當大的時候,就會無法正常工作。問題在于 parseInt()
在解析數字之前強制其第一個參數到字符串。因此,一旦數目變得足夠大,它的字符串就會表達為指數形式(例如, 1e+21
)。因此,parseInt()
函數就會去解析 1e+21
,但當到達 e
字符串的時候,就會停止解析,因此只會返回值 1
。注意:
> String(1000000000000000000000) '1e+21' > parseInt(1000000000000000000000, 10) 1 > parseInt(1000000000000000000000, 10) === 1000000000000000000000 false
(function() { console.log(1); setTimeout(function(){console.log(2)}, 1000); setTimeout(function(){console.log(3)}, 0); console.log(4); })();
序號如下:
1 4 3 2
讓我們先來解釋比較明顯而易見的那部分:
1
和 4
之所以放在前面,是因為它們是通過簡單調用 console.log()
而沒有任何延遲輸出的
2
之所以放在 3
的后面,是因為 2
是延遲了1000毫秒(即,1秒)之后輸出的,而 3
是延遲了0毫秒之后輸出的。
好的。但是,既然 3
是0毫秒延遲之后輸出的,那么是否意味著它是立即輸出的呢?如果是的話,那么它是不是應該在 4
之前輸出,既然 4
是在第二行輸出的?
要回答這個問題,你需要正確理解JavaScript的事件和時間設置。
瀏覽器有一個事件循環,會檢查事件隊列和處理未完成的事件。例如,如果時間發生在后臺(例如,腳本的 onload
事件)時,瀏覽器正忙(例如,處理一個 onclick
),那么事件會添加到隊列中。當onclick處理程序完成后,檢查隊列,然后處理該事件(例如,執行 onload
腳本)。
同樣的, setTimeout()
也會把其引用的函數的執行放到事件隊列中,如果瀏覽器正忙的話。
當setTimeout()
的第二個參數為0的時候,它的意思是“盡快”執行指定的函數。具體而言,函數的執行會放置在事件隊列的下一個計時器開始。但是請注意,這不是立即執行:函數不會被執行除非下一個計時器開始。這就是為什么在上述的例子中,調用 console.log(4)
發生在調用 console.log(3)
之前(因為調用 console.log(3)
是通過setTimeout被調用的,因此會稍微延遲)。
下面這個函數在 str
是回文結構的時候返回true,否則,返回false。
function isPalindrome(str) { str = str.replace(/\W/g, '').toLowerCase(); return (str == str.split('').reverse().join('')); }
例如:
console.log(isPalindrome("level")); // logs 'true' console.log(isPalindrome("levels")); // logs 'false' console.log(isPalindrome("A car, a man, a maraca")); // logs 'true'
12、寫一個 sum
方法,在使用下面任一語法調用時,都可以正常工作。
console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5
(至少)有兩種方法可以做到:
方法1
function sum(x) { if (arguments.length == 2) { return arguments[0] + arguments[1]; } else { return function(y) { return x + y; }; } }
在JavaScript中,函數可以提供到 arguments
對象的訪問,arguments
對象提供傳遞到函數的實際參數的訪問。這使我們能夠使用 length
屬性來確定在運行時傳遞給函數的參數數量。
如果傳遞兩個參數,那么只需加在一起,并返回。
否則,我們假設它被以 sum(2)(3)
這樣的形式調用,所以我們返回一個匿名函數,這個匿名函數合并了傳遞到 sum()
的參數和傳遞給匿名函數的參數。
方法2
function sum(x, y) { if (y !== undefined) { return x + y; } else { return function(y) { return x + y; }; } }
當調用一個函數的時候,JavaScript不要求參數的數目匹配函數定義中的參數數量。如果傳遞的參數數量大于函數定義中參數數量,那么多余參數將簡單地被忽略。另一方面,如果傳遞的參數數量小于函數定義中的參數數量,那么缺少的參數在函數中被引用時將會給一個 undefined
值。所以,在上面的例子中,簡單地檢查第2個參數是否未定義,就可以相應地確定函數被調用以及進行的方式。
for (var i = 0; i < 5; i++) { var btn = document.createElement('button'); btn.appendChild(document.createTextNode('Button ' + i)); btn.addEventListener('click', function(){ console.log(i); }); document.body.appendChild(btn); }
(a)當用戶點擊“Button 4”的時候會輸出什么到控制臺,為什么?(b)提供一個或多個備用的可按預期工作的實現方案。
(a)無論用戶點擊什么按鈕,數字5將總會輸出到控制臺。這是因為,當 onclick
方法被調用(對于任何按鈕)的時候, for
循環已經結束,變量 i
已經獲得了5的值。(面試者如果能夠談一談有關如何執行上下文,可變對象,激活對象和內部“范圍”屬性貢有助于閉包行為,則可以加分)。
(b)要讓代碼工作的關鍵是,通過傳遞到一個新創建的函數對象,在每次傳遞通過 for
循環時,捕捉到 i
值。下面是三種可能實現的方法:
for (var i = 0; i < 5; i++) { var btn = document.createElement('button'); btn.appendChild(document.createTextNode('Button ' + i)); btn.addEventListener('click', (function(i) { return function() { console.log(i); }; })(i)); document.body.appendChild(btn); }
或者,你可以封裝全部調用到在新匿名函數中的 btn.addEventListener
:
for (var i = 0; i < 5; i++) { var btn = document.createElement('button'); btn.appendChild(document.createTextNode('Button ' + i)); (function (i) { btn.addEventListener('click', function() { console.log(i); }); })(i); document.body.appendChild(btn); }
也可以調用數組對象的本地 forEach
方法來替代 for
循環:
['a', 'b', 'c', 'd', 'e'].forEach(function (value, i) { var btn = document.createElement('button'); btn.appendChild(document.createTextNode('Button ' + i)); btn.addEventListener('click', function() { console.log(i); }); document.body.appendChild(btn); });
var arr1 = "john".split(''); var arr2 = arr1.reverse(); var arr3 = "jones".split(''); arr2.push(arr3); console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1)); console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));
輸出結果是:
"array 1: length=5 last=j,o,n,e,s" "array 2: length=5 last=j,o,n,e,s"
arr1
和 arr2
在上述代碼執行之后,兩者相同了,原因是:
調用數組對象的 reverse()
方法并不只返回反順序的陣列,它也反轉了數組本身的順序(即,在這種情況下,指的是 arr1
)。
reverse()
方法返回一個到數組本身的引用(在這種情況下即,arr1
)。其結果為,arr2
僅僅是一個到 arr1
的引用(而不是副本)。因此,當對 arr2
做了任何事情(即當我們調用 arr2.push(arr3);
)時,arr1
也會受到影響,因為 arr1
和 arr2
引用的是同一個對象。
這里有幾個側面點有時候會讓你在回答這個問題時,陰溝里翻船:
傳遞數組到另一個數組的 push()
方法會讓整個數組作為單個元素映射到數組的末端。其結果是,語句 arr2.push(arr3);
在其整體中添加 arr3
作為一個單一的元素到 arr2
的末端(也就是說,它并沒有連接兩個數組,連接數組是 concat()
方法的目的)。
和Python一樣,JavaScript標榜數組方法調用中的負數下標,例如 slice()
可作為引用數組末尾元素的方法:例如,-1下標表示數組中的最后一個元素,等等。
console.log(1 + "2" + "2"); console.log(1 + +"2" + "2"); console.log(1 + -"1" + "2"); console.log(+"1" + "1" + "2"); console.log( "A" - "B" + "2"); console.log( "A" - "B" + 2);
上面的代碼將輸出以下內容到控制臺:
"122" "32" "02" "112" "NaN2" NaN
原因是…
這里的根本問題是,JavaScript(ECMAScript)是一種弱類型語言,它可對值進行自動類型轉換,以適應正在執行的操作。讓我們通過上面的例子來說明這是如何做到的。
例1:1 + "2" + "2"
輸出:"122"
說明: 1 + "2"
是執行的第一個操作。由于其中一個運算對象("2"
)是字符串,JavaScript會假設它需要執行字符串連接,因此,會將 1
的類型轉換為 "1"
, 1 + "2"
結果就是 "12"
。然后, "12" + "2"
就是 "122"
。
例2: 1 + +"2" + "2"
輸出: "32"
說明:根據運算的順序,要執行的第一個運算是 +"2"
(第一個 "2"
前面的額外 +
被視為一元運算符)。因此,JavaScript將 "2"
的類型轉換為數字,然后應用一元 +
號(即,將其視為一個正數)。其結果是,接下來的運算就是 1 + 2
,這當然是 3
。然后我們需要在一個數字和一個字符串之間進行運算(即, 3
和 "2"
),同樣的,JavaScript會將數值類型轉換為字符串,并執行字符串的連接,產生 "32"
。
例3: 1 + -"1" + "2"
輸出: "02"
說明:這里的解釋和前一個例子相同,除了此處的一元運算符是 -
而不是 +
。先是 "1"
變為 1
,然后當應用 -
時又變為了 -1
,然后將其與 1
相加,結果為 0
,再將其轉換為字符串,連接最后的 "2"
運算對象,得到 "02"
。
例4: +"1" + "1" + "2"
輸出: "112"
說明:雖然第一個運算對象 "1"
因為前綴的一元 +
運算符類型轉換為數值,但又立即轉換回字符串,當連接到第二個運算對象 "1"
的時候,然后又和最后的運算對象"2"
連接,產生了字符串 "112"
。
例5: "A" - "B" + "2"
輸出: "NaN2"
說明:由于運算符 -
不能被應用于字符串,并且 "A"
和 "B"
都不能轉換成數值,因此,"A" - "B"
的結果是 NaN
,然后再和字符串 "2"
連接,得到 "NaN2"
。
例6: "A" - "B" + 2
輸出: NaN
說明:參見前一個例子, "A" - "B"
結果為 NaN
。但是,應用任何運算符到NaN與其他任何的數字運算對象,結果仍然是 NaN
。
var list = readHugeList(); var nextListItem = function() { var item = list.pop(); if (item) { // process the list item... nextListItem(); } };
潛在的堆棧溢出可以通過修改nextListItem
函數避免:
var list = readHugeList(); var nextListItem = function() { var item = list.pop(); if (item) { // process the list item... setTimeout( nextListItem, 0); } };
堆棧溢出之所以會被消除,是因為事件循環操縱了遞歸,而不是調用堆棧。當 nextListItem
運行時,如果 item
不為空,timeout函數(nextListItem
)就會被推到事件隊列,該函數退出,因此就清空調用堆棧。當事件隊列運行其timeout事件,且進行到下一個 item
時,定時器被設置為再次調用 nextListItem
。因此,該方法從頭到尾都沒有直接的遞歸調用,所以無論迭代次數的多少,調用堆棧保持清空的狀態。
以上就是本文為大家分享的JavaScript面試題,希望對求職的小伙伴們有所幫助。