3-js面試題（前端面試題帶答案）
JavaScript常見面試題目
1：javascript的typeof返回哪些資料型別?
Object number functionboolean underfind
------------------------------------------------------------------------------
2：如何判斷某變數是否為陣列資料型別？
· 方法一.判斷其是否具有“陣列性質”，如slice()方法。可自己給該變數定義slice方法，故有時會失效
· 方法二.obj instanceof Array 在某些IE版本中不正確
·
if(typeofArray.isArray==="undefined")
{
Array.isArray = function(arg){
returnObject.prototype.toString.call(arg)==="[object Array]"
};
}
------------------------------------------------------------------------------
3.例舉3種強制型別轉換和2種隱式型別轉換？
強制（parseInt,parseFloat,number）隱式（== – ===）
------------------------------------------------------------------------------
4.split()join() 的區別?
前者是切割成陣列的形式，後者是將陣列轉換成字串
------------------------------------------------------------------------------
5.陣列方法pop() push() unshift() shift()
Push()尾部新增 pop()
Unshift()頭部新增 shift()頭部刪除
------------------------------------------------------------------------------
6：當一個DOM節點被點選時候，我們希望能夠執行一個函式，應該怎麼做？
· 直接在DOM裡繫結事件：<div onclick=”test()”></div>
· 在JS裡通過onclick繫結：xxx.onclick = test
· 通過事件新增進行繫結：addEventListener(xxx, ‘click’, test)
------------------------------------------------------------------------------
7：Javascript的事件流模型都有什麼？
· 事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播
· “事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的
· “DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡
------------------------------------------------------------------------------
8.IE和DOM事件流的區別?
1.執行順序不一樣、
2.引數不一樣
3.事件加不加on
4.this指向問題
------------------------------------------------------------------------------
9.IE和標準下有哪些相容性的寫法?
Var ev = ev || window.event
document.documentElement.clientWidth ||document.body.clientWidth
Var target = ev.srcElement||ev.target
------------------------------------------------------------------------------
10.ajax請求的時候get 和post方式的區別?
一個在url後面一個放在虛擬載體裡面有大小限制安全問題應用不同一個是論壇等只需要請求的，一個是類似修改密碼的
------------------------------------------------------------------------------
11.call和apply的區別?
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
------------------------------------------------------------------------------
12.ajax請求時，如何解釋json資料?
使用eval parse 鑑於安全性考慮使用parse更靠譜
------------------------------------------------------------------------------
13：Ajax同步和非同步的區別，如何解決跨域問題?
同步：提交請求->等待伺服器處理->處理完畢返回這個期間客戶端瀏覽器不能幹任何事非同步: 請求通過事件觸發->伺服器處理（這是瀏覽器仍然可以作其他事情）->處理完畢
------------------------------------------------------------------------------
14.寫一個獲取非行間樣式的函式?
functiongetStyle(obj,attr){ //獲取非行間樣式，obj是物件，attr是值
if(obj.currentStyle){ //針對ie獲取非行間樣式
returnobj.currentStyle[attr];
}else{
returngetComputedStyle(obj,false)[attr]; //針對非ie
};
};
------------------------------------------------------------------------------
15.事件委託是什麼?
利用冒泡的原理，把事件加到父級上，觸發執行效果。
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。
------------------------------------------------------------------------------
16.閉包是什麼，有什麼特性，對頁面有什麼影響?
閉包就是能夠讀取其他函式內部變數的函式。
------------------------------------------------------------------------------
17.如何阻止事件冒泡和預設事件?
冒泡：if ( e &&e.stopPropagation ) {
// 因此它支援W3C的stopPropagation()方法
e.stopPropagation();
} else{
// 否則，我們需要使用IE的方式來取消事件冒泡
window.event.cancelBubble = true;
}
預設事件：if ( e && e.preventDefault ) {
e.preventDefault();
} else {
// IE中阻止函式器預設動作的方式
window.event.returnValue =false;
}
return false;
------------------------------------------------------------------------------
18. 新增、移除、移動、複製、建立和查詢節點的方法?
1）建立新節點
createDocumentFragment() //建立一個DOM片段 createElement() //建立一個具體的元素 createTextNode() //建立一個文字節點
2）新增、移除、替換、插入 appendChild() //新增 removeChild() //移除 replaceChild() //替換 insertBefore() //插入
3）查詢 getElementsByTagName() //通過標籤名稱 getElementsByName() //通過元素的Name屬性的值 getElementById() //通過元素Id，唯一性
------------------------------------------------------------------------------
19.解釋jsonp的原理，以及為什麼不是真正的ajax?
利用在頁面中建立<script>節點的方法向不同域提交HTTP請求的方法稱為JSONP，這項技術可以解決跨域提交Ajax請求的問題。JSONP的工作原理如下所述：假設在http://example1.com/index.php這個頁面中向http://example2.com/getinfo.php提交GET請求，我們可以將下面的JavaScript程式碼放在http://example1.com/index.php這個頁面中來實現：
var eleScript= document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = "http://example2.com/getinfo.php";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
當GET請求從http://example2.com/getinfo.php返回時，可以返回一段JavaScript程式碼，這段程式碼會自動執行，可以用來負責呼叫http://example1.com/index.php頁面中的一個callback函式。
JSONP的最基本的原理是：動態新增一個<script>標籤，而script標籤的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協議無關了。
------------------------------------------------------------------------------
20.javascript的本地物件，內建物件和宿主物件?
|
|
|
3.自定義物件
顧名思義，就是開發人員自己定義的物件。JS允許使用自定義物件，使JS應用及功能得到擴充
------------------------------------------------------------------------------
21.document load 和document ready的區別?
$(document).load();
當web頁面以及其附帶的資原始檔，如CSS，Scripts，圖片等，載入完畢後執行此方法。常用於檢測頁面（及其附帶資源）是否載入完畢。
$(document).ready();當頁面DOM物件載入完畢，web瀏覽器能夠執行JS時，此方法即被觸發。如果你想盡快執行JS，可以使用此方法。[在html的頭部的script標籤中的，不處於ready()中的JS程式碼將早於ready()執行]
------------------------------------------------------------------------------
22.”==”和“===”的不同?
==:一個是判斷值是否相等
===:,一個是判斷值及型別是否完全相等
------------------------------------------------------------------------------
23.javascript的同源策略?
同源策略簡單的說就是一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，這裡的同一來源指的是主機名、協議和埠號的組合；
------------------------------------------------------------------------------
24.編寫一個數組去重的方法?
第一種：1.構建一個新的陣列存放結果
2.for迴圈中每次從原陣列中取出一個元素，用這個元素迴圈與結果陣列對比
3.若結果陣列中沒有該元素，則存到結果陣列中
第二種：1.先將原陣列進行排序
2.檢查原陣列中的第i個元素與結果陣列中的最後一個元素是否相同，因為已經排序，所以重複元素會在相鄰位置
3.如果不相同，則將該元素存入結果陣列中
第三種：（推薦使用）
1.建立一個新的陣列存放結果
2.建立一個空物件
3.for迴圈時，每次取出一個元素與物件進行對比，如果這個元素不重複，則把它存放到結果陣列中，同時把這個元素的內容作為物件的一個屬性，並賦值為1，存入到第2步建立的物件中。
------------------------------------------------------------------------------
26.排序演算法?
Sort排序
systemSort: function(array) {
return array.sort(function(a, b) {
return a - b;
});
},
氣泡排序：最簡單，也最慢，貌似長度小於7最優
bubbleSort: function(array) {
var i = 0,
len = array.length,
j, d;
for (; i < len; i++) {
for (j = 0; j < len; j++) {
if (array[i] < array[j]) {
d = array[j];
array[j] = array[i];
array[i] = d;
}
}
}
return array;
},
插入排序：比冒泡快，比快速排序和希爾排序慢，較小資料有優勢
快速排序：這是一個非常快的排序方式，V8的sort方法就使用快速排序和插入排序的結合
希爾排序：在非chrome下陣列長度小於1000，希爾排序比快速更快
系統方法：在forfox下系統的這個方法非常快
------------------------------------------------------------------------------
27：希望獲取到頁面中所有的checkbox怎麼做？(不使用第三方框架) ?
------------------------------------------------------------------------------
28：什麼是Ajax和JSON，它們的優缺點?
1、Ajax是一種非同步提交資料的方法。
通常在html中，要想重新獲取頁面的資料。更新某一個地方的資料時。就必須得重新整理整個頁面，才能重新重新整理資料。那麼問題來了，當我們僅僅只需要更新某一個小地方的資料時。我們也來重新整理整個頁面的話，就顯得有點麻煩了，於是Ajax就幫我們完成了這個功能，讓我們單獨開闢一條道路來進行獲取資料，然後頁面不需要重新整理，用JS把AJAX請求的資料顯示到該顯示的地方。AJAX叫 無重新整理獲取技術
優點：無數新更新資料、非同步與伺服器通訊、前端和後端負載平衡、基於標準被廣泛支援、介面與應用分離
缺點：安全問題、對搜尋引擎支援較弱、破壞程式的異常處理機制、違背URL和資源定位的初衷、.AJAX不能很好支援移動裝置、客戶端過肥，太多客戶端程式碼造成開發上的成本
2、json 是一種資料的載體，可以把他想象成陣列一樣的東西，只不過，它有點牛，就是很多格式都可以自動支援。就差不多這樣了。
優點：
•作為一種資料傳輸格式，JSON 與 XML 很相似，但是它更加靈巧。
•JSON不需要從伺服器端傳送含有特定內容型別的首部資訊。
缺點：
•語法過於嚴謹•程式碼不易讀•eval 函式存在風險
------------------------------------------------------------------------------
29：有這樣一個URL：
http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，
請寫一段JS程式提取URL中的各個GET引數(引數名和 引數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′ , c:”, d:’xxx’,e:undefined}?
------------------------------------------------------------------------------
30：正則表示式建構函式var reg=new RegExp(“xxx”)與正則表達字面量varreg=//有什麼不同？匹配郵箱的正則表示式？
------------------------------------------------------------------------------
31：.Javascript中callee和caller的作用？
Callee：返回正被執行的 Function 物件，也就是所指定的 Function 物件的正文。
[function.]arguments.callee
可選項 function
引數是當前正在執行的 Function
物件的名稱。
說明： callee 屬性的初始值就是正被執行的 Function 物件。
callee 屬性是 arguments 物件的一個成員，它表示對函式物件本身的引用，這有利於匿名函式的遞迴或者保證函式的封裝性，例如下邊示例的遞迴計算1到n的自然數之和。而該屬性僅當相關函式正在執行時才可用。還有需要注意的是callee擁有length屬性，這個屬性有時候用於驗證還是比較好的。arguments.length是實參長度，arguments.callee.length是形參長度，由此可以判斷呼叫時形參長度是否和實參長度一致。
Caller：返回一個對函式的引用，該函式呼叫了當前函式。
functionName.caller
functionName 物件是所執行函式的名稱。說明對於函式來說，caller
屬性只有在函式執行時才有定義。如果函式是由頂層呼叫的，那麼 caller
包含的就是 null
。如果在字串上下文中使用 caller
屬性，那麼結果和functionName.toString
一樣，也就是說，顯示的是函式
的反編譯文字。
------------------------------------------------------------------------------
32： 下面這個ul，如何點選每一列的時候alert其index?（閉包）？
<ulid=”test”>
<li>這是第一條</li>
<li>這是第二條</li>
<li>這是第三條</li>
</ul>
33： 給String物件新增一個方法，傳入一個string型別的引數，然後將string的每個字元間價格空格返回，例如：
addSpace(“helloworld”) // -> ‘h e l l o w o r l d’
------------------------------------------------------------------------------
34：函式宣告與函式表示式的區別？
對於函式宣告，js解析器會優先讀取，確保在所有程式碼執行之前宣告已經被解析，而函式表示式，如同定義其它基本型別的變數一樣，只在執行到某一句時也會對其進行解析，所以在實際中，它們還是會有差異的，具體表現在，當使用函式宣告的形式來定義函式時，可將呼叫語句寫在函式宣告之前，而後者，這樣做的話會報錯。
------------------------------------------------------------------------------
35：在Javascript中什麼是偽陣列？如何將偽陣列轉化為標準陣列？
能通過Array.prototype.slice轉換為真正的陣列的帶有length屬性的物件。
1，具有length屬性
2，按索引方式儲存資料
3，不具有陣列的push,pop等方法
在JavaScript 中，函式中的隱藏變數arguments 和用 getElementsByTagName 獲得的元素集合（NodeList）都不是真正的陣列，不能使用 push 等方法，在有這種需要的時候只能先轉換為真正的陣列。
對於arguments，可以使用 Array.prototype.slice.call(arguments); 來達到轉換的目的，但對於 NodeList 則不行了，其在 IE8 及以下將會報錯，只能說其 JS 引擎有所限制。
因此，如果需要把NodeList 轉換為真正的陣列，則需要做下相容處理。
function realArray(c) {
try {
return Array.prototype.slice.call(c);
}catch (e) {
var ret = [], i = 0, len = c.length;
for (; i < len; i++) {
ret[i] = (c[i]);
}
return ret;
}
}
------------------------------------------------------------------------------
36：想實現一個對頁面某個節點的拖曳？如何做？（使用原生JS）?
繫結點選事件，onmousedown/ontouchstart的時候記錄滑鼠點選的位置pageX、pageY，然後繫結移動事件onmousemove/ontouchmove，獲得此時的pageX、pageY，然後與初始位置相減，得到差值a,b，更改元素的transformX(a),transformY(b)，到此時就實現了移動，onmouseup/ontouchend之後獲得最終的位置，再進一步操作就行了
------------------------------------------------------------------------------
37：var numberArray = [3,6,2,4,1,5]; （考察基礎API）?
1)實現對該陣列的倒排，輸出[5,1,4,2,6,3]
2)實現對該陣列的降序排列，輸出[6,5,4,3,2,1]
1var numberArray = [3,6,2,4,1,5];
2
3 numberArray.reverse(); // 5,1,4,2,6,3
4
5 numberArray.sort(function(a,b){ //6,5,4,3,2,1
6return b-a;
7 })
------------------------------------------------------------------------------
38：.將字串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替換成10，{$name}替換成Tony （使用正則表示式）?
答案："<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g, ‘10‘).replace(/{\$name}/g, ‘Tony’);
------------------------------------------------------------------------------
39：foo = foo||bar ，這行程式碼是什麼意思？為什麼要這樣寫？
if(!foo) foo = bar; //如果foo存在，值不變，否則把bar的值賦給foo。
短路表示式：作為"&&"和"||"操作符的運算元表示式，這些表示式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值
------------------------------------------------------------------------------
40：為了保證頁面輸出安全，我們經常需要對一些特殊的字元進行轉義，請寫一個函式escapeHtml，將<, >, &, “進行轉義?
function escapeHtml(str) {
2return str.replace(/[<>”&]/g, function(match) {
3switch (match) {
4case “<”:
5return “<”;
6case “>”:
7return “>”;
8case “&”:
9return “&”;
10case “\””:
11return “"”;
12}
13});
14 }
------------------------------------------------------------------------------
41：寫一個function，清除字串前後的空格。（相容所有瀏覽器）?
使用自帶介面trim()，考慮相容性：
if (!String.prototype.trim) {
2String.prototype.trim = function() {
3returnthis.replace(/^\s+/, "").replace(/\s+$/,"");
4}
5}
6
7// test the function
8var str = " \t\n test string ".trim();
9 alert(str == "test string"); // alerts "true"
------------------------------------------------------------------------------
42：Javascript中callee和caller的作用？
caller是返回一個對函式的引用，該函式呼叫了當前函式；
callee是返回正在被執行的function函式，也就是所指定的function物件的正文。
------------------------------------------------------------------------------
43：談一談你對javascript的理解，javascript能做什麼?
javascript是主要用在web中的一種動態的解析型語言。 可以改變網頁裡的資料，根據使用者點選等操作告訴伺服器可以動態的改變網頁的大小。 JavaScript
是一種基於物件和事件驅動並具有相對安全性的客戶端指令碼語言,是一種輕量級的編 程語言。同時也是一種廣泛用於客戶端
Web開發的指令碼語言，常用來給
HTML網頁新增動 態功能，比如響應使用者的各種操作,可以將動態的文字放入 HTML 頁面, 可以對事件作出響應,可以 讀寫 HTML 元素, 可被用來驗證資料, 可被用來檢測訪問者的瀏覽器, 可被用來建立 cookies
------------------------------------------------------------------------------
44：在javascript中如何檢測客戶端的瀏覽器和作業系統型別?
varresolution = "解析度:" +window.screen.width + "*" + window.screen.height;, var ua =window.navigator.userAgent;
------------------------------------------------------------------------------
45：Cookie在客戶機上是如何儲存的?
Cookies就是伺服器暫存放在你的電腦裡的文字檔案，好讓伺服器用來辨認你的計算機。當你在瀏覽網站的時候，Web伺服器會先送一小小資料放在你的計算機上，Cookies 會幫你在網站上所打的文字或是一些選擇都記錄下來。當下次你再訪問同一個網站，Web伺服器會先看看有沒有它上次留下的Cookies資料，有的話，就會依據Cookie裡的內容來判斷使用者，送出特定的網頁內容給你。
------------------------------------------------------------------------------