前端面試題總結(一)

總結一些，感謝各位大神貼出來的面試題。我就是總結一下。前端的面試題，我那種小菜鳥，也是一次複習的機會吧。最近看了不少移動端開發的東西，過一段時間也要整理一下。仍是要多敲代碼呀。

1.JavaScript是一門什麼樣的語言，它有哪些特色？

　　w3c的答案仍是不錯的：

　　JavaScript 是屬於網絡的腳本語言！

　　JavaScript 被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、建立cookies，以及更多的應用。

　　JavaScript 是因特網上最流行的腳本語言。

　　JavaScript 很容易使用！你必定會喜歡它的

2.JavaScript的數據類型都有什麼？

 那是很基礎：js六大數據類型：number、string、object、Boolean、null、undefined

3.如何判斷JavaScript數據類型？

   一使用typeof 

var a="string"; //string
var a=1;  //number
var a=false; //boolean
var a; console.log(typeof a); //undfined
var a = null; console.log(typeof a); //object
var a = document; console.log(typeof a); //object
var a = []; console.log(a); //object
var a = function(){}; console.log(typeof a) //function   除了能夠判斷數據類型還能夠判斷function類型

null、對象、數組返回的都是object類型，那接下來看一看如何判斷object類型

js判斷數組類型的方法

1、instanceof

instance，故名思義，實例，例子，因此instanceof 用於判斷一個變量是否某個對象的實例，是一個三目運算式---和typeof最實質上的區別

a instanceof b?alert("true"):alert("false")  //注意b值是你想要判斷的那種數據類型，不是一個字符串，好比Array

var a=[];
console.log(a instanceof Array) //返回true 

2、constructor

constructor 構造器 屬性返回對建立此對象的數組函數的引用

就是返回對象相對應的構造函數。

function employee(name,job,born){
    this.name=name;
    this.job=job;
    this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);
console.log(bill.constructor); //輸出function employee(name, jobtitle, born){this.name = name; this.jobtitle = job; this.born = born;}

判斷類型的方法是:返回都是 true 

console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);

比較好的寫法是：

function isArray(object){
    return object && typeof object==='object' &&
            Array == object.constructor;
}

四、已知ID的Input輸入框，但願獲取這個輸入框的輸入值，怎麼作？(不使用第三方框架)

　　document.getElementById('id').value();

5.但願獲取到頁面中全部的checkbox怎麼作？(不使用第三方框架)

var list = document.getElementByTagName('input');
var checkBoxList = []; 
var len = domList.length;
while (len--)
 {　　//使用while的效率會比for循環更高  
     　if (domList[len].type == ‘checkbox') {  
  　　checkBoxList.push(list[len]);  
　}  

6.設置一個已知ID的DIV的html內容爲xxxx，字體顏色設置爲黑色(不使用第三方框架)

var dom = document.getElementById("ID」);  
dom.innerHTML = "xxxx」  
dom.style.color = "#000」  

7.當一個DOM節點被點擊時候，咱們但願可以執行一個函數，應該怎麼作？

• 直接在DOM裏綁定事件：<div onclick=」test()」></div>
• 在JS裏經過onclick綁定：xxx.onclick = test
• 經過事件添加進行綁定：addEventListener(xxx, ‘click', test)

8.Javascript的事件流模型都有什麼？

•"事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播
•"事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的
•"DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡

9.什麼事冒泡事件，應該怎麼阻止？

在一個對象上觸發某類事件（好比單擊onclick事件），若是此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，若是沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象全部同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

• 在W3c中，使用stopPropagation（）方法
• 在IE下設置cancelBubble = true；
在捕獲的過程當中stopPropagation（）；後，後面的冒泡過程也不會發生了~
3.阻止事件的默認行爲，例如click <a>後的跳轉~
• 在W3c中，使用preventDefault（）方法；
• 在IE下設置window.event.returnValue = false;

8.什麼是Ajax和JSON，它們的優缺點。Ajax的js實現原理

實現原理：

Ajax是異步JavaScript和XML，用於在Web頁面中實現異步數據交互。

優勢：
•可使得頁面不重載所有內容的狀況下加載局部內容，下降數據傳輸量
•避免用戶不斷刷新或者跳轉頁面，提升用戶體驗
缺點：
•對搜索引擎不友好（
•要實現ajax下的先後退功能成本較大
•可能形成請求數的增長
•跨域問題限制
JSON是一種輕量級的數據交換格式，ECMA的一個子集
優勢：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支持複合數據類型（數組、對象、字符串、數字）

9.看下列代碼輸出爲什麼？解釋緣由

var a;  
alert(typeof a); // undefined  
alert(b); // 報錯

參考js解析過程的隨筆：在js預處理時，會創建一個詞法做用域，a 是var聲明變量，全部給了個undefined。而比不是聲明的，因此沒有定義，全部保錯.

10.看下列代碼,輸出什麼？解釋緣由

 

  

var a = null;  
alert(typeof a); //object

 

null是一個只有一個值的數據類型，這個值就是null。表示一個空指針對象，因此用typeof檢測會返回」object」。

11.看下面的代碼，輸出什麼，foo的類型爲何？

var foo = "11"+2-"1";  
console.log(foo);  
console.log(typeof foo);  
執行完後foo的值爲111，foo的類型爲Number。

var foo = "11"+2+"1"; //體會加一個字符串'1' 和 減去一個字符串'1'的不一樣  
console.log(foo);  
console.log(typeof foo);　　執行完後foo的值爲1121(此處是字符串拼接)，foo的類型爲String。  

12.看代碼給答案。

var a = new Object();        
a.value = 1;        
b = a;  
b.value = 2;  
alert(a.value);　　  
答案：2（考察引用數據類型細節）