JavaScript必看的10道面試題總結（推薦）

Posted on by

1.this指向

1.誰調用指向誰

例：

  function foo(){
        console.log("this",this);
      }
      new foo();

2.全局指向window

例：

 function foo(){
        console.log("this",this);
 }
 foo();

3.構造函數的this指向構造函數實例

4.call/apply/bind 強制改變this指向

5.箭頭函數的this始終指向父級上下文

2.事件模型：事件委托、代理？如何讓事件先冒泡後捕獲

事件委托:又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都綁定到父元素上。如果子元素阻止瞭事件冒泡，那麼委托也就沒法實現瞭。

三個參數：事件名、事件的方法，是捕獲還是冒泡

先冒泡後捕獲

給一個元素綁定兩個addEventListener，其中一個第三個參數設置為false（即冒泡），另一個第三個參數設置為true（即捕獲），調整它們的代碼順序，將設置為false的監聽事件放在設置為true的監聽事件前面即可。

3.對象和面向對象

對象屬於一種復合的數據類型，在對象中可以保存多個不同數據類型的屬性

面向對象是一種編程思想(萬物皆對象)與之對應的是面向過程(類:類的繼承(子類繼承父類的方法和屬性)、封裝(核心是低耦合高內聚)、多態(重載和重寫))，js是一門面向對象的語言;

* js本身就是基於面向對象構建出來的(例如:JS中有很多內置類, Array, Object, Function, String; 像Promise就是ES6中新增的一個內置類, 我們可以基於new Promise來創建一個實例, 管理異編程),

* 一般我們平時用的VUE/REACT/JQUERY也都是基於面向對象構建出來,他們都是類,平時開發的時候都是創建他們的實例來操作.

4.for···in和for···of的區別

1、推薦在循環對象屬性的時候，使用for…in,在遍歷數組的時候使用for…of。

2、for…in 循環出的是 key，for…of 循環出的是 value

3、for…of 不能循環普通的對象，需要通過Object.keys()來強制使用

5.查找數組重復項

查找該元素首次出現的位置和最後出現的位置下標是否相同，同時判斷新數組中是否不存在該元素，如果都滿足則添加進新數組中去。

ES6-set

使用ES6中的set是最簡單的去重方法

var arr  = [1,1,'true','true',true,true,15,15,false,false, undefined,
undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}];
 
function arr_unique1(arr){
return  [...new Set(arr)];
//或者
//return  Array.from(new Set(arr));
}
arr_unique1(arr); // (13)[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

利用Map數據結構去重

function arr_unique2(arr) {
  let map = new Map();
  let array = new Array();  // 數組用於返回結果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有該key值
      map .set(arr[i], true);
    } else {
      map .set(arr[i], false);   // 如果沒有該key值
      array .push(arr[i]);
    }
  }
  return array ;
}

 console.log(arr_unique2(arr)); //(13) [1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

利用遞歸去重

function arr_unique3(arr) {
     var array= arr;
     var len = array.length;
     array.sort(function(a,b){   //排序後更加方便去重
     return a - b;
    })
    
 function loop(index){
        if(index >= 1){
            if(array[index] === array[index-1]){
                array.splice(index,1);
            }
            loop(index - 1);    //遞歸loop，然後數組去重
        }
    }
    loop(len-1);
    return array;
}
 
console.log(arr_unique3(arr)); //(14) [1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

forEach + indexOf

filter+indexOf

forEach + includes

6.數組扁平化

數組扁平化就是將一個多維數組轉換為一個一維數組
實現基本方式

1、對數組的每一項進行遍歷。

2、判斷該項是否是數組。

3、如果該項不是數組則將其直接放進新數組。

4、是數組則回到1，繼續迭代。

5、當數組遍歷完成，返回這個新數組。

7.iframe的優缺點有哪些

優點：

①iframe能夠原封不動的把嵌入的網頁展現出來；

②如果有多個網頁引用iframe，那麼你隻需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。

③網頁如果為瞭統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加代碼的可重用。

④可以由iframe來解決,加載緩慢的第三方內容如圖標和廣告,。

缺點：

①會產生很多頁面不易管理；

②iframe框架結構有時會讓人感到迷惑，如果框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的註意力，用戶體驗度差。

③代碼復雜，無法被一些搜索引擎索引到，這一點很關鍵，現在的搜索引擎爬蟲還不能很好的處理iframe中的內容，所以使用iframe會不利於搜索引擎優化。

④設備兼容性差。

⑤iframe框架頁面會增加服務器的http請求，對於大型網站是不可取的。

8.函數柯裡化（卡瑞化、加裡化）

 把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數，並且返回接受餘下的參數而且返回結果的新函數的技術。

 就是隻傳遞給函數某一部分參數來調用，返回一個新函數去處理剩下的參數（閉包）

9.垃圾回收機制

瀏覽器的 Javascript 具有自動垃圾回收機制(GC:Garbage Collecation)，也就是說，執行環境會負責管理代碼執行過程中使用的內存。其原理是：垃圾收集器會定期（周期性）找出那些不在繼續使用的變量，然後釋放其內存。但是這個過程不是實時的，因為其開銷比較大並且GC時停止響應其他操作，所以垃圾回收器會按照固定的時間間隔周期性的執行

10.window的onload事件和domcontentloaded

window.onload：

當一個資源及其依賴資源已完成加載時，將觸發onload事件。

document.onDOMContentLoaded：

當初始的HTML文檔被完全加載和解析完成之後，DOMContentLoaded事件被觸發，而無需等待樣式表、圖像和子框架的完成加載。

區別：

①onload事件是DOM事件，onDOMContentLoaded是HTML5事件。

②onload事件會被樣式表、圖像和子框架阻塞，而onDOMContentLoaded不會。

③當加載的腳本內容並不包含立即執行DOM操作時，使用onDOMContentLoaded事件是個更好的選擇，會比onload事件執行時間更早。

總結

到此這篇關於JavaScript必看的10道面試題的文章就介紹到這瞭,更多相關JavaScript面試題內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：