前端高頻面試題JavaScript篇

以下問題都來自於網際網路前端面經分享，回答為筆者通過查閱資料加上自身理解總結，不保證解答的準確性，有興趣討論的同學可以留言或者私信討論。

1.JS的非同步機制？
2.閉包如何實現?
3.原型鏈、繼承？
4.實現訂閱者釋出者模式？
5.陣列的方法有哪些？

1.JS的非同步機制？

JS使用一個任務佇列記錄非同步任務的回撥函式，當非同步任務（或者事件被激發，如滑鼠點選）完成後，其回撥函式會被新增到該任務佇列的末尾，JS主執行緒在將所有的同步任務執行完畢後，會無限迴圈地去檢查任務佇列，如果任務佇列不為空，則主執行緒回去執行任務佇列中的任務。
關於非同步機制的詳細解答，可以參考：Javascript非同步機制

2.閉包如何實現?

在電腦科學中，閉包是引用了自由變數的函式。在Javascript中，在一個函式中定義一個內部函式，並且內部函式引用了外部函式作用域的變數，然後將這個內部函式作為外部函式的返回值，這樣就構成了一個閉包。如下程式碼：

function wrapper() {
    var milk = `特侖蘇`
    function drink() {
        console.log(`我喝了` + milk)
    }
    return drink
}
var result = wrapper()
result()  //我喝了特侖蘇

關於閉包的詳細解答，可以參考：Javascript閉包

3.原型鏈、繼承？

在Javascript中，每當我們定義一個函式，Javascript引擎就會自動為這個函式物件新增一個prototype屬性（也被稱作原型），每當我們使用這個函式new建立一個物件時，Javascript引擎就會自動為這個物件中新增一個__ proto __ 屬性，並讓其指向其類的prototype。當我們訪問一個物件的屬性時，首先回去尋找該物件本身的屬性，如果找不到的話回去尋找該物件的 __ proto __ 作用域下的屬性，一直到尋找到該屬性或者沒有__ proto __為止。這種尋找例項屬性的方式我們稱作原型鏈。
當我們讓子類的prototype指向父類的例項時，便實現了原型鏈繼承。

// 原型鏈實現繼承的關鍵程式碼
Son.prototype = new Father()

當然Javascript的繼承方式還有 建構函式繼承 、 組合繼承 、 寄生繼承，更詳盡的解答，可以參考：對Javascript 類、原型鏈、繼承的理解

4.實現訂閱/釋出者模式？

var publisher = {}; // 定義釋出者
publisher.list = []; // 快取列表 存放訂閱者回撥函式
// 增加訂閱者
publisher.listen = function(fn) {
    publisher.list.push(fn);  // 訂閱訊息新增到快取列表
}
// 釋出訊息
publisher.trigger = function(){
    for(var i = 0,fn; fn = this.list[i++];) {
        var that = this
        fn.apply(null, arguments); 
    }
}

詳細答案可以參考：Javascript中理解發布–訂閱模式

5.陣列的方法有哪些？

這個題屬於開放題，答案就比較多了，下面我列舉一下比較常用的陣列方法：
遍歷方法：
包括 map、foreach、filter

let arr = [{
    name:"西瓜",
    type:"水果"
},{
    name:"芒果",
    type:"水果"
},{
    name:"小龍蝦",
    type:"夜宵"
}]
arr.forEach((item, index) => {
    console.log(item.name)
}) //分別列印 西瓜 芒果 小龍蝦
arr.map((item, index) => {
    return item.name
}) //返回陣列["西瓜", "芒果", "小龍蝦"]
arr.filter((item, index) => {
    if (item.type == "水果")
        return true;
    else 
        return false;
}) //返回陣列[{ name: 西瓜, type : 水果 }, { name: 芒果, type : 水果 }]

forEach：用於遍歷陣列，無返回值；
map：遍歷陣列之後，對每一項返回一個值，並將這些返回值都推入一個陣列，最後返回這個新的陣列；
filter：對資料進行過濾，回撥函式返回值為false的項將被過濾掉，最後返回過濾後的陣列。
操作方法：
包括 concat、push、pop、unshift、shift、splice

let listA = ["西瓜", "芒果"]
let listB = ["小龍蝦"]
let listC = listA.concat(listB)
// 返回值：[西瓜, 芒果, 小龍蝦]

listC.push("雞腿")
// 返回值：4
// 陣列值：[西瓜, 芒果, 小龍蝦, 雞腿]

listC.pop()
// 返回值："雞腿"
// 陣列值：[西瓜, 芒果, 小龍蝦]

listC.unshift("雞腿")
// 返回值：4
// 陣列值：[雞腿, 西瓜, 芒果, 小龍蝦]

listC.shift()
// 返回值："雞腿"
// 陣列值：[西瓜, 芒果, 小龍蝦]

listC.splice(1, 1, "冰激凌", "奶茶")
// 返回值：[芒果]
// 陣列值：[西瓜, 冰激凌, 奶茶, 小龍蝦]

concat：拼接陣列，將引數陣列拼接到呼叫陣列末尾，並返回這個新陣列；值得一提的是，這個方法並不會改變呼叫陣列和引數陣列，即上例中的listA、listB）；
push：在陣列尾部插入新的元素，返回插入元素之後的陣列長度；
pop：從陣列尾部刪除元素，返回刪除的元素；
unshift：在陣列頭部插入新的元素，返回插入元素之後的陣列長度；
shift：從陣列頭部刪除元素，返回刪除的元素；
splice：刪除元素並插入元素，第一個引數為操作位置X，第二個引數為需要從操作位置X刪除元素數量，後面的引數為需要從操作位置X插入的元素，返回刪除的元素組成的陣列。