有哪些常見的JavaScript面試題

今天就跟大家聊聊有關(guān)有哪些常見的JavaScript面試題，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

1.this指向

1.誰調(diào)用指向誰

例：

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

2.全局指向window

例：

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

3.構(gòu)造函數(shù)的this指向構(gòu)造函數(shù)實例

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

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

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

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

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

先冒泡后捕獲

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

3.對象和面向?qū)ο?br/>

對象屬于一種復(fù)合的數(shù)據(jù)類型，在對象中可以保存多個不同數(shù)據(jù)類型的屬性

面向?qū)ο笫且环N編程思想(萬物皆對象)與之對應(yīng)的是面向過程(類:類的繼承(子類繼承父類的方法和屬性)、封裝(核心是低耦合高內(nèi)聚)、多態(tài)(重載和重寫))，js是一門面向?qū)ο蟮恼Z言;

* js本身就是基于面向?qū)ο髽?gòu)建出來的(例如:JS中有很多內(nèi)置類, Array, Object, Function, String; 像Promise就是ES6中新增的一個內(nèi)置類, 我們可以基于new Promise來創(chuàng)建一個實例, 管理異編程),

* 一般我們平時用的VUE/REACT/JQUERY也都是基于面向?qū)ο髽?gòu)建出來,他們都是類,平時開發(fā)的時候都是創(chuàng)建他們的實例來操作.

4.for···in和for···of的區(qū)別

1、推薦在循環(huán)對象屬性的時候，使用for…in,在遍歷數(shù)組的時候使用for…of。

2、for…in 循環(huán)出的是 key，for…of 循環(huán)出的是 value

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

5.查找數(shù)組重復(fù)項

查找該元素首次出現(xiàn)的位置和最后出現(xiàn)的位置下標(biāo)是否相同，同時判斷新數(shù)組中是否不存在該元素，如果都滿足則添加進新數(shù)組中去。

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數(shù)據(jù)結(jié)構(gòu)去重

function arr_unique2(arr) {
  let map = new Map();
  let array = new Array();  // 數(shù)組用于返回結(jié)果
  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，然后數(shù)組去重
        }
    }
    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.數(shù)組扁平化

數(shù)組扁平化就是將一個多維數(shù)組轉(zhuǎn)換為一個一維數(shù)組
實現(xiàn)基本方式

1、對數(shù)組的每一項進行遍歷。

2、判斷該項是否是數(shù)組。

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

4、是數(shù)組則回到1，繼續(xù)迭代。

5、當(dāng)數(shù)組遍歷完成，返回這個新數(shù)組。

7.iframe的優(yōu)缺點有哪些

優(yōu)點：

①iframe能夠原封不動的把嵌入的網(wǎng)頁展現(xiàn)出來；

②如果有多個網(wǎng)頁引用iframe，那么你只需要修改iframe的內(nèi)容，就可以實現(xiàn)調(diào)用的每一個頁面內(nèi)容的更改，方便快捷。

③網(wǎng)頁如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加代碼的可重用。

④可以由iframe來解決,加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告,。

缺點：

①會產(chǎn)生很多頁面不易管理；

②iframe框架結(jié)構(gòu)有時會讓人感到迷惑，如果框架個數(shù)多的話，可能會出現(xiàn)上下、左右滾動條，會分散訪問者的注意力，用戶體驗度差。

③代碼復(fù)雜，無法被一些搜索引擎索引到，這一點很關(guān)鍵，現(xiàn)在的搜索引擎爬蟲還不能很好的處理iframe中的內(nèi)容，所以使用iframe會不利于搜索引擎優(yōu)化。

④設(shè)備兼容性差。

⑤iframe框架頁面會增加服務(wù)器的http請求，對于大型網(wǎng)站是不可取的。

8.函數(shù)柯里化（卡瑞化、加里化）

 把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)(最初函數(shù)的第一個參數(shù))的函數(shù)，并且返回接受余下的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)。

 就是只傳遞給函數(shù)某一部分參數(shù)來調(diào)用，返回一個新函數(shù)去處理剩下的參數(shù)（閉包）

9.垃圾回收機制

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

10.window的onload事件和domcontentloaded

window.onload：

當(dāng)一個資源及其依賴資源已完成加載時，將觸發(fā)onload事件。

document.onDOMContentLoaded：

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

區(qū)別：

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

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

③當(dāng)加載的腳本內(nèi)容并不包含立即執(zhí)行DOM操作時，使用onDOMContentLoaded事件是個更好的選擇，會比onload事件執(zhí)行時間更早。

JavaScript的特點

1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結(jié)構(gòu)和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運行。

看完上述內(nèi)容，你們對有哪些常見的JavaScript面試題有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。