前端面試彙總（js）

作前端也已經好幾年了，大大小小的面試也經歷過好屢次了，遇到過各類奇葩面試官，也遇到過很犀利的大牛，最近又開始找工做，因此整理了這些面試題，也算是從新複習一遍。

一、cookie、localStorage、sessionStorage的區別和使用？

cookie：是存儲在本地的數據，有時候也用cookies，一般通過加密，應用最經典的就是判斷註冊用戶是否已經登陸過該網站。
    localStorage：僅在客戶端保存（即瀏覽器），不參與和服務器的通訊；沒有時間限制，即便瀏覽器關閉，數據依然存在；
    建立和訪問localStorage：
        1）、設置數據：
        var forgetData = {phone:vm.phone};
        localStorage.setItem("forgetData",JSON.Stringfy(forgetData));    //forgetData是存儲在localStorage裏邊的本地數據；JSON.Stringfy(forgetData)是將數據轉化爲字符串格式；
            獲取數據：
        vm.forgetData=JSON.parse(localStorage.getItem("forgetData"));  //將對象轉化爲json；
        2）、設置：localStorage.name = "zhao";
             獲取：localStorage.name    //zhao

        localStorage.setItem(key,value);//設置數據
        localStorage.getItem(key);//獲取數據
        localStorage.removeItem(key);//刪除單個數據
        localStorage.clear();//清除全部localStorage的數據

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

二、如何實現瀏覽器多標籤頁之間的通訊？

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

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

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

四、類型轉換

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

五、數組的方法

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

六、ajax請求時get和post的區別？

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

七、ajax請求時，如何解釋json數據？

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

八、call和apply的區別？

共同點：
    均可以用來代替另外一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變爲由thisObj指定的新對象。
    另外一種說法，都可以改變方法的執行上下文（執行環境），將一個對象的方法交給另外一個對象來執行，而且是當即執行。
不一樣點：
    apply();//最多隻能有兩個參數--新this對象和一個數組argArray，若是給該方法傳遞多個參數，則把參數都寫進這個數組裏邊，固然，即便只有一個參數，也要寫進數組裏邊。
    call();//能夠接收多個參數，第一個參數apply()同樣，後面則是一串參數列表。
    實際上，apply和call的功能是同樣的，只是傳入的參數列表的形式不一樣。

九、http經常使用狀態碼？

100  Continue  繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
    200  OK   正常返回信息
    201  Created  請求成功而且服務器建立了新的資源
    202  Accepted  服務器已接受請求，但還沒有處理
    301  Moved Permanently  請求的網頁已永久移動到新位置。
    302 Found  臨時性重定向。
    303 See Other  臨時性重定向，且老是使用 GET 請求新的 URI。
    304  Not Modified  自從上次請求後，請求的網頁未修改過。

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

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

10.你有哪些性能優化的方法？

（詳情請看雅虎14條性能優化原則）。

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

      （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

      （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

      （4） 當須要設置的樣式不少時設置className而不是直接操做style。

      （5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

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

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

11.深拷貝和淺拷貝

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

    var obj = new Object(); 
    obj.name = "John"; 
    // obj 爲引用類型值
    
    在複製變量中，對於基本類型來講，二者互不影響，
    var num = 1;
    var num1 = num; // num1 = 1;

    var num1 = 3; // num仍是1,不會變
    
    淺拷貝和深拷貝的區別：
    對於淺拷貝來講，對於一個數組（數組是一個對象），只要咱們修改了一個拷貝數組，原數組也會跟着改變。
    由於他們引用的是同一個地址的數據，拷貝的時候並無給b數組創造獨立的內存，只是把a數組指向數據的指針拷貝給了b；
    而深拷貝就與其相反，將會給b數組創造獨立的內存，而且將a數組的內容一一拷貝進來，二者互不影響。
    
    實現深拷貝：
    一：層級拷貝，用遞歸實現；
    二：JSON解析
        var b = JSON.parse(JSON.stringify(a));