javascript之面試題精講

時間 2019-11-12

標籤 javascript 面試欄目 JavaScript 简体版

原文原文鏈接

from：http://blog.csdn.net/q121516340/article/details/51332454

1，檢測數組的幾種方式：

Array.isArray(); es5javascript

toString.call([]);//」[object Array]」php

var arr=[];css

arr.constructor;//Arrayhtml

instanceof Array前端

2，傳統事件綁定和符合W3C標準的事件綁定有什麼區別？

<div onclick=」」>123</div>java

div1.onclick=function(){};node

符合W3C標準的事件綁定的方式 addEventListener/attachEventjquery

A、非IE瀏覽器：webpack

addEventListenergit

一、若是說給同一個元素綁定了兩次或者屢次相同類型的事件，因此的綁定將會依次觸發

二、支持DOM事件流的

三、進行事件綁定傳參不須要on前綴

addEventListener(「click」,function(){},true);//此時的事件就是在事件捕獲階段執行

第三個參數：表明是否在捕獲階段執行，默認值是false

addEventListener(「click」,function(e){})

addEventListener(「click」,function(){},false) 事件在冒泡階段執行

B、IE瀏覽器

ie9開始，ie11 edge：addEventListener

ie9之前 ie8：attachEvent/detachEvent

一、進行事件類型傳參須要帶上on前綴

dom1.attachEvent(「onclick」,functioin(){});

二、這種方式只支持事件冒泡，不支持事件捕獲

三、IE和標準下有哪些兼容性的寫法

ev = ev || window.event 獲取觸發事件的對象

var target = ev.srcElement||ev.target 獲取事件的源對象

document.documentElement.clientWidth || document.body.clientWidth

四、call和apply的區別

call和apply相同點：

都是爲了用一個本不屬於一個對象的方法，讓這個對象去執行

toString.call([],1,2,3)

toString.apply([],[1,2,3])

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

區別：

call第二個參數開始接受一個參數列表

apply第二個參數開始接受一個參數數組

5、Javascript如何實現繼承？

原型鏈繼承，借用構造函數繼承，原型+構造函數組合繼承，寄生式繼承

6、Javascript建立對象的幾種方式？

第一種：對象字面量、Object構造函數

第二種：構造函數

第三種：純構造函數

第四種：空構造函數+原型

第五種：混合構造函數+原型

第六種：動態原型

第七種：寄生構造函數

第八種：Object.create()——ES5 ie9+

如下是寄生構造函數模式：

——實際上是工廠模式的變種，只不過是放在其餘構造函數中建立對象

代碼以下：

function SpecialArray(){
    var values = [];
    values.push.apply(values, arguments);
    values.toPipedString = function(){
        return this.join("|");
    };
    return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString());  //"red|blue|green"

7、JavaScript this指針、閉包、做用域

this：指向調用上下文

閉包：內層做用域能夠訪問外層做用域的變量

做用域：定義一個函數就開闢了一個局部做用域，整個js執行環境有一個全局做用域

八、javascript的同源策略

同一來源指的是域名,協議和端口號的組合

協議：http,ftp https

端口名：80:

http協議的默認端口：80

https:協議的默認端口是8083

同源策略帶來的麻煩：ajax在不一樣域名下的請求沒法實現，

若是說想要請求其餘來源的js文件，或者json數據，那麼能夠經過jsonp來解決

JSONP的實現原理：經過動態建立script標籤

九、編寫一個數組去重的方法

[1,3,1,5,2,3,7]=>[1,3,5,2,7]

方法：

一、先建立一個空數組，用來保存最終的結果

二、循環原數組中的每一個元素

三、再對新數組對每一個元素進行位置查找，判斷是否存在，若是沒有，將把這個元素放到新數組中

四、返回這個新數組

function(){
    var newArr=[];
    for(var i=0;i<arr.length;i++){
         if(newArr.indexOf(arr[i])==-1){
               newArr.push(arr[i])
         }
    }
    return newArr
}

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

運行環境：瀏覽器中的JS引擎（v8.。。 ff:splidemonkey）

運行在Node.js：v8引擎上

語言特性：面向對象（建立對象的多種方式，繼承的多種方式、原型鏈），動態語言

十一、如何檢測數組的數據類型

方法1、判斷其是否具備「數組性質」，如slice()方法。可本身給該變量定義slice方法，故有時會失效

方法2、obj instanceof Array 在某些IE版本中不正確

方法3、toString.call([]);//」[object Array]」

方法4、方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容性，最好的方法以下：

if(typeof Array.isArray==="undefined"){

Array.isArray = function(arg){

return Object.prototype.toString.call(arg)==="[object Array]"

};

}

十二、但願獲取到頁面中全部的checkbox怎麼作

 var domList = document.getElementsByTagName(‘input’)
 var checkBoxList = [];//返回的全部的checkbox
 var len = domList.length;　　//緩存到局部變量
 while (len--) {　　
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

1三、Javascript的事件流模型都有什麼？ DOM事件流

「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播

「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的

「DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡

1四、看下列代碼輸出爲什麼？解釋緣由。

 var a;
 alert(typeof a); // 「undefined」
 //alert(b); // 報錯 
 b=10;
 alert(typeof b);//」number」

undefined會在如下三種狀況下產生：

a、一個變量定義了卻沒有被賦值

b、想要獲取一個對象上不存在的屬性或者方法:

c、一個數組中沒有被賦值的元素

1五、看代碼給答案。

 var a = new Object();
 a.value = 1;
 b = a;
 b.value = 2;
 alert(a.value);//2

答案：2（考察引用數據類型細節）

1六、var numberArray = [3,6,2,4,1,5]; （考察基礎API）

1) 實現對該數組的倒排，反轉，輸出[5,1,4,2,6,3]

reverse()

2) 實現對該數組的降序排列，輸出[6,5,4,3,2,1]

冒泡排序

1七、輸出今天的日期，以YYYY-MM-DD的方式，好比今天是2014年9月26日，則輸出2014-09-26

 var d = new Date();

// 獲取年，getFullYear()返回4位的數字 //今年：2016

var year = d.getFullYear();

// 獲取月，月份比較特殊，0是1月，11是12月

var month = d.getMonth() + 1;

// 變成兩位

month = month < 10 ? '0' + month : month;

// 獲取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

1八、將字符串」<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’);

1九、foo = foo||bar ，這行代碼是什麼意思？爲何要這樣寫？

這種寫法稱之爲短路表達式

答案：if(!foo) foo = bar; //若是foo存在，值不變，不然把bar的值賦給foo。

短路表達式：做爲」&&」和」||」操做符的操做數表達式，這些表達式在進行求值時，只要最終的結果已經能夠肯定是真或假，求值過程便了結止，這稱之爲短路求值。

注意if條件的真假斷定，記住如下是false的狀況：

空字符串、false、undefined、null、0

20、看下列代碼，將會輸出什麼?( 變量聲明提早 )

 var foo = 1;

 function(){

    var foo;

    console.log(foo); //undefined

    foo = 2;

    console.log(foo); // 2;  

}

函數聲明與變量聲明會被JavaScript引擎隱式地提高到當前做用域的頂部，可是隻提高名稱不會提高賦值部分。

2一、有這樣一個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}。

2二、

a、看下面代碼，給出輸出結果。

 for(var i=1;i<=3;i++){

  setTimeout(function(){

      console.log(i);   

  },0); 

};

答案：4 4 4。

緣由：setTimeout會在js引擎空閒的時候再執行

JavaScript事件處理器在線程空閒以前不會運行。追問，

b、如何讓a中代碼輸出1 2 3？

 for(var i=1;i<=3;i++){

   setTimeout((function(a){  //改爲當即執行函數

       console.log(a);   

   })(i),0); 

};

2三、寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）

使用自帶接口trim()，考慮兼容性：

 if (!String.prototype.trim) {

    String.prototype.trim = function() {

        return this.replace(/^\s+/, "").replace(/\s+$/,"");

        //\s匹配空白字符：回車、換行、製表符tab 空格

     }

}

 // test the function

var str = " \t\n test string ".trim();

alert(str == "test string"); // alerts "true"

2四、Javascript中callee和caller的做用？

arguments.callee：得到當前函數的引用

caller是返回一個對函數的引用，該函數調用了當前函數；若是不是由其餘函數調用的，那麼返回值就是null

callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

那麼問題來了？

若是一對兔子每個月生一對兔子；一對新生兔，從第二個月起就開始生兔子；假定每對兔子都是一雌一雄，試問一對兔子，第n個月能繁殖成多少對兔子？（使用callee完成）

2五、Javascript中, 如下哪條語句必定會產生運行錯誤？答案( BC )

A、var obj=NaN;

B、var 0bj = [];(這裏是一個數字0)

C、var obj = //;

D、var obj = {};

2六、如下兩個變量a和b，a+b的哪一個結果是NaN？答案( C )

A、var a=undefind; b=NaN //拼寫 undefined

B、var a=‘123’; b=NaN //字符串

C、var a =undefined , b =NaN

D、var a=NaN , b='undefined' //」NaNundefined」

2七、var a=10; b=20; c=4; ++b+c+a++ 如下哪一個結果是正確的？答案( B )

A、34 B、35 C、36 D、37

//21+4+10

2八、typeof運算符返回值中有一個跟javascript數據類型不一致，它是function

2九、定義了一個變量，但沒有爲該變量賦值，若是alert該變量，javascript彈出的對話框中顯示undefined

3一、寫出程序運行的結果？

for(i=0, j=0; i<10, j<6; i++, j++){
    //終止條件：j=5 i=5
    k = i + j;//k=10
}
//結果：10

3二、閱讀如下代碼，請分析出結果

 var arr = new Array(1 ,3 ,5);

arr[4]='z';//[1,3,5,undefined,’z’]

arr2 = arr.reverse();   //arr2=[’z’,undefined,5,3,1];

//arr=[’z’,undefined,5,3,1]

arr3 = arr.concat(arr2);

alert(arr3);

彈出提示對話框：z,,5,3,1,z,,5,3,1

3三、給一個按鈕綁定點擊事件的函數，確認用戶是否退出當前頁面，確認以後關閉窗口

confirm

window.close()

3五、列舉瀏覽器對象模型BOM裏經常使用的至少4個對象，並列舉window對象的經常使用方法至少5個

對象：window document location screen history navigator

方法：alert() confirm() prompt() open() close()

3六、簡述列舉文檔對象模型DOM裏document的經常使用的查找訪問節點的方法

Document.getElementById 根據元素id查找元素

Document.getElementByName 根據元素name查找元素

Document.getElementTagName 根據指定的元素名查找元素

3八、簡述建立函數的幾種方式

第一種（函數聲明）：

function sum1(num1,num2){

return num1+num2;

}

第二種（函數表達式）：

var sum2 = function(num1,num2){

return num1+num2;

}

匿名函數：

function(){}:只能本身執行本身

第三種（函數對象方式）：瞭解

var sum3 = new Function("num1","num2","return num1+num2");

4一、documen.write和 innerHTML 的區別？

document.write 只能重繪整個頁面

innerHTML 能夠重繪頁面的一部分

4二、內存泄露是什麼？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。

若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

4三、判斷一個字符串中出現次數最多的字符，統計這個次數

答：var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){ //str.charAt(i) =」a」
json[str.charAt(i)] = 1; //json[「a」]=1
}else{
json[str.charAt(i)]++; //讓a鍵的值+1，也就是這個字符多出現了一次
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出現次數最多的是:'+iIndex+'出現'+iMax+'次');

4四、寫一個獲取非行間樣式的函數 //內嵌、外聯，行內

function getStyle(obj,attr,value){

if(!value){

if(obj.currentStyle)//ie{

return obj.currentStyle(attr);

}else{//標準瀏覽器

obj.getComputedStyle(attr,false);

}

}else{

obj.style[attr] = value;

}

4五、解釋jsonp的原理

動態建立script標籤，給請求的地址中添加一個get參數，這個參數表明回調函數，也就是但願服務器處理完個人請求以後，在前端執行這個對調函數

4六、javascript的本地對象，內置對象和宿主對象

本地對象爲array obj regexp等能夠new實例化

Array RegExp String Boolean 。。。

內置對象爲global、Math 等不能夠實例化的

關於global對象咱們沒法在瀏覽器中發現她的存在，由於他的屬性和方法都被綁定在了window對象中

每個宿主對象他的實現都是取決於不一樣的瀏覽器的，這樣就產生了瀏覽器兼容性問題

宿主爲瀏覽器自帶的document,window 等

4七、字符串反轉，如將 '12345678' 變成 '87654321'

 //大牛作法；

//思路：先將字符串轉換爲數組 split()，利用數組的反序函數 reverse()顛倒數組，再利用 jion() 轉換爲字符串

var str = '12345678';

str = str.split('').reverse().join('');

4八、window.location.search返回的是什麼？

答：查詢(參數)部分。除了給動態語言賦值之外，咱們一樣能夠給靜態頁面,並使用javascript來得到相信應的參數值

返回值：?ver=1.0&id=timlq 也就是問號後面的！

//url:http://www.sina.co//url:http://www.sina.com/getage?number=1&year=2016//url:http://www.sina.com/getage?number=1&year=2016//url:http://www.sina.com/getage?number=1&year=2016m/getage?number=1&year=2016

4九、window.location.hash 返回的是什麼？

答：錨點，返回值：#love ；

//url:http://www.sina.com/getage?#age

這時就返回」#age」

50、window.location.reload() 做用？

答：刷新當前頁面。

5一、看題作答：

 function f1(){

    var tmp = 1;

    this.x = 3;

    console.log(tmp);   

    console.log(this.x)；

}

var obj = new f1();

console.log(obj.x)    //3

console.log(f1());     //1  undefined

5二、下面輸出多少？

 var o1 = new Object();

 var o2 = o1;

 o2.name = "CSSer";

 console.log(o1.name); //」CSSer」

5四、觀看代碼，有什麼輸出

 var a = 6;

 setTimeout(function () {    

    var a = 666;//因爲變量a是一個局部變量

    alert(a);      // 輸出666，

}, 0);

a = 66;

console.log(a);  //先打印全局變量a的值：66  再執行setTimeout裏面的局部變量

由於var a = 666;定義了局部變量a，而且賦值爲666，根據變量做用域鏈，
全局變量處在做用域末端，優先訪問了局部變量，從而覆蓋了全局變量。

5七、觀察如下代碼的輸出

 window.color = 'red';

 var o = {color: 'blue'};

 function sayColor(){

    alert(this.color);

}

考點：1、this的指向

      2、call的用法

sayColor(); //red

sayColor.call(this); //red this指向的是window對象

sayColor.call(window); //red

sayColor.call(o); //blue

5八、結果是什麼？

 function foo(){

    foo.a = function(){alert(1)}; 

    this.a = function(){alert(2)}; //obj.a

    a = function(){alert(3)};

    var a = function(){alert(4)};

}; 

foo.prototype.a = function(){alert(5)};

foo.a = function(){alert(6)};

foo.a(); //6

var obj = new foo();

obj.a(); //2

foo.a(); //1

5九、分析代碼結果

 var a = 5; 

function test(){

   var a; 

  a = 0; 

    alert(a); 

    alert(this.a); //沒有定義 a這個屬性

        alert(a)

}

test(); // 0, 5, 0

var obj=new test(); // 0, undefined, 0 //因爲類它自身沒有屬性a， 因此是undefined

60、結果是

 var bool = !!2; alert(bool)；//true;

技巧：雙向非操做能夠把字符串和數字轉換爲布爾值。

6一、匹配輸入的字符：第一個必須是字母或下劃線開頭，後面就是字母和數字或者下劃線構成，長度5-20

var reg = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}/

6二、BOM對象有哪些，列舉window對象？

一、window對象，是JS的最頂層對象，其餘的BOM對象都是window對象的屬性；

二、document對象，文檔對象；

三、location對象，瀏覽器當前URL信息；

四、navigator對象，瀏覽器自己信息；

五、screen對象，客戶端屏幕信息；

六、history對象，瀏覽器訪問歷史信息；

6三、JS中的簡單繼承

——>call方法！

 //頂一個父母類，注意：類名都是首字母大寫的哦！

  function Parent(name, money){

            this.name = name;

            this.money = money;

            this.info = function(){

                alert('姓名： '+this.name+' 錢： '+ this.money);

            }

        }

        //定義孩子類

        function Children(name){

            Parent.call(this, name); //繼承 姓名屬性，不要錢。  

            this.info = function(){

                alert('姓名： '+this.name);

            }

        }

        //實例化類

        var per = new Parent('parent', 800000000000);

        var chi = new Children('child');

        per.info();

        chi.info();

6四、bind(), live(), delegate()的區別

bind：綁定事件，對新添加的事件不起做用，方法用於將一個處理程序附加到每一個匹配元素的事件上並返回jQuery對象。

live：方法將一個事件處理程序附加到與當前選擇器匹配的全部元素（包含現有的或未來添加的）的指定事件上並返回jQuery對象。

delegate：方法基於一組特定的根元素將處理程序附加到匹配選擇器的全部元素（現有的或未來的）的一個或多個事件上。

最佳實現：jquery 1.7以後：就推薦使用on() off()

6五、簡述link和import的區別？

區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。

6六、看下列代碼輸出什麼？

 var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo); //「number」

執行完後foo的值爲111，foo的類型爲Number。

6八、你如何優化本身的代碼？

代碼重用：聲明函數把整個過程封裝起來；把他們弄成一些對象

避免全局變量（命名空間，封閉空間，模塊化mvc..） AngularJS

拆分函數避免函數過於臃腫：單一職責原則：條理更加清晰，更好的維護

適當的註釋，尤爲是一些複雜的業務邏輯或者是計算邏輯，都應該寫出這個業務邏輯的具體過程

內存管理，尤爲是閉包中的變量釋放

變量的命名規範：尤爲是在實際項目中

$div：表明一個jquery對象

dom：表明一個原生的dom對象

但願一個函數是構造函數：函數的首字母都要大寫

變量必定要語義化：

70、請將一個URL的search部分參數與值轉換成一個json對象

 //search部分的參數格式：a=1&b=2&c=3

function getJsonFromUrlSearch(search){
    var item;
    var result={};
    if(search.indexOf('&')<0){
        item=search.split('=');
        result[item[0]]=item[1];
        return result;
    }
    var splitArray=search.split('&');
    for (var i = 0; i < splitArray.length; i++) {
        var obj = splitArray[i];
        item=obj.split('=');
        result[item[0]]=item[1];
    }
    return result;
}
var c=getJsonFromUrlSearch("a=1&b=2&c=3");

7一、請用原生js實現jquery的get\post功能，以及跨域狀況下

ajax

先建立一個HttpRequest()

再設置他的請求頭：請求的數據類型：json/xml

再設置他的onreadstatechange

最後再提交這個請求

7二、請簡要描述web前端性能須要考慮哪方面，你的優化思路是什麼？

//參見雅虎14web優化規則

//0、減小http請求：

//一、小圖弄成大圖（雪碧圖、精靈圖），

//二、合理的設置緩存 localStorage cookie

//三、資源合併、壓縮 html代碼的最小化，壓縮體積：就是減小帶寬

//四、一些小的js文件合併成大的js文件

//五、將外部的js文件置底

7三、簡述readyonly與disabled的區別

readonly只針對input(text / password)和textarea有效，

而disabled對於全部的表單元素都有效，當表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去

7四、請儘量詳盡的解釋ajax的工做原理

思路：先解釋異步，再解釋ajax如何使用

異步是爲了進行局部刷新，提高用戶體驗

2005 年誕生ajax

Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。要清楚這個過程和原理，咱們必須對 XMLHttpRequest有所瞭解。

XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript能夠及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。

7五、爲何擴展javascript內置對象不是好的作法？

由於擴展內置對象會影響整個程序中所使用到的該內置對象的原型屬性

//若是說是整個項目中都適用的功能，那麼能夠進行擴展

7六、什麼是三元表達式？「三元」表示什麼意思？

? :

由於運算符會涉及3個表達式

var a=3>2?5:2;

7七、module(12,5)//2 實現知足這個結果的module函數

function module(a,b){
return a%b;//return a/b;
}

7八、HTTP協議中，GET和POST有什麼區別？分別適用什麼場景？

get傳送的數據長度有限制，post沒有

get經過url傳遞，在瀏覽器地址欄可見，post是在報文中傳遞

適用場景：

post通常用於表單提交

get通常用於簡單的數據查詢，嚴格要求不是那麼高的場景

7九、HTTP狀態消息200 302 304 403 404 500分別表示什麼

200：請求已成功，請求所但願的響應頭或數據體將隨此響應返回。

302：請求的資源臨時從不一樣的 URI響應請求。因爲這樣的重定向是臨時的，客戶端應當繼續向原有地址發送之後的請求。只有在Cache-Control或Expires中進行了指定的狀況下，這個響應纔是可緩存的

304：若是客戶端發送了一個帶條件的 GET 請求且該請求已被容許，而文檔的內容（自上次訪問以來或者根據請求的條件）並無改變，則服務器應當返回這個狀態碼。304響應禁止包含消息體，所以始終以消息頭後的第一個空行結尾。

403：服務器已經理解請求，可是拒絕執行它。

404：請求失敗，請求所但願獲得的資源未被在服務器上發現。

500：服務器遇到了一個不曾預料的情況，致使了它沒法完成對請求的處理。通常來講，這個問題都會在服務器端的源代碼出現錯誤時出現。

80、HTTP協議中，header信息裏面，怎麼控制頁面失效時間（last-modified,cache-control,Expires分別表明什麼）

Last-Modified	文檔的最後改動時間。客戶能夠經過If-Modified-Since請求頭提供一個日期，該請求將被視爲一個條件GET，只有改動時間遲於指定時間的文檔纔會返回，不然返回一個304（Not Modified）狀態。Last-Modified也可用setDateHeader方法來設置。
Expires	應該在何時認爲文檔已通過期，從而再也不緩存它？

8一、請列舉js數組類型中的經常使用方法

方法	描述
concat()	鏈接兩個或更多的數組，並返回結果。
join()	把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop()	刪除並返回數組的最後一個元素
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()	顛倒數組中元素的順序。
shift()	刪除並返回數組的第一個元素
slice()	從某個已有的數組返回選定的元素
sort()	對數組的元素進行排序
splice()	刪除元素，並向數組添加新元素。
toSource()	返回該對象的源代碼。
toString()	把數組轉換爲字符串，並返回結果。
toLocaleString()	把數組轉換爲本地數組，並返回結果。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()	返回數組對象的原始值

8二、列舉經常使用的js框架以及分別適用的領域

jquery：簡化了js的一些操做，而且提供了一些很是好用的API

jquery ui、jquery-easyui：在jqeury的基礎上提供了一些經常使用的組件日期，下拉框，表格這些組件

require.js、sea.js（阿里的玉帛）+》模塊化開發使用的

jquery mobile：是jquery本身出的支持移動端網頁開發，不過很是笨重，可是功能很是強大

zepto：精簡版的jquery，經常使用於手機web前端開發提供了一些手機頁面實用功能,touch

ext.js：跟jquery差很少，可是不開源，也沒有jquery輕量

angular、knockoutjs、avalon(去哪兒前端總監，做者：司徒正美)：MV*框架，適合用於單頁應用開發(SPA)

8三、如何獲取對象a擁有的全部屬性（可枚舉的、不可枚舉的，不包括繼承來的屬性）

Object.keys——IE9+ ES5

或者使用for…in並過濾出繼承的屬性

for(o in obj){

if(obj.hasOwnproperty(o)){//判斷o不是繼承來的屬性

//把o這個屬性放入到一個數組中

}

8四、下面這段代碼想要循環昝輸出結果01234，請問輸出結果是否正確，若是不正確，請說明爲何，並修改循環內的代碼使其輸出正確結果

for(var i=0;i<5;++i){

setTimeout(function(){

console.log(i+’’);

},100*i);

}

8五、解釋下這個css選擇器什麼發生什麼？

[role=nav]>ul a:not([href^-mailto]){}

8六、描述錯誤的是 D

A：Http狀態碼302表示暫時性轉移對

B:domContentLoaded事件早於onload事件 //正確

當 onload 事件觸發時，頁面上全部的DOM，樣式表，腳本，圖片，flash都已經加載完成了。

當 DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。

C: IE678不支持事件捕獲

D:localStorage 存儲的數據在電腦重啓後丟失 //錯誤，由於沒有時間限制

8七、關於link和@import的區別正確的是 AB

A: link屬於XHTML標籤，而@import是CSS提供的；

B：頁面被加載時，link會同時被加載，然後者引用的CSS會等到頁面被加載完再加載

C：import只在IE5以上才能識別而link是XHTML標籤，無兼容問題

D: link方式的樣式的權重高於@import的權重

import誕生於CSS2.1規範，任何支持CSS2.1以上版本的瀏覽器都支持Import

link方式的樣式跟import沒有權重高低這麼個說法，只有書寫順序的不一樣纔會決定樣式

8八、變量的命名規範以及命名推薦

8九、三種彈窗的單詞以及三種彈窗的功能

alert

confirm

prompt

9一、寫一個post請求並帶有發送數據和返回數據的樣例

$.ajax({
    url:"1.html",
    data:{name:"張三",age:18},//post數據
    dataType:"json",
    type:"POST",
    success:function(data){
        //data：返回的數據
    },
    error:function(){
        //異常處理
    }
});

90、jQuery框架中$.ajax()的經常使用參數有哪些？

type

類型：String

默認值: "GET")。請求方式 ("POST" 或 "GET")，默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可使用，但僅部分瀏覽器支持。

url

類型：String

默認值: 當前頁地址。發送請求的地址。

success

類型：Function

請求成功後的回調函數。

參數：由服務器返回，並根據 dataType 參數進行處理後的數據；描述狀態的字符串。

這是一個 Ajax 事件。

options

類型：Object

可選。AJAX 請求設置。全部選項都是可選的。

async

類型：Boolean

默認值: true。默認設置下，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲 false。

注意，同步請求將鎖住瀏覽器，用戶其它操做必須等待請求完成才能夠執行。

beforeSend(XHR)

類型：Function

發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。

XMLHttpRequest 對象是惟一的參數。

這是一個 Ajax 事件。若是返回 false 能夠取消本次 ajax 請求。

cache

類型：Boolean

默認值: true，dataType 爲 script 和 jsonp 時默認爲 false。設置爲 false 將不緩存此頁面。

jQuery 1.2 新功能。

contentType

類型：String

默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。

默認值適合大多數狀況。若是你明確地傳遞了一個 content-type 給 $.ajax() 那麼它一定會發送給服務器（即便沒有數據要發送）。

data

類型：String

發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲Key/Value 格式。若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。

dataFilter

類型：Function

給 Ajax 返回的原始數據的進行預處理的函數。提供 data 和 type 兩個參數：data 是 Ajax 返回的原始數據，type 是調用 jQuery.ajax 時提供的dataType 參數。函數返回的值將由 jQuery 進一步處理。

dataType

類型：String

預期服務器返回的數據類型。若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，好比 XML MIME 類型就被識別爲 XML。在 1.4中，JSON 就會生成一個 JavaScript 對象，而 script 則會執行這個腳本。隨後服務器端返回的數據會根據這個值解析後，傳遞給回調函數。可用值:

· "xml": 返回 XML 文檔，可用 jQuery 處理。

· "html": 返回純文本 HTML 信息；包含的 script 標籤會在插入 dom 時執行。

· "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意：在遠程請求時(不在同一個域下)，全部 POST 請求都將轉爲 GET 請求。（由於將使用 DOM 的 script標籤來加載）

· "json": 返回 JSON 數據。

· "jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。

· "text": 返回純文本字符串

error

類型：Function

默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。

有如下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。

若是發生了錯誤，錯誤信息（第二個參數）除了獲得 null 以外，還多是 "timeout", "error", "notmodified" 和 "parsererror"。

這是一個 Ajax 事件。

9二、閉包：下面這個ul，如何點擊每一列的時候alert其index？

<li>這是第一條</li>

<li>這是第二條</li>

<li>這是第三條</li>

</ul>

//非閉包實現

var lis=document.querySelectorAll('li');
document.querySelector('#test').onclick=function(e){
    for (var i = 0; i < lis.length; i++) {
        var li = lis[i];
        if(li==e.target){
            alert(i);
        }
    }
};

//閉包實現

var lis=document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    li.onclick=(function(index){
        return function(e){
            alert(index);
        };
    })(i);
}

9三、Javascript中callee和caller的做用？

caller是返回一個對函數的引用，該函數調用了當前函數；

用法：fn.caller

callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

用法：arguments.callee

9四、在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？

僞數組（類數組）：沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，但仍能夠對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於僞數組。

可使用Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。

9五、《正則》寫出正確的正則表達式匹配固話號，區號3-4位，第一位爲0，中橫線，7-8位數字，中橫線，3-4位分機號格式的固話號

經常使用正則表達式語法要熟悉

/0[0-9]{2,3}-\d{7,8}/ 010 021 020 025 028 0755：深圳

9六、請寫出一個程序，在頁面加載完成後動態建立一個form表單，並在裏面添加一個input對象並給它任意賦值後義post方式提交到：http://127.0.0.1/save.php

9七、下面代碼會有什麼樣的輸出

var User = { 對象

count = 1，屬性

getCount：function（）{ 方法

return this.count;

}

console.log(User.getCount());

var func = User.getCount;

console.log(func());

答案：1 undefined

9八、下面代碼的輸出：

(function test(){

var a=b=5; //b是一個隱式的全局變量

alert(typeof a);

alert(typeof b);

})();

alert(typeof a);

alert(typeof b);

//number number undefined number

9九、下列JavaScript代碼執行後，iNum的值是

var iNum = 0;

for(var i = 1; i< 10; i++){

if(i % 5 == 0){

continue;

}

iNum++;

}

分析：

i=1 1

i=2 2

i=3 3

i=4 4

i=5

i=6 5

i=7 6

i=8 7

i=9 8

100、輸出結果是多少？

1）

var a;

var b = a * 0;

if (b == b) {

console.log(b * 2 + "2" - 0 + 4);

} else {//b=NaN

console.log(!b * 2 + "2" - 0 + 4); //1*2+」2」-0+4

}

答案：26

考點：乘號運算符的運算規則：

一、若是其中一個數是NaN，則結果就是NaN

二、若是乘積超過了ECMAScript設定的範圍，那麼就會返回Infinity、-Infinity

三、若是參與乘法運算的某個操做數不是數值，js引擎會先調用Number()將這個數變成一個數值類型，

好比：空字符串就會變成0 布爾值true就會變成1，空數組[]也會變成0，undefined轉換結果則是變成了NaN

10一、如下代碼會有什麼輸出

var a = 1;

</script>

var a;

var b = a * 0;

if (b == b) { //b=0

console.log(b * 2 + "2" - 0 + 4); //0*2+」2」-0+4

} else {

console.log(!b * 2 + "2" - 0 + 4);

}

</script>

答案：6

10二、觀察輸出結果

var t = 10;

function test(t){

var t = t++;//此時的t是一個局部變量，全局變量沒有任何變化

console.log(t);//此時的結果又是多少？

}

test(t);

console.log(t);

答案：10

10三、輸出結果：

var t = 10;

function test(test){

var t = test++;

}test(t);

console.log(t);

答案：10

10四、輸出結果：

var t = 10;

function test(test){

t = test++;//這一步全局變量t的值等於改變前的test的值

}test(t);

console.log(t);

答案：10

10五、輸出結果：

var t = 10;

function test(test){

t = t + test;//undefined+10=NaN

console.log(t);

var t = 3;

}test(t);

console.log(t);

答案：NaN 10

10六、輸出結果：

var a;

var b = a / 0;

if (b == b) {//b=NaN

console.log(!b * 2 + "2" - 0 + 4);

} else {

console.log(!b * 2 + "2" - 0 + 4);

}

答案：26

107:、輸出結果：

var a = 1;

</script>

var a;

var b = a / 0;

if (b == b) { //b=Infinity

console.log(b * 2 + "2" + 4);

} else {

console.log(!b * 2 + "2" + 4);

}

</script>

答案：Infinity24

10八、下列JavaScript代碼執行後，運行的結果是

var btn = document.getElementById('btn');

var handler = {

id: '_eventHandler',

exec: function(){

alert(this.id);

}

btn.addEventListener('click', handler.exec);

答案：btn，由於handler.exec是由btn這個按鈕執行的

10九、☆☆☆下列JavaScript代碼執行後，依次alert的結果是

var obj = {proto: {a:1,b:2}};

function F(){};

F.prototype = obj.proto;

var f = new F();

obj.proto.c = 3;

obj.proto = {a:-1, b:-2};

alert(f.a);//1

alert(f.c);//3

delete F.prototype['a'];

alert(f.a);//undefined

alert(obj.proto.a);//-1

1十、下列JavaScript代碼執行後的效果是

</ul>

var items = document.querySelectorAll('#list>li');

for(var i = 0;i < items.length; i++){

setTimeout(function(){

items[i].style.backgroundColor = '#fee';

}, 5);

}

答案：異常

1十一、程序中捕獲異常的方法？

window.error=function(){};

try{}catch(){}finally{}

1十二、給字符串擴展一個兼容全部瀏覽器的清除先後的空格的方法

if (!String.prototype.trim) {

String.prototype.trim = function() {

return this.replace(/^\s+/, "").replace(/\s+$/,"");

} }

11三、下列控制檯都輸出什麼

function setName(){

name="張三";

}

setName();

console.log(name);

答案："張三"

11四、

//考點：一、變量聲明提高二、變量搜索機制

var a=1;

function test(){

console.log(a);

var a=1;

}

test();

答案：undefined

11五、

var b=2;

function test2(){

window.b=3;

console.log(b);

}

test2();

答案：3

11六、

c=5;//聲明一個全局變量c

function test3(){

window.c=3;

console.log(c); //答案：undefined，緣由：因爲此時的c是一個局部變量c，而且沒有被賦值

var c;

console.log(window.c);//答案：3，緣由：這裏的c就是一個全局變量c

}

test3();

117：

var arr = [];

arr[0] = 'a';

arr[1] = 'b';

arr[10] = 'c';

alert(arr.length); //答案：11

console.log(arr[5]); //答案：undefined

118：

var a=1;

console.log(a++); //答案：1

console.log(++a); //答案：3

119：

console.log(null==undefined); //答案：true

console.log("1"==1); //答案：true，由於會將數字1先轉換爲字符串1

console.log("1"===1); //答案：false，由於數據類型不一致

120、

parseInt(3.14); //3

parseFloat("3asdf"); //3

parseInt("1.23abc456");

parseInt(true);// "true"=> NaN

//對一個非數字或者一個非字符串類型進行數據轉換的時候，會先把這個數據轉換爲一個字符串類型，而後再轉換爲數值類型

考點：考察非數字轉換爲整數的熟練度

12一、

//考點：函數聲明提早

function bar() {

return foo;

foo = 10;

function foo() {}

//var foo = 11;

}

alert(typeof bar());//"function"

12二、

考點：函數聲明提早

var foo = 1;

function bar() {

foo = 10;

return;

function foo() {}

}

bar();

alert(foo);//答案：1

12三、

console.log(a);//是一個函數

var a = 3;

function a(){}

console.log(a);////3

12四、

//考點：對arguments的操做

function foo(a) {

arguments[0] = 2;

alert(a);//答案：2，由於：a、arguments是對實參的訪問，b、經過arguments[i]能夠修改指定實參的值

}

foo(1);

12五、

function foo(a) {

alert(arguments.length);//答案：3，由於arguments是對實參的訪問

}

foo(1, 2, 3);

12六、

bar();//報錯由於bar這個名稱只能在函數內部被訪問

var foo = function bar(name) {

console.log("hello"+name);

console.log(bar);

};

//alert(typeof bar);

foo("world");//"hello"

console.log(bar);//undefined

console.log(foo.toString());

bar();//報錯

12七、

function test(){

console.log("test函數");

}

setTimeout(function(){

console.log("定時器回調函數");

}, 0)

test();

function foo(){

var name="hello";

}

12八、jQuery 的 slideUp動畫，若是目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?

先stop(true,true)後slideUp()

示例代碼參考：J:\代碼,PPT,筆記,電子書\面試題\面試題_jquery_slideup.html

關於stop()參考：J:\代碼,PPT,筆記,電子書\面試題\面試題_jquery.png

12九、Ajax 是什麼? 如何建立一個Ajax？

Ajax並不算是一種新的技術，全稱是asynchronous javascript and xml，能夠說是已有技術的組合，主要用來實現客戶端與服務器端的異步通訊效果，實現頁面的局部刷新，早期的瀏覽器並不能原生支持ajax，可使用隱藏幀（iframe）方式變相實現異步效果，後來的瀏覽器提供了對ajax的原生支持

使用ajax原生方式發送請求主要經過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通訊效果

基本步驟：

var xhr =null;//建立對象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(「方式」,」地址」,」標誌位」);//初始化請求

xhr.setRequestHeader(「」,」」);//設置http頭信息

xhr.onreadystatechange =function(){}//指定回調函數

xhr.send();//發送請求

130、同步和異步的區別?

同步：阻塞的

-張三叫李四去吃飯，李四一直忙得不停，張三一直等着，直到李四忙完兩我的一塊去吃飯

=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等着（頁面白屏），直到服務器返回數據，瀏覽器才能顯示頁面

異步：非阻塞的

-張三叫李四去吃飯，李四在忙，張三說了一聲而後本身就去吃飯了，李四忙完後本身去吃

=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器能夠自如的幹原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，局部更新

13一、GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符，有的瀏覽器是8000個字符

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制

在如下狀況中，請使用 POST 請求：

1. 沒法使用緩存文件（更新服務器上的文件或數據庫）

2. 向服務器發送大量數據（POST 沒有數據量限制）

3. 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

13二、ajax的缺點

一、ajax不支持瀏覽器back按鈕。

二、安全問題 AJAX暴露了與服務器交互的細節。

三、對搜索引擎的支持比較弱。//不會執行你的js腳本，只會操做你的網頁源代碼

四、破壞了程序的異常機制。

五、沒法跨域請求，解決方式：jsonp

13三、http常見的狀態碼有那些？分別表明是什麼意思？

200 OK //客戶端請求成功

400 Bad Request //客戶端請求有語法錯誤，不能被服務器所理解

403 Forbidden //服務器收到請求，可是拒絕提供服務

404 Not Found //請求資源不存在，輸入了錯誤的URL

500 Internal Server Error //服務器發生不可預期的錯誤

503 Server Unavailable //服務器當前不能處理客戶端的請求，一段時間後可能恢復正常

13四、嚴格模式

連接：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

全局變量顯式聲明

靜態綁定

禁止使用with語句

eval中定義的變量都是局部變量

禁止this關鍵字指向全局對象

禁止在函數內部遍歷調用棧 arguments.callee

嚴格模式下沒法刪除變量。只有configurable設置爲true的對象屬性，才能被刪除

正常模式下，對一個對象的只讀屬性進行賦值，不會報錯，只會默默地失敗。嚴格模式下，將報錯。

嚴格模式下，對一個使用getter方法讀取的屬性進行賦值，會報錯。

嚴格模式下，對禁止擴展的對象添加新屬性，會報錯。

嚴格模式下，刪除一個不可刪除的屬性，會報錯。

正常模式下，若是對象有多個重名屬性，最後賦值的那個屬性會覆蓋前面的值。嚴格模式下，這屬於語法錯誤。

正常模式下，若是函數有多個重名的參數，能夠用arguments[i]讀取。嚴格模式下，這屬於語法錯誤。

正常模式下，整數的第一位若是是0，表示這是八進制數，好比0100等於十進制的64。嚴格模式禁止這種表示法，整數第一位爲0，將報錯。

不容許對arguments賦值

arguments再也不追蹤參數的變化

禁止使用arguments.callee

嚴格模式只容許在全局做用域或函數做用域的頂層聲明函數。也就是說，不容許在非函數的代碼塊內聲明函數

if else while for 沒法聲明函數

嚴格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。

13五、new操做符具體幹了什麼呢?

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

二、屬性和方法被加入到 this 引用的對象中。

三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

13六、模塊化開發怎麼作？

理解模塊化開發模式：瀏覽器端requirejs，seajs；服務器端nodejs；ES6模塊化；fis、webpack等前端總體模塊化解決方案；grunt、gulp等前端工做流的使用

13七、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

理解這兩種規範的差別，主要經過requirejs與seajs的對比，理解模塊的定義與引用方式

的差別以及這兩種規範的設計原則

參考連接1：https://www.zhihu.com/question/20351507/answer/14859415

參考連接2：https://github.com/seajs/seajs/issues/277

一、對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.

二、CMD 推崇依賴就近，AMD 推崇依賴前置。

3. AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都簡單純粹。