前端面試筆試題集錦

今日有幸約面海爾，出了幾道面試題，隱隱約約感覺做錯了。後面覆盤回憶，才發現確實是做錯了，看來前端的自我修煉道路還是漫漫遠兮，必將上下而求索！一日不練，技能生疏，終日不學，不思進取，罪過罪過！

下面貼出被面到的幾道題目：

1.async和promise執行順序

async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');

　　

此題主要考查JS的事件循環機制。這題的精髓可以用一句話解釋：先走同步後走異步隊列，異步隊列裏先微後宏，await會阻塞後面的任務，指的是下一行代碼，await同行代碼是會立即執行的。

參考網站：https://juejin.cn/post/7038972445079896101
下面給出正確順序：
script start
async1 start
async2
promise1
script end

async1 end
promise2
setTimeout

2.this指向問題

let obj1={
fn: function(){
console.log(this);
setTimeout(function(){
console.log(this)
});
}
}
obj1.fn();

這題自不必說，先同步後異步，先打印了obj1，再打印window，注意換成箭頭函數或者定時器裏直接console不要function的結果。我們來換一下寫法：

let obj1={
fn: function(){
console.log(this);
setTimeout(()=>{
console.log(this)
});
}
}
obj1.fn();

此時還是先同步後異步，但先打印了obj1，再打印obj1哦！原理就是箭頭函數本身沒有this，它裏邊的this指向自身的外層作用域。再來：

let obj1={
	fn: ()=>{
		console.log(this);
		setTimeout(function(){
			console.log(this)
		});
	}
}
obj1.fn();

此時還是先同步後異步，但先打印了window，再打印宏任務裏的window哦！再變：

let obj1={
	fn: ()=>{
		console.log(this);
		setTimeout(()=>{
			console.log(this)
		});
	}
}
obj1.fn();

　此時先後打印window、window哦！再來變：

let obj1={
	fn: ()=>{
		console.log(this);
		setTimeout(
			console.log(this)
		);
	}
}
obj1.fn();

　　此時依然先後打印window、window哦！再變一次：

let obj1={
	fn: function(){
		console.log(this);
		setTimeout(
			console.log(this)
		);
	}
}
obj1.fn();

此時先後打印obj1、obj1哦！

this指向總結：

1.一般情況下對象的函數執行時，this指向點前面的對象。

2.箭頭函數可以改變this指向，指向它外層的作用域。

3.回調函數裏用function的this一般指向window。用箭頭函數則變更爲指向自身執行的外層作用域。

 

3.vue2怎麼強制更新不顯示的數據
這個一般就是數據層套的太深了，要麼做置換操作，要麼用官方的 this.$set(obj,key,val)執行一下。

4.loacalStorage與sessionStorage的區別

區別一：
LocalStorage是永久存儲在瀏覽器中的數據，即使關閉瀏覽器或標籤頁，數據也不會丟失，除非用戶明確刪除。
SessionStorage是會話級別的存儲，僅在當前瀏覽器會話期間有效，當用戶關閉瀏覽器或標籤頁時，數據會被銷燬。
區別二：
同一瀏覽器下，同時使用兩者，兩tab頁共享只能通過loacalStorage

 

覆盤總結：

題目整體不難，關機還是在於基礎老不牢固，細不細心。2024年是互聯網災難性的一年，找工作不易，且行且珍惜，諸君共勉！