前端高頻面試題 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插入的元素，返回刪除的元素組成的數組。