25 個 JavaScript 面試題
1、使用 typeof bar === "object" 判斷 bar 是不是一個物件有神馬潛在的弊端?如何避免這種弊端?
使用 typeof 的弊端是顯而易見的(這種弊端同使用 instanceof ):
let obj = {};
let arr = [];
console.log(typeof obj === 'object'); //true
console.log(typeof arr === 'object'); //true
console.log(typeof null === 'object'); //true
從上面的輸出結果可知, typeof bar === "object" 並不能準確判斷 bar 就是一個 Object。可以通過 Object.prototype.toString.call(bar) === "[object Object]" 來避免這種弊端:
let obj = {};
let arr = [];
console.log(Object.prototype.toString.call(obj)); //[object Object]
console.log(Object.prototype.toString.call(arr)); //[object Array]
console.log(Object.prototype.toString.call(null)); //[object Null]
另外,為了珍愛生命,請遠離 == :
而 [] === false 是返回 false 的。
2、下面的程式碼會在 console 輸出神馬?為什麼?
(function(){
var a = b = 3;
})();
console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));
這跟變數作用域有關,輸出換成下面的:
console.log(b); //3 console,log(typeof a); //undefined
拆解一下自執行函式中的變數賦值:
b = 3; var a = b;
所以 b 成了全域性變數,而 a 是自執行函式的一個區域性變數。
3、下面的程式碼會在 console 輸出神馬?為什麼?
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();
第一個和第二個的輸出不難判斷,在 ES6 之前,JavaScript 只有函式作用域,所以 func 中的 IIFE 有自己的獨立作用域,並且它能訪問到外部作用域中的 self ,所以第三個輸出會報錯,因為 this 在可訪問到的作用域內是 undefined ,第四個輸出是 bar 。如果你知道閉包,也很容易解決的:
(function(test) {
console.log("inner func: this.foo = " + test.foo); //'bar'
console.log("inner func: self.foo = " + self.foo);
}(self));
如果對閉包不熟悉,可以戳此:從作用域鏈談閉包
4、將 JavaScript 程式碼包含在一個函式塊中有神馬意思呢?為什麼要這麼做?
換句話說,為什麼要用立即執行函式表示式(Immediately-Invoked Function Expression)。
IIFE 有兩個比較經典的使用場景,一是類似於在迴圈中定時輸出資料項,二是類似於 JQuery/Node 的外掛和模組開發。
for(var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
上面的輸出並不是你以為的0,1,2,3,4,而輸出的全部是5,這時 IIFE 就能有用了:
for(var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, 1000);
})(i)
}
而在 JQuery/Node 的外掛和模組開發中,為避免變數汙染,也是一個大大的 IIFE:
(function($) { //程式碼 } )(jQuery);
5、在嚴格模式('use strict')下進行 JavaScript 開發有神馬好處?
- 消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;
- 消除程式碼執行的一些不安全之處,保證程式碼執行的安全;
- 提高編譯器效率,增加執行速度;
- 為未來新版本的Javascript做好鋪墊。
6、下面兩個函式的返回值是一樣的嗎?為什麼?
function foo1()
{
return {
bar: "hello"
};
}
function foo2()
{
return
{
bar: "hello"
};
}
在程式語言中,基本都是使用分號(;)將語句分隔開,這可以增加程式碼的可讀性和整潔性。而在JS中,如若語句各佔獨立一行,通常可以省略語句間的分號(;),JS 解析器會根據能否正常編譯來決定是否自動填充分號:
var test = 1 + 2 console.log(test); //3
在上述情況下,為了正確解析程式碼,就不會自動填充分號了,但是對於 return 、 break 、 continue 等語句,如果後面緊跟換行,解析器一定會自動在後面填充分號(;),所以上面的第二個函式就變成了這樣:
function foo2() { return; { bar: "hello" }; }
所以第二個函式是返回 undefined 。
7、神馬是 NaN,它的型別是神馬?怎麼測試一個值是否等於 NaN?
NaN 是 Not a Number 的縮寫,JavaScript 的一種特殊數值,其型別是 Number,可以通過 isNaN(param) 來判斷一個值是否是 NaN :
console.log(isNaN(NaN)); //true
console.log(isNaN(23)); //false
console.log(isNaN('ds')); //true
console.log(isNaN('32131sdasd')); //true
console.log(NaN === NaN); //false
console.log(NaN === undefined); //false
console.log(undefined === undefined); //false
console.log(typeof NaN); //number
console.log(Object.prototype.toString.call(NaN)); //[object Number]
ES6 中, isNaN() 成為了 Number 的靜態方法: Number.isNaN() .
8、解釋一下下面程式碼的輸出
console.log(0.1 + 0.2); //0.30000000000000004
console.log(0.1 + 0.2 == 0.3); //false
JavaScript 中的 number 型別就是浮點型,JavaScript 中的浮點數採用IEEE-754 格式的規定,這是一種二進位制表示法,可以精確地表示分數,比如1/2,1/8,1/1024,每個浮點數佔64位。但是,二進位制浮點數表示法並不能精確的表示類似0.1這樣 的簡單的數字,會有舍入誤差。
由於採用二進位制,JavaScript 也不能有限表示 1/10、1/2 等這樣的分數。在二進位制中,1/10(0.1)被表示為 0.00110011001100110011…… 注意 0011 是無限重複的,這是舍入誤差造成的,所以對於 0.1 + 0.2 這樣的運算,運算元會先被轉成二進位制,然後再計算:
0.1 => 0.0001 1001 1001 1001…(無限迴圈)
0.2 => 0.0011 0011 0011 0011…(無限迴圈)
雙精度浮點數的小數部分最多支援 52 位,所以兩者相加之後得到這麼一串 0.0100110011001100110011001100110011001100…因浮點數小數位的限制而截斷的二進位制數字,這時候,再把它轉換為十進位制,就成了 0.30000000000000004。
對於保證浮點數計算的正確性,有兩種常見方式。
一是先升冪再降冪:
function add(num1, num2){
let r1, r2, m;
r1 = (''+num1).split('.')[1].length;
r2 = (''+num2).split('.')[1].length;
m = Math.pow(10,Math.max(r1,r2));
return (num1 * m + num2 * m) / m;
}
console.log(add(0.1,0.2)); //0.3
console.log(add(0.15,0.2256)); //0.3756
二是是使用內建的 toPrecision() 和 toFixed() 方法, 注意,方法的返回值字串。
function add(x, y) {
return x.toPrecision() + y.toPrecision()
}
console.log(add(0.1,0.2)); //"0.10.2"
9、實現函式 isInteger(x) 來判斷 x 是否是整數
可以將 x 轉換成10進位制,判斷和本身是不是相等即可:
function isInteger(x) { return parseInt(x, 10) === x; }
ES6 對數值進行了擴充套件,提供了靜態方法 isInteger() 來判斷引數是否是整數:
Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false
JavaScript能夠準確表示的整數範圍在 -2^53 到 2^53 之間(不含兩個端點),超過這個範圍,無法精確表示這個值。ES6 引入了 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 這兩個常量,用來表示這個範圍的上下限,並提供了 Number.isSafeInteger() 來判斷整數是否是安全型整數。
10、在下面的程式碼中,數字 1-4 會以什麼順序輸出?為什麼會這樣輸出?
(function() {
console.log(1);
setTimeout(function(){console.log(2)}, 1000);
setTimeout(function(){console.log(3)}, 0);
console.log(4);
})();
這個就不多解釋了,主要是 JavaScript 的定時機制和時間迴圈,不要忘了,JavaScript 是單執行緒的。詳解可以參考 從setTimeout談JavaScript執行機制 。
11、寫一個少於 80 字元的函式,判斷一個字串是不是迴文字串
function isPalindrome(str) {
str = str.replace(/\W/g, '').toLowerCase();
return (str == str.split('').reverse().join(''));
}
這個題我在 codewars 上碰到過,並收錄了一些不錯的解決方式,可以戳這裡: Palindrome For Your Dome
12、寫一個按照下面方式呼叫都能正常工作的 sum 方法
console.log(sum(2,3)); // Outputs 5
console.log(sum(2)(3)); // Outputs 5
針對這個題,可以判斷引數個數來實現:
function sum() {
var fir = arguments[0];
if(arguments.length === 2) {
return arguments[0] + arguments[1]
} else {
return function(sec) {
return fir + sec;
}
}
}
13、根據下面的程式碼片段回答後面的問題
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);
}
1、點選 Button 4 ,會在控制檯輸出什麼?
2、給出一種符合預期的實現方式
1、點選5個按鈕中的任意一個,都是輸出5
2、參考 IIFE。
14、下面的程式碼會輸出什麼?為什麼?
var arr1 = "john".split(''); j o h n
var arr2 = arr1.reverse(); n h o j
var arr3 = "jones".split(''); j o n e s
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));
會輸出什麼呢?你執行下就知道了,可能會在你的意料之外。
MDN 上對於 reverse() 的描述是醬紫的:
Description
The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.
reverse() 會改變陣列本身,並返回原陣列的引用。
slice 的用法請參考: slice
15、下面的程式碼會輸出什麼?為什麼?
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);
輸出什麼,自己去執行吧,需要注意三個點:
- 多個數字和數字字串混合運算時,跟運算元的位置有關
console.log(2 + 1 + '3'); / /‘33’
console.log('3' + 2 + 1); //'321'
- 數字字串之前存在數字中的正負號(+/-)時,會被轉換成數字
console.log(typeof '3'); // string
console.log(typeof +'3'); //number
同樣,可以在數字前新增 '' ,將數字轉為字串
console.log(typeof 3); // number
console.log(typeof (''+3)); //string
- 對於運算結果不能轉換成數字的,將返回 NaN
console.log('a' * 'sd'); //NaN
console.log('A' - 'B'); // NaN
這張圖是運算轉換的規則
16、如果 list 很大,下面的這段遞迴程式碼會造成堆疊溢位。如果在不改變遞迴模式的前提下修善這段程式碼?
var list = readHugeList();
var nextListItem = function() {
var item = list.pop();
if (item) {
// process the list item...
nextListItem();
}
};
原文上的解決方式是加個定時器:
var list = readHugeList();
var nextListItem = function() {
var item = list.pop();
if (item) {
// process the list item...
setTimeout( nextListItem, 0);
}
};
解決方式的原理請參考第10題。
17、什麼是閉包?舉例說明
可以參考此篇:從作用域鏈談閉包
18、下面的程式碼會輸出什麼?為啥?
for (var i = 0; i < 5; i++) {
setTimeout(function() { console.log(i); }, i * 1000 );
}
請往前面翻,參考第4題,解決方式已經在上面了
19、解釋下列程式碼的輸出
console.log("0 || 1 = "+(0 || 1));
console.log("1 || 2 = "+(1 || 2));
console.log("0 && 1 = "+(0 && 1));
console.log("1 && 2 = "+(1 && 2));
邏輯與和邏輯或運算子會返回一個值,並且二者都是短路運算子:
- 邏輯與返回第一個是 false 的運算元 或者 最後一個是 true 的運算元
console.log(1 && 2 && 0); //0
console.log(1 && 0 && 1); //0
console.log(1 && 2 && 3); //3
如果某個運算元為 false ,則該運算元之後的運算元都不會被計算
- 邏輯或返回第一個是 true 的運算元 或者 最後一個是 false 的運算元
console.log(1 || 2 || 0); //1
console.log(0 || 2 || 1); //2
console.log(0 || 0 || false); //false
如果某個運算元為 true ,則該運算元之後的運算元都不會被計算
如果邏輯與和邏輯或作混合運算,則邏輯與的優先順序高:
console.log(1 && 2 || 0); //2
console.log(0 || 2 && 1); //1
console.log(0 && 2 || 1); //1
在 JavaScript,常見的 false 值:
0, '0', +0, -0, false, '',null,undefined,null,NaN
要注意 空陣列([]) 和 空物件({}):
console.log([] == false) //true
console.log({} == false) //false
console.log(Boolean([])) //true
console.log(Boolean({})) //true
所以在 if 中, [] 和 {} 都表現為 true :
20、解釋下面程式碼的輸出
console.log(false == '0') console.log(false === '0')
請參考前面第14題運算子轉換規則的圖。
21、解釋下面程式碼的輸出
var a={},
b={key:'b'},
c={key:'c'};
a[b]=123;
a[c]=456;
console.log(a[b]);
輸出是 456,參考原文的解釋:
The reason for this is as follows: When setting an object property, JavaScript will implicitly stringify the parameter value. In this case, since b and c are both objects, they will both be
converted to [object Object]
. As a result, a[b] anda[c] are both equivalent to a[ [object Object]
] and can be used interchangeably. Therefore, setting or referencing a[c] is precisely the same as setting or referencing a[b].
22、解釋下面程式碼的輸出
console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(10));
結果是10的階乘。這是一個遞迴呼叫,為了簡化,我初始化 n=5,則呼叫鏈和返回鏈如下:
23、解釋下面程式碼的輸出
(function(x) {
return (function(y) {
console.log(x);
})(2)
})(1);
輸出1,閉包能夠訪問外部作用域的變數或引數。
24、解釋下面程式碼的輸出,並修復存在的問題
var hero = {
_name: 'John Doe',
getSecretIdentity: function (){
return this._name;
}
};
var stoleSecretIdentity = hero.getSecretIdentity;
console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());
將 getSecretIdentity 賦給 stoleSecretIdentity ,等價於定義了 stoleSecretIdentity 函式:
var stoleSecretIdentity = function (){
return this._name;
}
stoleSecretIdentity 的上下文是全域性環境,所以第一個輸出 undefined 。若要輸出 John Doe ,則要通過 call 、 apply 和 bind 等方式改變 stoleSecretIdentity 的 this 指向(hero)。
第二個是呼叫物件的方法,輸出 John Doe 。
25、給你一個 DOM 元素,建立一個能訪問該元素所有子元素的函式,並且要將每個子元素傳遞給指定的回撥函式。
函式接受兩個引數:
- DOM
- 指定的回撥函式
原文利用 深度優先搜尋 (Depth-First-Search) 給了一個實現:
function Traverse(p_element,p_callback) {
p_callback(p_element);
var list = p_element.children;
for (var i = 0; i < list.length; i++) {
Traverse(list[i],p_callback); // recursive call
}
}
相關推薦
25 個 JavaScript 面試題
1、使用 typeof bar === "object" 判斷 bar 是不是一個物件有神馬潛在的弊端?如何避免這種弊端? 使用 typeof 的弊端是顯而易見的(這種弊端同使用 instanceof ): let obj = {}; let arr = []; co
[java學習6]你有必要知道的25個JavaScript面試題
/**轉:你有必要知道的25個JavaScript面試題 *原文:http://www.jb51.net/article/77140.htm *看到這個文章,覺得js還有很多東西要弄明白。我把目前能接受的執行一下,這裡做個記錄吧。 **/ /**型別判斷 * 看來O
2018年,最經典的26個JavaScript面試題和答案!
根據 Stack Overflow 的 2018 年度調查,JavaScript 連續六年成為最常用的程式語言。所以我們必須面對這樣的現實,JavaScript 已經成為全棧開發技能的基石,在全棧開發面試中都會不可避免地涉及到與 JavaScript 有關的問題。FullStack.Cafe 彙編了
25個Spring面試題
本人收集了一些在大家在面試時被經常問及的關於Spring的主要問題,這些問題有可能在你下次面試時就會被問到。對於本文中未提及的Spring其他模組,我會單獨分享面試的問題和答案。 歡迎大家向我推薦你在面試過程中遇到關於Spring的問題。我會把大家推薦的問題
五個典型的 JavaScript 面試題
一個 data- 本地變量 結果 sco ref 有用 打印 存在 問題1: 範圍(Scope) 思考以下代碼: (function() { var a = b = 5; })(); console.log(b); 控制臺(console)會打印出什
14 個折磨人的 JavaScript 面試題
前端工程師有時候面試時會遇到一類面試官,他們問的問題對於語言本身非常較真兒,往往不是候選人可能期
三個簡單的H5/Egret/JavaScript面試題
以下使用Egret程式碼(TypeScript) 1 /** * k的輸出值是多少 * */ private question1(): void {
【轉】典型的JavaScript面試題
() cee not spa tro cnblogs and enc 分配 問題1: 作用域(Scope) 1 (function() { 2 "use strict"; 3 var a = b = 5; 4 })(); 5 console.log(b); 控
分享幾道經典的javascript面試題
cti function 一點 經典的 bsp log 分享 輸出 for 這幾道題目還是有一點意思的,大家可以研究一番,對自己的技能提升絕對有幫助。 1、調用過程中輸出的內容是什麽 function fun(n, o) { console.log(o);
10道典型的JavaScript面試題
開發 var int {} 還要 創建 pts 解決 mode 問題1: 作用域(Scope) 考慮以下代碼: (function() { var a = b = 5; })(); console.log(b); 上述代碼會打印出5。這個問題的陷阱就是
這道javascript 面試題 你必須會
fun prot 試題 concat 作用 val function 運算 return 實現一個函數,運算結果可以滿足如下預期結果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 話不多說
2017年最全的30個Android面試題,你將如何回答?
fab reat 屬於 微信公眾號 ber 什麽是 進入 細節 註意 百度首頁 登錄 2017年最全的30個Android面試題,你將如何回答? 機翼技術 百家號 03-10 02:32 “三金四銀”又是一年一度的跳槽季,相信有不少An
java Html&JavaScript面試題:HTML 的 form 提交之前如何驗證數值文本框的內容全部為數字? 否則的話提示用戶並終止提交?
打開 mit nbsp alert his span value gpo 成功 提交的驗證方法(通過單個字符比較): <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
JavaScript面試題
return nbsp ava 實現 效果 面試題 不存在 其他 javascrip ** js裏面是否存在重載?(面試題目) (1)js裏面不存在重載。 (2)但是可以通過其他方式模擬重載的效果 (通過aruguments數組來實現) 1
一線互聯網常見的 14 個 Java 面試題,你顫抖了嗎程序員
don 讀取 需要 內存模型 對象 str 資源 阻塞 問題 跳槽不算頻繁,但參加過不少面試(電話面試、face to face 面試),面過大 / 小公司、互聯網 / 傳統軟件公司,面糊過(眼高手低,缺乏實戰經驗,掛掉),也面過人,所幸未因失敗而氣餒,在此過程中不斷查缺補
javascript--面試題
它的 fun 是否 構造 清空 lis 使用 設置 ring (1)javaScript怎麽清空數組? 如 var arrayList = [‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘]; 怎麽清空 arrayList 方法1:直接改變arrayList所指向的對
一線網際網路常見的14個Java面試題,你顫抖了嗎程式設計師
跳槽不算頻繁,但參加過不少面試(電話面試、face to face面試),面過大/小公司、網際網路/傳統軟體公司,麵糊過(眼高手低,缺乏實戰經驗,掛掉),也面過人,所幸未因失敗而氣餒,在此過程中不斷查缺補漏,養成了踏實、追本溯源、持續改進的習慣,特此將自己經歷過、構思過的一些面試題記錄下來,如果答案有問題
最值得關注學習的25個JavaScript開源專案
No.1 Prettier:一款幫你解決程式碼風格問題的程式碼格式化工具,功能強大,簡單易用,支援多語言,減少配置項。[GitHub上26755個star] 專案地址: github.com/prettier/pr… No.2 Parcel:執行極快的零配置web應用打包工具。[Gi
基礎 | 36個經典面試題,來測一測您的Java基礎
到此為止,「Java基礎」系列的面試點已更新完畢,但關於Java NIO和Java8新特性之Lambda表示式部分的內容還停留在概述階段,不夠系統和深入,後續有機會再深入學習和更新。 在此,主要將Java基礎系列以面試題的形式進行彙總,用做面試前的準備與自測提綱。 公眾號後
javascript面試題 - 關於setTimeout非同步的案例
var t = true; window.setTimeout(function (){ t = false; },1000); while (t){} alert('end'); 結果:死迴圈 解釋:js是單執行緒的,while和alert都是同步程式碼,所以會先執行whil