給大家分享一篇面試相關文章，希望大家在 2022 年，摸魚時間越來越多，薪資越漲越快!

1、事件循環機制

阿里面試題1：

<script type="text/javascript"> 
 var p =new Promise(resolve=>{ 
  console.log(4) 
  resolve(5) 
 }) 
 function f1(){ 
  console.log(1) 
 } 
 function f2(){ 
  setTimeout(()=>{ 
   console.log(2) 
  },0) 
  f1() 
  console.log(3) 
  p.then(res=>{ 
   console.log(res) 
  }) 
 } 
 f2() 
</script> 
// 運行結果 4 1 3 5 2 
// 如果已經了解事件運行機制，就可以跳過該問題了 

 事件循環機制，event-loop 。包含三部分：調用棧、消息隊列、微任務隊列。

事件循環開始的時候，會從全局一行一行的執行代碼，遇到函數調用的時候，就會壓入調用棧中，當函數執行完成之后，彈出調用棧。

// 如：代碼會一行一行執行，函數全部調用完成之后清空調用棧 
function f1(){ 
 console.log(1) 
} 
function f2(){ 
 f1() 
 console.log(2) 
} 
f2() 
// 執行結果 1 2 

 如果遇到 fetch、setInterval、setTimeout 異步操作時，函數調用壓入調用棧時，異步執行內容會被加入消息隊列中，消息隊列中的內容會等到調用棧清空之后才會執行。

// 如： 
function f1(){ 
 console.log(1) 
} 
function f2(){ 
 setTimeout(()=>{ 
  console.log(2) 
 },0) 
 f1() 
 console.log(3) 
} 
f2() 
// 執行結果 ：1 3 2 

 遇到 promise、async、await 異步操作時，執行內容會被加入微任務隊列中，會在調用棧清空之后立即執行。

調用棧加入的微任務隊列會立即執行。

如 
let p =new Promise(resolve=>{ 
 console.log('立即執行') 
 resolve(1) //在 then 調用中執行 
}) 

 微任務隊列中內容優先執行，所以比消息隊列中的內容執行得早。

了解這些知識后，再試一下最前面的那道面試題，應該就沒什么問題了。

2、你對作用域的認識有多少?

阿里面試題2：

<script type="text/javascript"> 
 function fn(a,c){ 
  console.log(a) 
  var a = 12 
  console.log(a) 
  console.log(c) 
  function a(){ } 
  if(false){ 
   var d = 34 
  } 
  console.log(d) 
  console.log(b) 
  var b = function(){} 
  console.log(b) 
  function c(){} 
  console.log(c) 
 } 
 fn(1,2) 
</script> 
// 運行結果： 
/* 
function a(){} 
12 
function c(){} 
undefined 
undefined 
function (){} 
function c(){} 
*/ 

 作用域通俗地講，就是指一個變量的作用范圍。下面分別介紹下全局作用域和函數作用域的概念。

全局作用域

• 頁面打開時被創建，頁面關閉時被銷毀。
• 編寫在 script 標簽下的變量和函數，作用域為全局，頁面的任意位置都可以訪問
• 有全局對象 window ,代表瀏覽器窗口，全局作用下的變量和函數作為 window 的屬性和方法

函數作用域(局部)

• 函數是被調用時創建的，執行完畢之后銷毀。
• 函數每調用一次，變量和函數就會重新創建一次，它們之間是相互獨立的
• 在函數作用域內可以訪問到全局變量或函數，但是在函數外無法訪問函數作用域內的變量
• 函數作用域內訪問變量，會在自身作用域內尋找，若沒有則會向上一級作用域內查找，一直到全局作用域。

講這些概念看完，發現還不會做上邊的面試題，接下來就學習學習作用域的預編譯，看看函數執行的時候都干了些啥?

函數在被調用的時候會先進行預編譯：

全局作用域預編譯：

• 創建上下文 GO 對象。
• 找變量聲明，將變量名作為 GO 對象的屬性名，值為 undefined
• 找函數式聲明，將值賦予函數體

函數作用域預編譯：

• 創建上下文 AO 對象
• 將形參和實參作為 AO 對象的屬性，賦值為 undefined
• 實參和形參相統一
• 在函數體內找函數聲明，將值賦予函數體。

了解預編譯過程之后，我們將上面的面試題進行解析，分析下運行結果是怎么來的?

fn 函數調用的時候，先進行預編譯，

第一階段：生成一個 AO 對象

第二階段：找到形參和實參，作為 AO 對象的屬性名，值為 udefined 。

AO{ 
a : undefined, 
b : undefined, 
c : undefined, 
d : undefined 
} 

 第三階段：實參和形參相統一，之后，AO對象改變為：

AO{ 
a : 1, 
b : undefined, 
c : 2, 
d : undefined 
} 

 第四階段：找到函數聲明，將值賦給變量，AO改變為：

AO{ 
a : function a(){ } , 
b : undefined, 
c : function c(){ }, 
d : undefined 
} 

 這下結合函數的預編譯過程以及函數作用域概念，再嘗試一下面試題，簡單了嗎?

3、為什么會有閉包?它解決了什么問題?

實例3：

var liArr = document.getElementsByTagName('li') 
for(var i=0;i<liArr.length;i++){ 
 liArr[i].onclick = function(){ 
  console.log(liArr[i]) 
 } 
} 

 這是一個非常常見的實際應用，我們是想要點擊元素然后操作對應的元素，但是點擊之后發現打印出來的是 undefined 。我們應該能想到 i 變成了 liArr.length ，所以找不到對應元素，這個問題該如何解決呢?

說閉包時，必須介紹作用域。

上面介紹全局作用域和函數作用域，js內部變量的訪問是由內向外的，內部可以訪問到外部的變量，但是外部無法訪問函數內的變量，如果我們在外部訪問函數內的變量就需要使用閉包。

閉包就是函數嵌套函數，通過函數內的函數訪問變量的規則，實現外部訪問函數內的變量。

閉包的特點：

• 函數嵌套函數。
• 函數內部可以引用函數外部的參數和變量。
• 參數和變量不會被垃圾回收機制回收。

那么上述實例該如何使用閉包解決該問題呢?

實例3：閉包解決問題

var liArr = document.getElementsByTagName('li') 
for(var i=0;i<liArr.length;i++){ 
 (function(i){ 
  liArr[i].onclick = function(){ 
   console.log('點擊元素',liArr[i]) 
  } 
 })(i)  
} 

 閉包優點：

• 保護變量安全，實現封裝，防止變量聲明沖突和全局污染。
• 在內存當中維持一個變量，可以做緩存。
• 匿名函數自執行函數可以減少內存消耗。

防抖和節流就是閉包的經典應用。

4、防抖和節流，你了解多少?

在實際應用中，常見的就是窗口的 resize、輸入框搜索內容、scroll 等操作，如果這些操作觸發頻率太高，就會加重瀏覽器的負擔，同時用戶體驗也較差。該如何優化該操作呢?

防抖函數是什么呢?

當持續觸發事件，一定時間內沒有再觸發事件，事件處理函數才會執行一次，如果在設定的時間到來之前又觸發了事件，就會重新計時。

實例4：我們想要制作一個輸入框搜索，計劃輸入完成后兩秒再執行，打印出輸入的值。

function debounce(val){ 
 var timer 
 clearTimeout(timer) 
 timer = setTimeout(function(){ 
  console.log(val) 
 },2000) 
} 
var input = document.getElementById('input') 
input.addEventListener('keyup',function(e){ 
 debounce(e.target.value) 
}) 

 實際運行結果：我們發現輸入之后，延時兩秒之后打印出結果。

并非我們想要的結果，這是什么原因呢?

因為函數每次重新調用的時候 timer 會重新創建，調用完成之后就會被銷毀，所以每次重新調用函數的時候，clearTimeout 內的 timer 都是 undefined 。所以我們需要把 timer 始終保持在內存當中，所以就需要使用閉包。

使用閉包修改上述實例4：

function debounce(delay){ 
 var timer 
 return function(val){ 
  clearTimeout(timer) 
  timer = setTimeout(function(){ 
   console.log(val) 
  },delay) 
 } 
} 
var debounceFun = debounce(2000) 
var input = document.getElementById('input') 
input.addEventListener('keyup',function(e){ 
 debounceFun(e.target.value) 
}) 

防抖函數常見的實際應用：使用 echart 的時候，瀏覽器 resize 時，需要重新繪制圖表大小，還有典型的輸入框搜索應用。

節流函數是什么?

當持續觸發事件的時候，保證一段時間內只調用一次事件處理函數，一段時間內，只允許做一件事情。

實例5：滾動條實現一段時間內執行一次處理，執行回調。

var throttle = function(func, delay) {             
 var timer = null;             
 return function() {                 
  var context = this;                
  var args = arguments;                 
  if (!timer) {                     
   timer = setTimeout(function() {                         
    func.apply(context, args);                         
     timer = null;                     
    }, delay);                 
   }             
 }         
}         
function handle() {             
 console.log('執行回調');         
}         
window.addEventListener('scroll', throttle(handle, 1000));  

防抖和節流主要是用來限制觸發頻率較高的事件，再不影響效果的前提條件下，降低事件觸發頻率，減小瀏覽器或服務器的壓力，提升用戶體驗效果。

5、數組去重有幾種方法?

這是一個非常常見的面試題，你知道幾種方式呢?

var arr = [1,2,3,4,5,1,2,3,4] 
function unique(arr){ 
  //添加去重的方法的內容 
} 
unique(arr) 

方法1： Set 方法

return Array.from(new Set(arr)) 
 
// 或 
 
return [...new Set(arr)] 

 new Set 返回的數據不是數組，所以使用 Aray.from 方法將類數組轉為真正的數組，或把 ...new Set(arr) 放入數組中。

方法2：使用兩次循環

for(var i=0,len=arr.length;i<len;i++){ 
 for(var j=i+1,len=arr.length;j<len;j++){ 
  if( arr[i]===arr[j] ){ 
   arr.splice(i,1) 
   j--; 
   len-- 
  } 
 } 
} 
return arr 

方法3：indexOf 實現

arr.indexOf(item) 返回 item 元素在 arr 數組中第一次出現所在位置的下標。

let arr1 = [] 
for(var i=0;i<arr.length;i++){ 
 if( arr1.indexOf(arr[i]) === -1 ){ 
  arr1.push(arr[i]) 
 } 
} 
return arr1 

方法4：includes 實現

let arr1 = [] 
for(var i=0;i<arr.length;i++){ 
 if( !arr1.includes(arr[i]) ){ 
  arr1.push(arr[i]) 
 } 
} 
return arr1 

方法5：filter 實現

array.indexOf(item,start) start 表示開始檢索的位置。

return arr.filter(( item, index )=>{ 
 return arr.indexOf( item, 0 ) == index 
})