2021年前端面试题，经典

前言：前几天去面试然后被问到的几道面试题，感觉比较经典就来分享一下。

1、sessionStorage，localStorage区别

localStorage生命周期是永久的，除非主动清除localStorage的信息，否则这些信息将永远存在。存放数据大小一般为5MB，而且它仅在客户端（游览器）中保存，不参与和服务器的通讯。
sessionStorage和localStorage相似，不同之处在于sessionStorage里面的数据会在页面会话结束的时候被清除。多个页面打开相同的url会创建各自的sessionStorage，关闭对应窗口会清楚对应的sessionStorage。

注意：对应存放对象和数组等复杂数据的时候，需要转化为json格式：
存储数据前：利用JSON.stringify将对象转换成字符串
获取数据后：利用JSON.parse将字符串转换成对象

2、在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么

①DNS 域名解析（简述域名解析过程）
根据输入的 URL 域名找到真实 IP 地址，在查找的过程中，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：
浏览器缓存->操作系统缓存->路由器缓存；
缓存中没有则查找系统的hosts文件中是否有记录；
如果没有则查询DNS服务器，首先从顶级域名，再到二级域名，以此类推。
②浏览器与服务器建立连接（TCP连接 -->对应阶段：三次握手建立连接，数据传输，四次挥手断开连接）
③web浏览器发送http请求（浏览器发送http请求必须携带：请求行，请求头，请求体）
④web服务器处理请求并返回http响应
⑤浏览器接收http响应(网络响应具有三个部分：响应行，响应头和响应体)
⑥浏览器渲染页面
⑦连接结束

3、树的深度遍历和广度遍历

广度遍历：
将A的子节点BCD倒序入栈（此时B在栈的顶端），将B出栈，判断B是否有子节点，若有则将B的子节点入栈，若没有将队列头部元素继续出栈（上图B有EFG三个子节点，所以将EFG倒序入栈，此时E在栈的顶端，所有将E出栈），继续判断出栈节点是否有子元素，重复此步骤直到栈为空。

深度遍历：
var preorderTraversal = function(root) {
let result = []
let preorder = (root) => {
if (root) {
result.push(root.val)
preorderTraversal(root.left)
preorderTraversal(root.right)
}
}
return result
};

4、路由有几种模式，有什么区别？

一般来说，常见的路由模式有两种（不管是在vue里还是在react里），一种是哈希模式，还有一种是history模式。当然还有另外一种叫abstract模式，这种浏览器一般用于非浏览器端。

那么哈希模式和history模式有什么区别呢？

区别在于：哈希模式是带#号的，看起来没有那么好看，这是最安全的模式，因为他兼容所有的浏览器和服务器。而history模式在服务器运行时去进行刷新等操作时会出现404错误，它需要更多的后端配置。

5、打印结果是什么？

<script>
	let arr = [1,-1,0,'1','0', 17, true,null,undefined, true, false, , 'true', 'a', {},[]];
	function a(arr){
		let b = arr.filter(item=>{
			return !item
		})
		return b
	}
	console.log(a(arr))//打印结果是什么打印结果是什么？
</script>

答案：放评论区吧

6、es5和es6的继承有什么区别？

1.ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）.

2.ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），然后再用子类的构造函数修改this。

3.ES5的继承时通过原型或构造函数机制来实现。

4.ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工。如果不调用super方法，子类得不到this对象。

7、对Promise的理解

Promise的三个状态pending（等待中）、resolved（得到想要结果）、rejected（得不到想要结果）。.

作用：解决回调地狱问题,将函数嵌套的代码方式改为平级的。
当一个回调函数嵌套一个回调函数的时候，就会出现一个嵌套结构，当嵌套的多了就会出现回调地狱的情况。

Promise.all接收一个Promise对象组成的数组作为参数，当这个数组所有的Promise对象状态都变成resolved或者rejected的时候，它才会去调用then方法。

Promise.race也是以一个Promise对象组成的数组作为参数，不同的是，只要当数组中的其中一个Promsie状态变成resolved或者rejected时，就可以调用.then方法了