以下問題都來自於互聯網前端面經分享,回答為筆者通過查閱資料加上自身理解總結,不保證解答的准確性,有興趣討論的同學可以留言或者私信討論。
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插入的元素,返回刪除的元素組成的數組。