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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
2021前端面试题主要集中在以下几个方面: 1. JavaScript基础知识: 包括数据类型、变量作用域、闭包、原型链等。考察候选人对JavaScript语言的理解和熟练程度。 2. ES6新特性: 对于ES6的新特性,如箭头函数、解构赋值、模块化等,考察候选人是否了解并能够灵活应用。 3. HTML和CSS基础: 考察候选人对HTML语义化、标签用途、样式的掌握程度。同时还会涉及到盒模型、浮动、定位等CSS的常见属性和布局方式。 4. 前端框架和库: 考察候选人是否了解常用的前端框架和库,如React、Vue、Angular等,并能够根据实际情况选择合适的技术方案。 5. 数据交互和网络请求: 考察候选人对AJAX、Fetch、WebSocket等数据交互方式的了解,并能够根据需求进行网络请求和数据处理。 6. 性能优化和调试: 考察候选人对代码性能优化和调试技巧的了解,包括减少网络请求、代码压缩和合并、浏览器缓存等方面。 7. 前端工程化: 除了前端基础知识,还会考察候选人对前端工程化的理解,包括模块化、构建工具、自动化测试、持续集成等方面。 总体而言,2021前端面试题主要关注候选人的基础知识和实际应用能力,倾向于综合考察候选人的全面素质和解决问题的能力。因此,候选人需要做好充分的准备,包括扎实的基础知识掌握、实际项目经验和应用能力的展示,以及对前沿技术的关注和了解。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值