2021年前端面试题,经典

2021年前端面试题,经典,第1张

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、打印结果是什么?

答案:放评论区吧

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方法了

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5351225.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-09
下一篇 2022-12-09

发表评论

登录后才能评论

评论列表(0条)

保存