前端面试笔试题集锦（一）

今日有幸约面海尔，出了几道面试题，隐隐约约感觉做错了。后面复盘回忆，才发现确实是做错了，看来前端的自我修炼道路还是漫漫远兮，必将上下而求索！一日不练，技能生疏，终日不学，不思进取，罪过罪过！

下面贴出被面到的几道题目：

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年是互联网灾难性的一年，找工作不易，且行且珍惜，诸君共勉！