2023前端高频面试题--面试总结（含答案）_前端面试题2023及答案

1.Promise使用过吗？Promise有哪几种状态？

使用过,比如在网络请求中,使用Promise发送http请求,并处理响应结果,例如,可以使用fetch函数发送get请求,然后返回一个Promise对象,以便在请求完成后获取响应数据.

Promise有三种状态，分别是：

Pending（进行中）：初始状态，表示异步操作还未完成，仍然处于进行中。

Fulfilled（已完成）：表示异步操作成功完成，并且返回了一个结果。一旦Promise进入该状态，就会调用.then()方法，处理异步操作的结果。

Rejected（已失败）：表示异步操作发生错误或被拒绝。一旦Promise进入该状态，就会调用.catch()方法，处理异步操作的错误。

2.说说你对async和await的理解？

async/await 是基于Promise之上的一种语法糖,可以让异步操作更加简单明了,async关键字将函数标记为异步函数,异步函数就是指返回值为promise对象的函数,比如之前用到的fetch就是一个异步函数,在异步函数中我们可以调用其他的异步函数,不过我们不再需要使用then(),而是使用一个更加简洁的await语法,await会等待promise完成之后直接返回最终的结果,它提供了一种以同步方式编写异步代码的方式。

3.用过useMemo和useCallBack吗？说说你对useMemo和useCallBack的理解？

useMemo是对结果的缓存,当依赖发生变化时,才会重新计算结果

useCallBack是对一个函数的缓存,当依赖发生变化时,(对应的数据源)函数才会重新走一次,避免在每次渲染时创建新的函数.

useMemo(针对属性做操作):计算开销较大的操作：当某个操作的计算成本较高时，我们可以使用 useMemo 来缓存计算结果，并在依赖项变化时重新计算。这样可以避免重复计算，提高性能。

useCallBack(针对(点击)事件坐操作):优化子组件的渲染：当将一个回调函数作为 prop 传递给子组件时，通过使用 useCallback 缓存回调函数，可以确保子组件仅在必要时进行渲染。避免了因为父组件的重新渲染而触发不必要的子组件渲染。

4.简述一下React开发过程你所做过的关于React性能优化的一些操作？

①.memo和useMemo都是用于性能优化的工具。它们可以帮助减少不必要的渲染，并提高组件的性能,使用memo包装的组件只有在其 props 发生变化时才会重新渲染，从而提升性能

②.图片懒加载:在<img>标签的src属性中设置占位符（如空白图片），并将实际图片的URL存储在自定义的data属性中。当图片进入可视区域时，使用JavaScript动态将实际图片的URL赋值给src属性，触发图片的加载。

5.简述一下深拷贝和浅拷贝? 如何实现深拷贝和浅拷贝?

深拷贝：空间拷贝，将原空间中的数据拷贝到一份新空间，此时对新空间中的数据执行修改并不会影响空间的数据。

场景:①JSON.parse(JSON.stringify()) 方法：将对象转换为 JSON 字符串，然后再将 JSON 字符串转换回对象，从而创建一个与原始对象完全独立的副本。

         ②递归方法：利用递归可以遍历对象的所有属性，并复制它们的值以创建一个全新的对象

浅拷贝：地址拷贝，即变量中存储的是某一块空间的地址，此时变量通过简单的拷贝操作将地址拷贝给另一个变量，其中一个变量修改对应空间的数据，另一个变量也会受到影响,

场景: ①扩展运算符（...）:适用于数组和普通对象

        ②Object.assign() 方法：适用于普通对象。用于将一个或多个源对象的属性复制到目标对象。虽然它执行属性复制，但只会复制属性值的引用，而不会创建原始值的副本。

         ③:Array.concat() 方法：数组拷贝。用于将一个或多个数组与当前数组合并，返回一个新的数组。它不会修改原始数组，而是创建一个新的数组，并将原始数组和传入的数组按顺序连接起来。

6.了解防抖和节流吗?开发中你在哪些地方使用过?

防抖 是指在频繁触发某个事件时，只有等待一段时间后没有再次触发，才进行处理。

节流 是指在一段时间内，无论触发多少次事件，都只执行一次处理函数。

场景:

防抖: ①输入框搜索建议：在用户输入时，使用防抖来延迟发起请求，以减少网络请求的数量。

         ②窗口大小改变：在窗口大小改变时，使用防抖来延迟重新计算布局，以避免频繁的重绘。

节流: ①滚动事件处理：在滚动事件中，使用节流来限制触发处理函数的频率，避免过多的计算或渲染操作。

        ②频繁点击按钮：对于需要频繁点击的按钮，使用节流来限制触发处理函数的频率，避免误操作或过快的连续请求。

7. v-show 与 v-if 有什么区别？

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

8.vue请求数据放在created好还是mounted里好?

vue2.0建议放在created里
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图.
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
vue3.0放在onMounted（)组件挂载完成后执行的函数
如果在mounted钩子函数中请求数据可能导致页面闪屏问题其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了。

9.watch和computed

computed是计算属性，watch是监听一个值的变化

computed有缓存，如果依赖的属性没有变化，那么调用会从缓存中读取

computed中的函数必须要用return返回

使用场景：当一个属性受多个属性影响的时候，比如购物车商品结算。

watch没有缓存，不是必须要用return

使用场景：当一个数据影响多条数据的时候，比如搜索框搜索。

10.fetch，axios，ajax

11.权限管理

12.登录流程

13.webpack五个核心

14.vue2.0和vue3.0的区别

15.项目的打包上线流程

16.react，vue，小程序的生命周期

17.cookie，session，token，localstorage，sessionstorage

18.http和https的区别

19.状态码

20.项目难点，在另外一个笔记中详细记得有

总结：每个地区的面试题类型都不太相同，这是我在苏州杭州面试中总结的最基本的出现最频繁的面试题，希望对你们有所帮助，可能不够全面，我想到再添上去，后面的我暂时没有时间总结，你们可以自行搜索哟，有错可以指正。