前端常见面试题

zcp0706

已于 2022-10-27 17:18:20 修改

阅读量3.2k

点赞数 2

文章标签：前端

于 2022-10-27 16:36:29 首次发布

本文链接：https://blog.csdn.net/zcp0706/article/details/127555598

版权

本文整理了前端面试中常见的问题，包括深拷贝的实现及其局限性、Echarts饼状图旋转、Webpack配置、React与Vue的数据响应式原理、生命周期、网络通信协议的选择、HTTP与HTTPS的区别、数据双向绑定的差异、Node.js使用、Vue与React框架的理解、页面渲染流程、错误处理等。通过这些问题，可以全面了解前端开发者所需掌握的关键技能。

摘要由CSDN通过智能技术生成

文章目录

1、深拷贝怎么实现其中JSON.parse(JSON.stringify())有什么缺陷？

递归：判断拷贝的时候，属性是否基本数据类型，不是基本数据类型，递归调用，在进行拷贝。是基本数据类型。值复制新对象

Typeof intanceof object.assign Object.property.toString()

数据里面有特殊符号、正则这种符号。json.parse进行拷贝可能会出问题

loaddash第三方的库深拷贝

2、怎么让echarts饼状图旋转

api中也会有一些动画加载效果。官方提供的不满足要求

可以自己用animations来实现动画

3、webPack有哪些常用的配置？

入口、出口、plugins（newhtmlplugins）、loaders （vue-loader）

所有的 xxx.vue文件最后打包，vue-loader转化为js

图片 css scss

Css-loader

代理服务器proxy。解决跨域问题

4、react-bootstrap 用过吗？

没有接触过这个ui库。但是我平时用过bootstrap的珊格系统，也用过他里面插件，用的时候更多js版本针对react 这个框架封装了bootstrap内容。

bootstrap里面demo代码jsx代码

###5、js阻塞怎么处理

Js 单线程肯定会出现阻塞

两个层面：

页面阻塞：要么js代码放在body最后，

<script defer src> <script async src>引入外部js代码的时候，可以延迟引入。异步引入

代码阻塞：避免使用alert comfirm 、异步解决方案

6、什么情况下选择udp，什么情况下选择tcp？

tcp是可靠协议，会提供三次握手四次挥手。保证通信可靠的。

Upd：不可靠协议，直观一遍的发送，不管另外接受情况

属于网络编程里面协议。传输层协议

7、get和post是什么区别

1、get是从服务器上获取数据。get安全性非常低。

2、post是向服务器传送数据。post安全性较高。

文件传输必须是post

8、请问vue和react这些框架是如何实现数据响应式或者说是怎么感知数据变化的？可用vue或者react回答

Vue的数据双向绑定，响应式原理，就是通过Object.defineProperty()结合发布者订阅者模式来实现的。获取一个get和set方法。

1、页面更新过程：页面依赖属性变化，触发执行渲染Watch，渲染Watch执行updateComponent（Watcher.getter），执行render函数，获取更新后的Vnode。

2、比对新旧Vnode是否类似（sameVnode），同级节点进行比对，旧节点不存在则新增新节点。

3、新旧Vnode类似,则执行patchVnode，比对新旧Vnode的属性值。

4、如果存在子Vnode,则执行updateChildren，比对新旧Vnode子元素，最终也会执行patchVnode比对子元素。

###9、找出给定数组中第一个重复值，要求时间复杂度和空间复杂度尽量低，怎么实现

时间复杂度：使用时间必须最短（双层for循环）

空间复杂度：使用内存消耗最少的（放弃、创建新的数组，将原数组的数据存放新数组）

Indexof includes

10、react的生命周期有哪些，分别有什么作用？你在项目开发时常用哪些生命周期？

1. Mounting（挂载阶段）——创建构造函数并初始化，让我们在页面加载完成前后做一些事情

2. Updating（运行阶段）——状态更新引起的变化，更新页面UI显示或数据更改

3. Unmounting（卸载阶段）——销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理，

比如组件销毁后，也要将组件的定时器销毁，减少内存占用

常用的：

componentDidUpdate()-组件更新完成

render() 渲染数据

11、怎么处理async/await异常

当你第一次使用 async/await, 你可能尝试使用 try/catch 将每一个 async 操作包围起来。如果你 await 一个被 reject 的 Promise，JavaScript 会抛出一个可以被捕获的错误。

try/catch 能够捕获非异步的异常。

所以，只需要将所有的代码逻辑都用 try/catch包围起来就可以搞定？也不完全正确。下面的代码会抛出 unhandled promise rejection。await将一个被拒绝的 promise 转换为可捕获的错误，但是 return 不行。

也不可能使用 return await 来绕开。

还有一个缺点就是使用了 try/catch 之后，就很难用 . 的语法来进行 Promise 链式组合了。

12、小程序里边的双向绑定和vue的双向绑定有什么区别？

vue双向绑定v-model来实现。vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

小程序默认没有v-model。但是模拟v-model过程

this.setData({

})

对比哪些数据会变化。更新对应模块This.setState()接近于react