前端面試題整理-JS

JS

1. For-in、Object.keys、Object.getOwnPropertyNames、Object.getOwnPropertySymbols、Reflect.ownKeys區別

   For-in:遍歷自身和繼承的可枚舉屬性，不含Symbol屬性。

   Object.keys（obj）：返回數組，包含對象自身（不含繼承）的可枚舉屬性，不含Symbol屬性

   Object.getOwnPropertyNames返回數組，包含對象自身全部屬性，包括不可枚舉，不含Symbol

   Object.getOwnPropertySymbols(obj)返回數組，包含對象自身的全部Symbol

   Reflect.ownKeys（obj）：返回數組，包含對象自身的全部屬性，無論是否枚舉，Symbol或字符串

2. 判斷數據類型的方法

   instanceof只能判斷兩個對象是否屬於實例關係，而不能判斷一個對象實例具體屬於哪一種類型

   constructor不能判斷null和undefined，當開發者重寫prototype後constructor會默認爲object

   type of 對null，array，object的返回值都是object

   Objet.prototype.toString.call(obj)能夠正確判斷出數據類型（string,number,boolean,undefined,null,object,array,function）

3. 說說寫JavaScript的基本規範？

   • 不要在同一行聲明多個變量。
   • 請使用 ===/!==來比較true/false或者數值
   • 使用對象字面量替代new Array這種形式
   • 不要使用全局函數。
   • Switch語句必須帶有default分支
   • 函數不該該有時候有返回值，有時候沒有返回值。
   • For循環必須使用大括號
   • If語句必須使用大括號
   • for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污染。

4. JavaScript原型，原型鏈 ? 有什麼特色？

   JS中每一個函數都存在有一個原型對象屬性prototype。而且全部函數的默認原型都是Object的實例。

   每一個繼承父函數的子函數的對象都包含一個內部屬性_proto_。該屬性包含一個指針，指向父函數的prototype。若父函數的原型對象的_proto_屬性爲再上一層函數。在此過程當中就造成了原型鏈。

   原型鏈實現了繼承。原型鏈存在兩個問題：a 包含引用類型值的原型屬性會被全部實例共享。b 在建立子類型時，沒法向超類型的構造函數中傳遞參數。特色：JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變。當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的話，就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象。

5. JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？

   棧：原始數據類型（先入後出），由編譯器自動分配釋放，一級緩存，調用完畢當即釋放

   堆：引用數據類型（利用徹底二叉樹結構維護數據，時間複雜度爲o(logn)），由程序員分配釋放，二級緩存，垃圾回收

   徹底二叉樹：除了最後一層樹全滿，最後一層全部節點連續集中在最左邊。上浮、下沉、插入、彈出

   詳細介紹

6. Javascript如何實現繼承？

   使用原型鏈。subtype.prototype=new supertype()

   使用構造函數。function(){supertype.call(this)}

   組合繼承

   具體示例

7. Javascript建立對象的幾種方式？

   構造函數、對象字面量、原型模式、object.create()

8. Javascript做用鏈域?

   做用域鏈是函數被建立的做用域中對象的集合。做用域鏈能夠保證對執行環境有權訪問的全部變量和函數的有序訪問。

   做用域鏈的最前端始終是當前執行的代碼所在環境的變量對象（若是該環境是函數，則將其活動對象做爲變量對象），下一個變量對象來自包含環境，全局執行環境的變量對象始終是做用域鏈中的最後一個對象。

9. 談談this對象的理解。

   this表示當前對象，this的指向是根據調用的上下文來決定的，默認指向window對象，對象函數調用，哪一個對象調用就指向哪一個對象，使用 new 實例化對象，在構造函數中的this指向實例化對象

10. eval是作什麼的？

    把字符串參數解析成JS代碼並運行，並返回執行的結果。

    應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

11. 什麼是window對象? 什麼是document對象?

    window是頂層對象，而不是另外一個對象的屬性，是瀏覽器的窗口。

    document是window和frames對象的一個屬性，是顯示於窗口或框架內的一個文檔。

12. ["1", "2", "3"].map(parseInt) 爲何爲[1,NaN,NaN]?

    .map傳值時，以parseInt(value,index,array)傳入

    parseInt('1',0,[1,2,3])=1,由於進制位爲0時以十進制轉換。

    parseInt('2',2,[1,2,3])=NaN,由於進制位爲低於數值。

    parseInt('3',2,[1,2,3])=NaN,由於進制位爲低於數值。

13. 關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

    事件流是從頁面中接受事件的順序，分爲冒泡流和捕獲流。事件冒泡是從最具體的元素接收，逐級向上傳播。事件捕獲是從上級節點開始，逐步到最具體的節點。

    IE是冒泡流，火狐同時支持冒泡流和捕獲流。

    組織事件冒泡：e.stopPropagation()，IE使用e.cancelBuddle = true

14. js正常模式和嚴格模式有什麼不一樣？

    正常模式中，變量沒有聲明就賦值會默認爲全局變量，嚴格模式禁止。

    嚴格模式this禁止指向全局，使用構造函數不加new會報錯。

    嚴格模式通常禁止刪除變量，只有configurable設置爲true纔可刪除。

    嚴格模式對象不能有重名屬性，正常模式能夠。

    嚴格模式不能有重名參數，正常模式能夠。

15. new操做符具體幹了什麼呢?

    建立一個空對象，設置原型鏈，讓構造函數中的this指向建立的空對象，若是構造函數返回值類型，返回obj，若是構造函數返回引用類型，返回這個引用類型的對象。

16. Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

    hasOwnProperty

17. JSON

    Json有對象和數組兩種格式，對象調用key,數組調用經過索引值。json轉字符串使用JSON.stringify，字符串轉對象用JSON.parse

18. js延遲加載的方式有哪些？

    defer屬性、async屬性、動態建立、jquery的getScript（）

19. Ajax 是什麼? 如何建立一個Ajax？

    Ajax：請求數據的一種方式

    var xml = new XMLHttpRequest()
    xml.open('post',url,false)
    xml.send()
    xml.onreadystatechange=function () {
      if(xml.readyState === 4 && xml.status == 200){
        console.log(xml.responseText)
      }
    }

    0: 請求未初始化

    1: 服務器鏈接已創建

    2: 請求已接收

    3: 請求處理中

    4: 請求已完成，且響應已就緒

20. 頁面編碼和被請求的資源編碼若是不一致如何處理？

    給請求的資源設置charset

21. 服務器代理轉發時，該如何處理cookie？

    服務器代理轉發時，能夠根據set-cookie的path屬性設置cookie有效路徑實現是否發送cookie

22. 模塊化開發怎麼作？

    模塊化開發是爲了解決多人合做項目時，使用同一個變量名等形成的衝突，以及項目依賴文件等引用順序。

    模塊化開發使代碼耦合度下降，以最少的模塊、零部件知足更多的個性需求，更方便地使用別人的代碼。

    模塊化開發分爲服務端規範和瀏覽器規範。

    服務器端規範：CommonJS ：nodejs

    瀏覽器端規範：AMD：RequireJS，對於依賴提早執行，依賴前置，API一個當多個用，模塊加載完成後立刻執行，用戶體驗好

    CMD：SeaJS，對於依賴延後執行，依賴就近，API嚴格區分，職責單一，模塊加載完成後沒有當即執行而是等到require再執行，性能好

    使用模塊式開發：頁面A引入js1，調用js1中的方法。js1引入js2，調用js2中module.export的方法，以此類推

    AMD和CMD須要使用export和import，可是瀏覽器沒有徹底支持，所以須要使用babel。實現這個轉換到有browserify和webpack（gulp+browserify , node+webpack）

    CommonJS規範：若是在a.js使用b.js，必定要在a.js中require（'b.js'），在b.js中提供module.exports

    CommonJS定義的模塊分爲:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}

    瀏覽器不兼容CommonJS是由於缺乏module 、exports、require、global四個變量

    Browserify可以轉換export、import是由於將全部模塊放入一個數組，id爲模塊編號，source是模塊的源碼，deps是模塊的依賴。

    因爲require是同步的，必須等上行代碼加載完成後才能執行，服務器端不是問題，瀏覽器端須要使用異步，產生了AMD。所以，CommonJS主要是爲了js再後端的表現制定的，AMD主要爲前端js制定規範。

    AMD的require須要兩個參數，module和callback。require([module],callback)

    RequireJS的誕生是爲了實現js文件異步加載，避免網頁失去響應，與管理模塊間的依賴性。

    CMD：define(function(require,exports,module){...});

23. requireJS的核心原理是什麼？（如何動態加載的？如何避免屢次加載的？如何 緩存的？）

    核心是js的加載模塊，經過正則匹配模塊以及模塊的依賴關係，保證文件加載的前後順序，根據文件的路徑對加載過的文件作了緩存

24. 談一談你對ECMAScript6的瞭解？

    ES6時js的下一代標準，規定js的使用規範

    Let、const (暫時性死區)、變量解構、startsWith等函數、promise

25. .call() 和 .apply() 的做用和區別？

    .call(func,data1,data2…)

    .apply(func,[data1,data2…])

26. 數組和對象有哪些原生方法，列舉一下？

    數組：concat、join、sort、push

    對象：map、each、tostring

27. 如何編寫高性能的Javascript？

    • 不要用for-in訪問數組，能夠用for-in訪問對象
    • 將耗費資源的DOM訪問進行緩存（定義變量保存數組長度）
    • 不要再函數內使用多個if嵌套
    • 避免循環，防止內存泄漏
    • 避免返回未聲明

28. 哪些操做會形成內存泄漏？

    意外的全局變量（未聲明便賦值的變量）、閉包、沒有清理的DOM元素引用、被遺忘的setInterval、子元素存在引發內存泄漏

29. JQuery的實現原理？

    採用構造函數進行開發，jquery是一個類，將經常使用方法定義在jquery.prototype上

30. jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？

    實現原理：將後面的對象合併到前面的對象。

    當第一個參數爲true時實現深拷貝，會在第一個對象上進行遞歸的合併。

    當第一個參數爲false時實現淺拷貝，會用第二個對象相同的key值重寫一個屬性，值不會被合併。

    淺拷貝：只拷貝對象數據的引用，新舊數據沒有徹底分離，還會互相影響。

    function shallowCopy( target ){
      if(typeof target !== 'object') return ;
      //判斷目標類型，來建立返回值
      var newObj = target instanceof Array ? [] : {};
     
      for(var item in target){
        //只複製元素自身的屬性，不復制原型鏈上的
        if(target.hasOwnProperty(item)){
          newObj[item] = target[item]
        }
      }
      return newObj
    }

    深拷貝：新舊數據徹底分離，互不影響

    function deepCopy( target ){
      if(typeof target !== 'object') return ;
      //判斷目標類型，來建立返回值
      var newObj = target instanceof Array ? [] : {};
     
      for(var item in target){
        //只複製元素自身的屬性，不復制原型鏈上的
        if(target.hasOwnProperty(item)){
          newObj[item] = typeof target[item] == 'object' ? deepCopy(target[item]) : target[item]  //判斷屬性值類型    }
      }
     
      return newObj
    }

31. jquery.extend 與 jquery.fn.extend的區別？

    jQuery.extend是拓展整個全局函數，$.ajax()這種，jQuery.fn.extend是給$的原型擴展函數，拓展選擇器$('div').ajax()

32. 談一下Jquery中的bind(),live(),delegate(),on()的區別？

    bind(event,data,function)直接綁定在元素上,對js添加的元素無效

    live(event,data,function)經過冒泡的方式綁定到元素上，更適合列表類型，支持動態數據

    delegate(childSelector,event,data,function)

    on(event,childselector,data,function)

33. JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

    有一個處理函數數組，監聽到一個事件就往數組裏放一個handle，而後觸發事件的時候一次執行

34. 是否知道自定義事件。jQuery裏的fire函數是什麼意思，何時用？

    自定義事件就是咱們按照瀏覽器對事件的機制來自定義的函數，經過new Event()建立

    由咱們本身執行的函數就是函數調用，不是由咱們執行的函數就是事件觸發。

    實現自定義事件

    callbacks.fire() 函數用於傳入指定的參數調用全部的回調。

    callbacks.fire()示例

    使用：傳入相同的參數，調用一系列函數時使用。

35. jQuery 是經過哪一個方法和 Sizzle 選擇器結合的？

    Sizzle是一個純javascript CSS選擇器引擎。通常js匹配css是從左往右，Sizzle從右往左，提高了性能。

    jQuery.fn.find()進入Sizzle

36. 針對 jQuery性能的優化方法？

    jquery避免使用class選擇器，儘可能用id

    緩存jquery對象

    壓縮js

    事件委託（冒泡）

37. Jquery與jQuery UI有啥區別？

    jqueryui是jquery的一個插件，jquery是對javascript的封裝，而jqueryui是一個基於jquery的一個UI方面的框架。

    (1) jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

    (2) jQueryUI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等。

38. jQuery和Zepto的區別？各自的使用場景？

    Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有着相似的api

    Zepto對象沒有addEventListener事件

    Zepto選擇器表達式中value值必須用單引號或雙引號擴起來

    Zepto根據標準瀏覽器，只有width()，height（），沒有innerHeight,outerHeight等，返回值與jquery不一樣

    Zepto each不能遍歷對象

    Zepto：移動端，jquery：web端

39. 如何判斷當前腳本運行在瀏覽器仍是node環境中？

    經過判斷Global對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中

40. 移動端最小觸控區域是多大？

    44pt x 44pt

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

    jQuery中slideUp 、slideDown、animate等動畫運用時，若是目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，其表現不雅。

    解決辦法：

    一、在觸發元素上的事件設置爲延遲處理, 便可避免滯後反覆執行的問題（使用setTimeout）

    二、在觸發元素的事件時預先中止全部的動畫，再執行相應的動畫事件（使用stop）

42. 把 Script 標籤 放在頁面的最底部的body封閉以前 和封閉以後有什麼區別？瀏覽器會如何解析它們？

    若是說放在body的封閉以前，將會阻塞其餘資源的加載

    若是放在body封閉以後，不會影響body內元素的加載

43. 移動端的點擊事件的有延遲，時間是多久，爲何會有？ 怎麼解決這個延時？

    click 有 300ms 延遲,爲了實現safari的雙擊事件的設計，瀏覽器要知道你是否是要雙擊操做。

44. 什麼是「前端路由」?何時適合使用「前端路由」? 「前端路由」有哪些優勢和缺點?

    路由是根據不一樣的 url 地址展現不一樣的內容或頁面，前端路由就是把不一樣路由對應不一樣的內容或頁面的任務交給前端來作，以前是經過服務端根據 url 的不一樣返回不一樣的頁面實現的。

    在單頁面應用，大部分頁面結構不變，只改變部份內容的使用前端路由

    優勢：用戶體驗好，不須要每次都從服務器所有獲取，快速展示給用戶

    缺點：使用瀏覽器的前進，後退鍵的時候會從新發送請求，沒有合理地利用緩存，單頁面沒法記住以前滾動的位置，沒法在前進，後退的時候記住滾動的位置

45. 檢測瀏覽器版本版本有哪些方式？

    使用navigator.userAgent的值來判斷

46. 咱們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡。會執行幾回事件，會先執行冒泡仍是捕獲？

    綁定在被點擊元素的事件是按照代碼順序發生，其餘元素經過冒泡或者捕獲「感知」的事件，按照W3C的標準，先發生捕獲事件，後發生冒泡事件。全部事件的順序是：其餘元素捕獲階段事件 -> 本元素代碼順序事件 -> 其餘元素冒泡階段事件 。

47. Webpack熱更新實現原理?

    熱更新：熱更新就是動態下發代碼，它可使開發者在不發佈新版本的狀況下，修復 BUG 和發佈功能。

    瀏覽器的網頁經過websocket協議與服務器創建起一個長鏈接，當服務器的css/js/html進行了修改的時候，服務器會向前端發送一個更新的消息，若是是css或者html發生了改變，網頁執行js直接操做dom，局部刷新，若是是js發生了改變，只好刷新整個頁面。

48. 請介紹一下JS之事件節流？

    在監聽瀏覽器滾動條的scroll事件時該事件會觸發不少次，這樣當快速滾動時會有不好的性能，因此要限制事件觸發的頻率，能夠防抖和節流

    防抖：讓在用戶動做中止後延遲x ms再執行回調

    截流：在用戶動做時沒隔必定時間（如200ms）執行一次回調。

49. Object.is() 與原來的比較操做符「 ===」、「 ==」的區別？

    Object.is()相似於===，但在三等號判等的基礎上特別處理了 NaN 、-0 和 +0 ，保證 -0 和 +0 再也不相同，但 Object.is(NaN, NaN) 會返回 true。

50. css-loader的原理？

    Css-loader:將js中的css加載進模塊，處理css中路徑引用等問題

    裏面的每個對象都用正則表達式，對應着一種配對方案。loader加載器用於將不一樣的文件加載到js文件中

51. React 使用場景？

    一些後臺界面，或者是和後臺數據比較多，又或者和用戶交互比較多，dom操做頻繁的均可以用react。

52. 實現組件有哪些方式？

    示例

53. 用js實現千位分隔符?

    var str = '1234567890000000';
    console.log(str.replace(/(?=(?:\d{3})+(?!\d))/g,','));