前端工程师面试题库

最新推荐文章于 2024-08-16 19:42:58 发布

weixin_59675455

最新推荐文章于 2024-08-16 19:42:58 发布

阅读量85

点赞数

文章标签：前端面试职场和发展

本文链接：https://blog.csdn.net/weixin_59675455/article/details/128637004

版权

1.说一说cookie sessionStorage localStorage 区别？

2.说一说JS数据类型有哪些,区别是什么？

数据分成两类型：基本数据类型和引用数据类型

基本类型：Number 、String、Boolean、Null、Undefined、BigInt、Symbol、

复杂类型：Object代表普通对象，数组，正则，日期，Math数学函数都属于Object

基本类型存在栈中（空间小），复杂类型存在堆空间（空间大）；

3.说一说你对闭包的理解？

是什么：内层函数引用外层函数中变量，这些变量的集合就是闭包

优点：①通过作用域链，当前作用域可以访问上级作用域中的变量

②解决的问题：保存变量，保护变量 ,不被污染

缺点: 带来的问题：内存泄露

4.说一说promise是什么与使用方法？

promise是一种异步编程，是为了解决毁掉地狱，让代码看起来更加优雅。promise存在三种状态pending，fulfilled，rejected，基本使用方法是new Promise((resolve,rejected)=>{}).then(res=>{}).catch(err=>{});调用resolve()会执行then部分，出现错误会执行catch部分，此外promise.all([]).then(rs=>{})还支持顺序执行多个请求,res的结果是一个请求结果数组

5.说一说跨域是什么？如何解决跨域问题？

跨域：当两个URL协议、域名、端口其中有一项不同，就说该接口跨域了。
跨域限制的原因：浏览器为了保证网页的安全，出的同源协议策略。

跨域解决方案
cors：目前最常用的一种解决办法，通过设置后端允许跨域实现。
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

node中间件、nginx反向代理：跨域限制的时候浏览器不能跨域访问服务器，node中间件和nginx反向代理，都是让请求发给代理服务器，静态页面面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。

JSONP：利用的原理是script标签可以跨域请求资源，将回调函数作为参数拼接在url中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript。

postmessage：H5新增API，通过发送和接收API实现跨域通信。

5.说一说BFC

定义：块级格式上下文特点：是一个独立的容器，内部的元素和外部元素互不影响。形成：根元素、float、position不为relative、display不为none、overflow。解决的问题：清除浮动、解决塌陷问题

6.说一说JavaScript有几种方法判断变量的类型？

typeof判断数据类型(null为object,object为function)

instance根据原型链判断类型

Object.prototype.toString().call(this)可判断具体的数据类型,判断结果打印为：'[object Xxx]'

表示一个返回对象类型的字符串，call()方法可以改变this的指向

7.事件扩展符用过吗(...)，什么场景下？

用过展开运算符(...)，

①.数组去重[...new Set(arr)]

②.数组拷贝[...arr]

③.伪数组转真数组 [...伪数组]

④.数组对象的合并

浅拷贝和深拷贝：

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

8.说一下浮动？

从三个方面回答

①浮动的作用：常用于图片，可以实现文字环绕图片。

②浮动的特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列。

③解决塌陷问题：父元素中添加overflow:hidden、给父元素添加高度、建立空白标签添加clear、或者在父级添加伪元素::after{content:'',clear:both,display:table}。

9.说一说es6中箭头函数？

①写法简洁

②无自己的this，继承上一个作用域的this（全局或上一个函数）

③内部this无法被改变

④没有arguments对象

⑤没有prototype属性

10.说一说map 和 forEach 的区别？

相同点：1.都能遍历数组 2.中途不能被break打断 3.函数中都有三个参数，当前遍历的元素，当前元素的索引，原数组。不同：1.forEach没有返回值，也就是返回undefined，map会开辟新的一个内存空间，返回新的数组，这点也方便链式调用其他数组方法。 2.map的效率比forEach高

11.说一下浏览器输入URL发生了什么？

①URL解析：判断浏览器输入的是搜索内容还是URL；

②查找缓存：如果能找到缓存则直接返回页面，如果没有缓存则需要发送网络请求页面；

③DNS域名解析；

④三次握手建立TCP连接；

⑤发起HTTP请求；

⑥服务器响应并返回结果；

⑦通过四次握手释放TCP连接；

⑧浏览器渲染；

⑨js引擎解析

11.说一说盒模型？

盒子模型一共两种：标准盒模型（content-box）和怪异盒模型（border-box）；

12.说一说伪数组和数组的区别？

①伪数组的特点：类型是object、不能使用数组方法、可以获取长度、可以使用for in遍历

② 伪数组可以转换为数组的方法：a. Array.prototype.slice.call() b.Array.from() c. [...伪数组]

③ 有哪些是伪数组：函数的参数arguments，Map和Set的keys()、values()和entires()

13.说一下有什么方法可以保持前后端实时通信？

轮询、iframe、websocket、SSE

轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。其缺点也很明显：连接数会很多，一个接受，一个发送。而且每次发送请求都会有Http的Header，会很耗流量，也会消耗CPU的利用率。

14.说一说 Vue 列表为什么加 key？

Vue列表加key的目的是为diff算法添加标识，因为diff算法判断新旧VDOM是否相同的依据是节点的tag和key。如果tag和key相同则会进一步进行比较，使得尽可能多的节点进行复用。此外，key绑定的值一般是一个唯一的值，比如id。如果绑定数组的索引index，则起不到优化diff算法的作用，因为一旦数组内元素进行增删，后续节点的绑定的key也会发生变化，导致diff进行多余的更新操作。

15.setState是同步还是异步的？

setState本身并不是异步，只是因为react的性能优化机制体现为异步。在react的生命周期函数或者作用域下为异步，在原生事件监听和定时器下为同步。

16.ajax 的 readyState 有哪几个状态，含义分别是什么？

5 个状态，分别是 0-4
0: 还没调用open方法
1: 未调用send方法，也就是还没发送数据给服务器
2: 还没有接收到响应
3: 开始接收到了部分数据
4: 接收完成，数据可以在客户端使用了