前端面試匯總（js）

CntChen 發布于2019-08-23 18:28 / 2364人閱讀

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

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

1、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也是在同源窗口中共享的，

2、如何實現瀏覽器多標簽頁之間的通信？

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

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

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

4、類型轉換

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

5、數組的方法

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);

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

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

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

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

8、call和apply的區別？

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

9、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));

云服務器 GPU云服務器嵌入式c語言面試匯總前端面試前端工程師面試前端ddos 攻擊面試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105274.html

前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

ninefive 2019-08-21 16:18 評論0 收藏0
你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

darkbaby123 2019-07-30 14:38 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
前端面試每日3+1（周匯總2019.08.25）

摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址前端面試每日推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面試每日3+1題，以面試題來驅動學習，每天進步一點！讓努力成為一種習慣，讓奮斗成為一種享受！相信堅持的力量...

Java3y 2019-08-30 15:44 評論0 收藏0
前端面試每日3+1（周匯總2019.08.25）

摘要：前端面試每日題，以面試題來驅動學習，每天進步一點讓努力成為一種習慣，讓奮斗成為一種享受相信堅持的力量項目地址前端面試每日推薦歡迎跟一起折騰前端，系統整理前端知識，目前正在折騰，打算打通算法與數據結構的任督二脈。《論語》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面試每日3+1題，以面試題來驅動學習，每天進步一點！讓努力成為一種習慣，讓奮斗成為一種享受！相信堅持的力量...

付倫 2019-08-26 10:59 評論0 收藏0