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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM