数组相关题

一、数组相关的操作中有哪些是改变原数组的 api:push/unshift/pop/shift/sort/reverse/splice

1. 修改元素值：通过索引对数组元素进行赋值，会改变原数组的元素值。
2. 添加元素：使用push()、unshift()等方法在数组的末尾或开头添加新的元素，会改变原数组的长度和元素内容。
3. 删除元素：使用pop()、shift()等方法删除数组的末尾或开头的元素，会改变原数组的长度和元素内容。
4. 修改数组长度：通过设置数组的length属性来增加或减少数组的长度，会改变原数组的长度和元素内容。
5. 数组排序：使用sort()方法对数组进行排序，会改变原数组的元素顺序。
6. 数组反转：使用reverse()方法对数组进行反转，会改变原数组的元素顺序。
7. 数组切片：使用splice()方法对数组进行切片，会改变原数组的长度和元素内容。

需要注意的是，以上操作会直接在原数组上进行修改，而不会创建新的数组副本。如果需要不改变原数组的操作，可以使用一些不会改变原数组的方法，如concat()、slice()、map()等。

二、数组相关操作中有哪些是不改变原数组的

在JavaScript中，以下数组相关的操作不会改变原数组，而是返回一个新的数组或其他值： api:indexOf/concat/slice/filter/map/sort/join

1. 访问元素：通过索引读取数组元素的值，不会改变原数组。
2. 数组查找：使用indexOf()、includes()等方法来查找元素在数组中的位置或是否存在，不会改变原数组。
3. 数组拼接：使用concat()方法将多个数组合并成一个新数组，不会改变原数组。
4. 数组切片：使用slice()方法获取数组的子数组，不会改变原数组。
5. 数组过滤：使用filter()方法根据条件筛选数组元素，返回一个新数组，不会改变原数组。
6. 数组映射：使用map()方法对数组元素进行操作，返回一个新数组，不会改变原数组。
7. 数组排序：使用sort()方法对数组进行排序时，会返回一个新的排序后的数组，不会改变原数组。
8. 数组转化：使用join()方法将数组元素转化为字符串形式，toString()方法也可以实现类似效果，不会改变原数组。

这些方法不会直接在原数组上进行修改，而是返回一个新的结果。如果需要对原数组进行修改，可以使用改变原数组的方法，如splice()、push()、pop()等。

二、vuex相关的问答

1.vuex中有哪几个模块

• State（状态）：存储应用程序的所有状态数据，在此处定义状态数据的初始状态和结构。
• Mutation（突变）：用于修改状态的方法，必须是同步函数。
• Action（动作）：类似于Mutation，但可以包含异步操作，在此处操作Mutation，并非直接操作State。
• Getter（获取器）：用于从状态中派生出最新的state状态。

三、做项目过程中你有遇到什么问题，是怎么解决的。

结合自己做项目的实际状况说... 我：项目中有一个功能需求实时显示所有竞赛者的实时答题积分，初始时我选择使用webscoket来完成此功能，但在进行实际操作过程中发现webscoket的确可以实现客户端和服务端之间的双端通信，但是面对较为本项目的较为复杂功能需求时，是较难完成，因此后续我经过搜寻，发现可以使用socket.io,socket.io中的房间和命名空间机制可以完美解决这个功能，Socket.IO支持将连接组织到房间（rooms）和命名空间（namespaces）中，便于灵活的消息广播和分组管理。通过这个功能我给每个竞赛分配一个房间，将各个房间的参赛者拉入每个房间...这样就解决了这个问题。

vuex刷新数据丢失，可以直接存本地或者使用可持续性插件vuex-persistedstate

富文本编辑器显示大量文本时造成的浏览器卡顿问题：更改wangeditor编辑器为TinyMCE，虽然TinyMCE文本编辑器在引入使用上相比wangeditor而言更加复杂，但是其在基础使用上就支持大量文本的显示，在没有使用TinyMCE之前其实还用了另一个方法来解决wangeditor显示大量文本的卡顿问题，就是将大量文本切分后通过异步操作逐段添加到编辑器中，但是会造成显示问题：编辑器滚动条及显示内容会自动下滑到最底部。就这样被负责人否了这个方案，转而改用TinyMCE了

四、关于项目中的实际问题

1.登录鉴权 项目中我是用的是jwt,在用户登录后，将用户信息进行加密生成一个字符串，发给前端，前端在登录后访问各个api时携带该字符串，后端接收字符串后对字符串进行解析，验证用户登录状态，做出响应。

五、vue中组件通信

1.父子组件间通信 子组件通过props接收父组件传递的数据，通过this.$emit("事件名",数据)传递数据给父组件 父组件通过this.$on("事件名",("子组件传递数据")=>{})接收子组件传递的数据， 六、vue的生命周期和其作用

1.开始创建 2.初始化数据 3.编译模板 4.挂载Dom-》渲染 5.更新-》渲染 6.销毁 。。。 生命周期分8阶段 创建前/后 载入前/后 更新前/后 销毁前/后

1.挂载（初始化相关属性） 相关函数 beforeCreate（创建前） created(创建后) beforeMount(载入前) mounted(载入后) 2.更新（元素或组件的变更操作） 相关函数 beforeUpdate(更新前) updated(更新后)

3.销毁（销毁相关属性） beforedestroy(销毁前） destroyed(销毁后)

Vue实例的产生过程 beforeCreate在实例初始化之后，数据观测和时间配置前被调用 created在实例创建完成后被立即调用 beforeMount在挂载开始之前被调用 mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子 beforeUpdate 数据更新时调用，发生在虚拟dom打补丁之前 updated 由于数据更改导致的虚拟dom重新渲染和打补丁，在这之后会调用该狗子。

vue生命周期的作用 可以让我们在控制整个vue实例的过程时容易形成好的逻辑

第一次页面加载会触发的钩子 beforeCreate created beforeMount mounted

六、foreach相关

foreach可以终止循环吗？ 可以，可以通过(但并非正常的方式）

1.return(终止）： 可使用return语句跳出本次循环，执行下一次循环 2.break(退出整个循环） forEach无法通过正常流程(如break)终止循环，但可通过抛出异常的方式实现终止循环

var arr = [1,2,3,4,5,6] try{ arr.forEach((item) => { if (item === 3) { throw new Error('End Loop') } console.log(item) }) } catch (e) { if(e.message === 'End Loop') throw e } 输出 1 2

continue（退出当次循环）