摘要：做前端也已經(jīng)好幾年了，大大小小的面試也經(jīng)歷過好多次了，遇到過各種奇葩面試官，也遇到過很犀利的大牛，最近又開始找工作，所以整理了這些面試題，也算是重新復(fù)習(xí)一遍。服務(wù)器端暫時(shí)無法處理請求可能是過載或維護(hù)。避免使用表達(dá)式又稱動態(tài)屬性。

做前端也已經(jīng)好幾年了，大大小小的面試也經(jīng)歷過好多次了，遇到過各種奇葩面試官，也遇到過很犀利的大牛，最近又開始找工作，所以整理了這些面試題，也算是重新復(fù)習(xí)一遍。

1、cookie、localStorage、sessionStorage的區(qū)別和使用？

    cookie：是存儲在本地的數(shù)據(jù)，有時(shí)候也用cookies，通常經(jīng)過加密，應(yīng)用最經(jīng)典的就是判斷注冊用戶是否已經(jīng)登錄過該網(wǎng)站。
    localStorage：僅在客戶端保存（即瀏覽器），不參與和服務(wù)器的通信；沒有時(shí)間限制，即使瀏覽器關(guān)閉，數(shù)據(jù)依然存在；
    創(chuàng)建和訪問localStorage：
        1）、設(shè)置數(shù)據(jù)：
        var forgetData = {phone:vm.phone};
        localStorage.setItem("forgetData",JSON.Stringfy(forgetData));    //forgetData是存儲在localStorage里邊的本地?cái)?shù)據(jù)；JSON.Stringfy(forgetData)是將數(shù)據(jù)轉(zhuǎn)化為字符串格式；
            獲取數(shù)據(jù)：
        vm.forgetData=JSON.parse(localStorage.getItem("forgetData"));  //將對象轉(zhuǎn)化為json；
        2）、設(shè)置：localStorage.name = "zhao";
             獲?。簂ocalStorage.name    //zhao

        localStorage.setItem(key,value);//設(shè)置數(shù)據(jù)
        localStorage.getItem(key);//獲取數(shù)據(jù)
        localStorage.removeItem(key);//刪除單個(gè)數(shù)據(jù)
        localStorage.clear();//清除所有l(wèi)ocalStorage的數(shù)據(jù)

    sessionStorage：當(dāng)用戶的瀏覽器窗口關(guān)閉時(shí)，數(shù)據(jù)會被清除；
    
    共同點(diǎn)：都是保存在瀏覽器端，且同源的。
    區(qū)別：
        cookie數(shù)據(jù)始終在同源的http請求中攜帶9即使不需要)，即cookie在瀏覽器和服務(wù)器之間來回傳遞；cookie數(shù)據(jù)還有路徑的概念，可以限制cookie只屬于某個(gè)路徑下。存儲大小限制也不同，cookie數(shù)據(jù)大小不能超過4K，同時(shí)因?yàn)槊看蝖ttp請求都會攜帶cookie，所以cookie只能保存很小的數(shù)據(jù)。
        sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，只在本地保存，雖然也有大小限制，但是要比cookie大得多，可以達(dá)到5M或者更大。
        數(shù)據(jù)有效期不同，sessionStorage僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，不能持久保存；localStorage：始終有效，瀏覽器窗口關(guān)閉也一直保存；cookie：只在cookie設(shè)置的過期時(shí)間之前保存，即使瀏覽器窗口關(guān)閉。
        作用域不同，sessionStorage在不同瀏覽器窗口的數(shù)據(jù)不能共享，即使是同一個(gè)頁面；localStorage在所有的同源窗口中都是共享的；cookie也是在同源窗口中共享的，

2、如何實(shí)現(xiàn)瀏覽器多標(biāo)簽頁之間的通信？

    調(diào)用localStorage、cookie本地存儲方式。

3、JavaScript的typeof返回類型有哪些？

Object（null和Array）、number、undefined、string、Boolean

4、類型轉(zhuǎn)換

強(qiáng)制轉(zhuǎn)換：parseInt();parseFloat();number();

5、數(shù)組的方法

var list = [1,2,3];
list.pop();//刪除數(shù)組的最后一個(gè)元素 var list = [1,2];
list.unshift(0,1);//頭部添加  var list = [0,1,1,2,3];
list.push(4,5);//尾部添加   var list = [1,2,3,4,5];
var arr = list.concat(4,[5,6]);//把兩個(gè)數(shù)組連接起來 //var arr = [1,2,3,4,5];  //var list = [1,2,3];
list.join("-");    //1-2-3
list.reverse();//3,2,1
list.slice(1);//var list = [2,3];
list.slice(1,2);//var list = [2];
list.slice(1,-2);//設(shè)置了兩個(gè)參數(shù)，終止下標(biāo)為負(fù)數(shù)，當(dāng)出現(xiàn)負(fù)數(shù)時(shí)，將負(fù)數(shù)加上數(shù)組長度的值來替換該位置的數(shù)。
var arr = list.splice(0,1);//刪除 var list = [2,3];  var arr = [1];可以刪除任意數(shù)量的項(xiàng)，只需指定2個(gè)參數(shù)；要?jiǎng)h除的第一項(xiàng)的位置和要?jiǎng)h除的項(xiàng)數(shù)。例如splice(0,2);會刪除當(dāng)前數(shù)組的前兩項(xiàng)
list.splice(2,0,4,6);//插入，var list = [1,2,4,6,3]; 可以向指定位置插入任意數(shù)量的項(xiàng)，需要3個(gè)參數(shù)，起始位置、0（要?jiǎng)h除的項(xiàng)數(shù)）、要插入的任意數(shù)量的項(xiàng)。例如splice(2,0,4,6);會從第二個(gè)位置插入4和6；
list.splice(2,1,4,6);//替換，var list = [1,2,6,3]; 可以向指定位置插入任意數(shù)量的項(xiàng)，同時(shí)刪除任意數(shù)量的項(xiàng)，需要3個(gè)參數(shù)，起始位置、要?jiǎng)h除的項(xiàng)數(shù)、要插入的任意數(shù)量的項(xiàng)。例如splice(2,1,4,6);會從位置 2 開始插入4和6。
list.sort();//按照第一個(gè)數(shù)字大小進(jìn)行排序;
function compare(a,b){
    return a-b;//正序；
    return b-a;//倒序；
}
list.sort(compare);

6、ajax請求時(shí)get和post的區(qū)別？

get：從服務(wù)器上獲取數(shù)據(jù)，傳送數(shù)據(jù)量小，安全性低，請求會被緩存，緩存是針對URL進(jìn)行緩存的，get請求參數(shù)直接加在URL地址后面，一種參數(shù)組合就會產(chǎn)生一種URL的緩存，重復(fù)的請求結(jié)果是相同的；
post：向服務(wù)器發(fā)送數(shù)據(jù)；傳送數(shù)據(jù)量大，請求不會被緩存，參數(shù)封裝在二進(jìn)制的數(shù)據(jù)體中，服務(wù)器也不會記錄參數(shù)，相對安全，所以涉及用戶隱私的數(shù)據(jù)都要用post傳送；

7、ajax請求時(shí)，如何解釋json數(shù)據(jù)？

使用eval方法解析的時(shí)候，eval();不會去判斷該字符串是否合法，而且json對象里的js方法也會被執(zhí)行，這是非常危險(xiǎn)的；推薦使用JSON.parse(); JSON.parse();把字符串轉(zhuǎn)化成json。

8、call和apply的區(qū)別？

共同點(diǎn)：
    都可以用來代替另一個(gè)對象調(diào)用一個(gè)方法，將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)橛蓆hisObj指定的新對象。
    另一種說法，都能夠改變方法的執(zhí)行上下文（執(zhí)行環(huán)境），將一個(gè)對象的方法交給另一個(gè)對象來執(zhí)行，并且是立即執(zhí)行。
不同點(diǎn)：
    apply();//最多只能有兩個(gè)參數(shù)--新this對象和一個(gè)數(shù)組argArray，如果給該方法傳遞多個(gè)參數(shù)，則把參數(shù)都寫進(jìn)這個(gè)數(shù)組里邊，當(dāng)然，即使只有一個(gè)參數(shù)，也要寫進(jìn)數(shù)組里邊。
    call();//可以接收多個(gè)參數(shù)，第一個(gè)參數(shù)apply()一樣，后面則是一串參數(shù)列表。
    實(shí)際上，apply和call的功能是一樣的，只是傳入的參數(shù)列表的形式不同。

9、http常用狀態(tài)碼？

    100  Continue  繼續(xù)，一般在發(fā)送post請求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息
    200  OK   正常返回信息
    201  Created  請求成功并且服務(wù)器創(chuàng)建了新的資源
    202  Accepted  服務(wù)器已接受請求，但尚未處理
    301  Moved Permanently  請求的網(wǎng)頁已永久移動到新位置。
    302 Found  臨時(shí)性重定向。
    303 See Other  臨時(shí)性重定向，且總是使用 GET 請求新的 URI。
    304  Not Modified  自從上次請求后，請求的網(wǎng)頁未修改過。

    400 Bad Request  服務(wù)器無法理解請求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。
    401 Unauthorized  請求未授權(quán)。
    403 Forbidden  禁止訪問。
    404 Not Found  找不到如何與 URI 相匹配的資源。

    500 Internal Server Error  最常見的服務(wù)器端錯(cuò)誤。
    503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請求（可能是過載或維護(hù)）。

10.你有哪些性能優(yōu)化的方法？

    （詳情請看雅虎14條性能優(yōu)化原則）。

      （1） 減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。

      （2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)

      （3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

      （4） 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。

      （5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。

      （6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)。

      （7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部  加上時(shí)間戳。

11.深拷貝和淺拷貝

    基本類型指的是簡單的數(shù)據(jù)段，引用類型指的是多個(gè)值構(gòu)成的對象；
    var name = "John"; // 基本類型值

    var obj = new Object(); 
    obj.name = "John"; 
    // obj 為引用類型值
    
    在復(fù)制變量中，對于基本類型來說，兩者互不影響，
    var num = 1;
    var num1 = num; // num1 = 1;

    var num1 = 3; // num還是1,不會變
    
    淺拷貝和深拷貝的區(qū)別：
    對于淺拷貝來說，對于一個(gè)數(shù)組（數(shù)組是一個(gè)對象），只要我們修改了一個(gè)拷貝數(shù)組，原數(shù)組也會跟著改變。
    因?yàn)樗麄円玫氖峭粋€(gè)地址的數(shù)據(jù)，拷貝的時(shí)候并沒有給b數(shù)組創(chuàng)造獨(dú)立的內(nèi)存，只是把a(bǔ)數(shù)組指向數(shù)據(jù)的指針拷貝給了b；
    而深拷貝就與其相反，將會給b數(shù)組創(chuàng)造獨(dú)立的內(nèi)存，并且將a數(shù)組的內(nèi)容一一拷貝進(jìn)來，兩者互不影響。
    
    實(shí)現(xiàn)深拷貝：
    一：層級拷貝，用遞歸實(shí)現(xiàn)；
    二：JSON解析
        var b = JSON.parse(JSON.stringify(a));