Web前端最新2024前端社招面试题总结，web前端应届生面试题

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

通过 mapAction 异步提交事件到 action,action 通过 commit 提交到 mutation,然后 mutation会修改 state 中的值，getters 获取state 状态，然后页面中引入 getters 获取更新状态

Mutation 必须是同步的，如果需要异步就要使用 action

action 中使用 this. s t o r e . c o m m i t 进 行 同 步 修 改 ， 使 用 t h i s . store.commit 进行同步修改，使用 this. store.commit进行同步修改，使用this.store.dispatch 进行异步修改

mutation 与 action 区别：

Mutation 第一个参数是 state，是改变状态，里边是同步操作。action 是提交mutation,里边可以异步操作

调用 mutation ：

1.引入 mapMutations函数，

methods:{

…mapMutations([‘add’,‘addN’]);

}

this.add()

2.触发 action

Vue渲染过程：

---

1. new Vue，执行初始化

2. 挂载$mount方法，通过自定义Render方法、template、el等生成Render函数

3. 通过Watcher监听数据的变化

4. 当数据发生变化时，Render函数执行生成VNode对象

5. 通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

Vue-router如何实现无刷新跳转

---

前端路由分为两种模式，分别是hash模式和history模式

hash模式

原理实现是通过监听hashchange的改变进行无刷新渲染

history模式

原理通过调用history.pushState（无刷新插入历史状态，更新url）更新url，并且监听popstate回退键事件进行渲染

vue dom diff算法：

---

先比较dom树，如果有组件不存在了直接销毁；然后比较组件，最后比较element节点，返回一个patch节点包含两个虚拟dom的差异进行渲染

箭头函数与普通函数区别

---

1.写法不一样

2.箭头函数都没有名字

3.this指向不一样，普通 函数作用域为调用它的对象，箭头函数为当前上下文（如声明在全局那么this的作用域即为上下文）

4.箭头函数不能使用New 实例化

算法时间复杂度：

---

1.没有循环等复杂结构的都是O（1）

2.有一层循环，算法的性能会随着输入数据的大小变化而线性变化的是O(n)

3.有多层循环，算法性能随着数据呈现数次增长，算法性能为O(n2)、O(n3)、O(n^4)

call、apply、bind含义与区别

---

http 状态码

---

204 无内容，服务器成功处理但未返回内容

205 重置内容，提醒用户刷新

301 页面永久重定向

302页面临时重定向

303 查看其他地址，使用 get post

304该资源未更新

400客户端请求语法错误

404找不到服务器

500服务器内部错误

前端缓存

---

分为强制缓存和协商缓存，浏览器读取缓存过程为内存-硬盘-服务器缓存

1.强制缓存：Cache-control和expries

Expries 是对比客户端和服务器时间差异，比较缓存是否过期，值为一个时间绝对值

Cache-control相对时间，如300S

2.协商缓存

强制缓存失效后，浏览器携带缓存标识请求服务器，由服务器缓存标识决定是否使用缓存

Last-modified/If-modified-since上次请求返回的最后被修改时间,检查服务器资源是否被更新

Etag/If-node-since返回校验码，etag 保证每个资源都是唯一的

react 生命周期

---

vue keep-alive

---

vue event-bus

---

Nuxt 是如何运行、渲染的

---

react、vue 如何选型

---

React 适用于大型工程、多人协作工作，和 ts 配合更好

node、vue、webpack 是什么关系

---

Vue 本身不依赖webpack，但 vue-cli 里边的webpack环境 依赖 node 开发出来的，webpack 是依赖 node 的

移动端跨平台使用 react native

javascript 常见设计模式

---

单例模式

工厂模式

发布订阅模式

node+express

---

script 标签属性

---

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

---

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

[外链图片转存中…(img-GVi7Oocd-1715899707269)]

[外链图片转存中…(img-oyDjbNde-1715899707269)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】