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

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

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

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

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

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

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

    調用localStorage、cookie本地存儲方式。

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

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

4、類型轉換

強制轉換：parseInt();parseFloat();number();

5、數(shù)組的方法

var list = [1,2,3];
list.pop();//刪除數(shù)組的最后一個元素 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]);//把兩個數(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ù)，終止下標為負數(shù)，當出現(xiàn)負數(shù)時，將負數(shù)加上數(shù)組長度的值來替換該位置的數(shù)。
var arr = list.splice(0,1);//刪除 var list = [2,3];  var arr = [1];可以刪除任意數(shù)量的項，只需指定2個參數(shù)；要刪除的第一項的位置和要刪除的項數(shù)。例如splice(0,2);會刪除當前數(shù)組的前兩項
list.splice(2,0,4,6);//插入，var list = [1,2,4,6,3]; 可以向指定位置插入任意數(shù)量的項，需要3個參數(shù)，起始位置、0（要刪除的項數(shù)）、要插入的任意數(shù)量的項。例如splice(2,0,4,6);會從第二個位置插入4和6；
list.splice(2,1,4,6);//替換，var list = [1,2,6,3]; 可以向指定位置插入任意數(shù)量的項，同時刪除任意數(shù)量的項，需要3個參數(shù)，起始位置、要刪除的項數(shù)、要插入的任意數(shù)量的項。例如splice(2,1,4,6);會從位置 2 開始插入4和6。
list.sort();//按照第一個數(shù)字大小進行排序;
function compare(a,b){
    return a-b;//正序；
    return b-a;//倒序；
}
list.sort(compare);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      （4） 當需要設置的樣式很多時設置className而不是直接操作style。

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

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

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

11.深拷貝和淺拷貝

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

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

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