1.this指向

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

例：

  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ù)實(shí)例

4.call/apply/bind 強(qiáng)制改變this指向

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

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

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

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

先冒泡后捕獲

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

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

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

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

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

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

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

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

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

3、for…of 不能循環(huán)普通的對(duì)象，需要通過(guò)Object.keys()來(lái)強(qiáng)制使用

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

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

ES6-set

使用ES6中的set是最簡(jiǎn)單的去重方法

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);   // 如果沒(méi)有該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ù)組扁平化就是將一個(gè)多維數(shù)組轉(zhuǎn)換為一個(gè)一維數(shù)組
實(shí)現(xiàn)基本方式

1、對(duì)數(shù)組的每一項(xiàng)進(jìn)行遍歷。

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

3、如果該項(xiàng)不是數(shù)組則將其直接放進(jìn)新數(shù)組。

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

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

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

優(yōu)點(diǎn)：

①iframe能夠原封不動(dòng)的把嵌入的網(wǎng)頁(yè)展現(xiàn)出來(lái)；

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

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

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

缺點(diǎn)：

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

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

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

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

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

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

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

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

9.垃圾回收機(jī)制

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

10.window的onload事件和domcontentloaded

window.onload：

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

document.onDOMContentLoaded：

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

區(qū)別：

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

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

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

總結(jié)

到此這篇關(guān)于JavaScript必看的10道面試題的文章就介紹到這了,更多相關(guān)JavaScript面試題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論