2023前端面试时遇到的面试题

2023前端面试时遇到的面试题

1.数组有哪些方法

push、pop、unshift、shift、join、forEach、filter、map、find…

2.filter和some返回的分别是一个什么

filter返回的是一个数组，some返回的是一个布尔值

3.es6新增了哪些方法

let和cconst、模板字符串（ ）、扩展运算符、for…of 、解构、箭头函数、symbol数据类型、Set和Map方法等

4. 箭头函数和普通函数的区别

1.箭头函数不能使用new
2. 箭头函数自己本身是没有this指向的，它只能继承this指向，而且一旦继承之后，this的指向是不可更改的
3. 箭头函数没有arguments这个参数
4. 不能使用apply、call、bind来修改this的指向

5.vuex是什么

Vuex 是专门为 Vue.js 设计的状态管理库,用来存储vue中各个组件之间的状态

6. 怎么修改vuex中的状态，在组件中用什么方法

1. vuex一共有5个部分state、mutation、action、getter、modules，在vuex中的state里面存储一个状态之后，使用mutation里面设置一个函数，函数会有两个参数，其中state参数指向vuex里面state，第二个参数就是要修改的，然后在组件中调用这个方法，将要修改的状态传入到vuex中
2. 使用this.$store.commit方法来调用（调用mutation里面的方法），this.$store.dispatch（调用action里面的方法）

7. 当一个组件面调用了某个状态并更改了，怎么让使用了这个状态的所有的都更改（不知道是不是我记错了，搞忘记是不是这么问的了）

使用mutation来进行监听，必须通过mutation中的方法来更改。因为只有通过mutation更改的变量我们才能通过devtools跟踪变量状态的变更路径，方便回溯。

8.浏览器如何进行渲染的

1.处理 HTML 并构建 DOM 树。
2.处理 CSS 构建 CSSOM 树。
3.将 DOM 与 CSSOM 合并成一个渲染树。
4.根据渲染树来布局，计算每个节点的位置。
5.调用 GPU 绘制，合成图层，显示在屏幕上。

9.Set和Map方法有什么作用

Set：用于存放不重复的数据；
应用：求两个数组的并集、交集、差集，要求：不能出现重复项，得到的结果是一个新数组
Map: 键值对数据集合的特点：键不可重复，map集合专门用于存储多个键值对数据
应用：描述一个整体，且属性不能随意添加和删除 适合对象，有一些数据，可能随意增加，删除，多一个少一个没问题，适合map

10. 动态路由是怎么实现的

动态路由通常是用来做权限，登陆成功后将获取到的动态路由存储到vuex，然后将这个动态路由引入到router.js中，然后使用路由的addRouter来将这个动态路由增加到路由表中

11.假如在地址栏随便输入一个地址，然后404了怎么跳转呢

在router.js里面设置一个静态路由表，将不需要动态路由的路由添加到静态路由表中，例如说登录页，和报错的404页面等，当在地址栏中随便输入一个地址，报404之后就让他跳转到404的那个路由上去

12. 路由守卫是干什么

路由守卫最常用的的就是登录的时候判断是否带有token，没有带token就不让他登录

13. 路由守卫有几个参数，分别代表什么

一共有3个参数，from、to、next，from代表是即将要离开的路由对象；to代表即将要去的路由对象；next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径

14. 其中from是代表什么

from代表是即将要离开的路由对象

15. vueRouter有哪些参数（这个当时没答上）

16.是否封装过axios，能否讲一讲如何封装的

我在网上找了一篇，可以观看：
https://blog.csdn.net/m0_60531448/article/details/124037621?ops_request_misc=&request_id=&biz_id=102&utm_term=axios%E5%A6%82%E4%BD%95%E5%B0%81%E8%A3%85&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-124037621.142^v73pc_search_v2,201^v4add_ask,239^v2insert_chatgpt&spm=1018.2226.3001.4187

17. 我看你这个项目上面有一个股市行情，请问时使用的什么技术呢

这个使用的uniapp结合echarts来实现的，将各项数据以图形的形式展现出来的

18. 我看你有很多echarts项目，问一下在echarts当数据更新之后，图形不更新怎么办呢

1. 发送请求获取数据以后重新定义Echarts的series中的data值或者value值。(网上看到的方法)
2. 在要再次渲染的时候将上一次绘制的图形使用 this.chart.dispose()先销毁之后再重新渲染 （我的方法）