2024前端面试题汇总（持续更新中）

℡52Hz★

已于 2024-05-28 10:03:26 修改

阅读量1k

点赞数 16

分类专栏：前端面试总结文章标签：前端 vue.js javascript css3

于 2024-04-26 14:47:50 首次发布

本文链接：https://blog.csdn.net/qq_53541336/article/details/138217329

版权

前端面试总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、css

1.css中的样式优先级顺序

！important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器

（内联样式） > （内部样式） > （外部样式）

2.如何使一个盒子水平垂直居中？

（1）flex布局：

display: flex;
align-items: center;
justify-content: center;

（2）position定位：

父元素：绝对定位

子元素：相对定位，会将元素都转为行内块

调整子元素的位置的方法：

子元素left:50%;top:50%,
   无需宽高transform:translate(-50%,-50%)
   需要宽高，margin-left/margin-top子元素宽高的一半
子元素left:0;top:0;right:0;bottom:0
   需要宽高，margin:0,auto;

（3）grid布局：

display:grid;
place-item:center;

3.CSS中有哪些隐藏页面元素的方法?

（1）利用display：none来实现

（2）利用visibility:hidden隐藏元素

（3）利用opacity:0

二、js篇

1.数组中foreach和map的区别

（1）相同点

都是循环遍历数组中的每一项。
每次执行匿名函数都支持三个参数，参数分别为item(当前每一项)，index(索引值)，arr(原数组)。
匿名函数中的this都是指向window。
只能遍历数组。

（2）不同点

map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
forEach()允许callback更改原始数组的元素，map()返回新的数组，map() 不会对空数组进行检测。

2.数组中常用的方法有哪些

（1）Array.push()，向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。

（2）Array.pop()，删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。

（3）Array.unshift()，向数组的开头添加一个或多个元素，并返回新的数组长度。原数组改变。

（4）Array.shift()，删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。原数组改变。

（5）Array.join()，将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。

3.如何获取数组中的最后一个元素

（1）pop()方法：pop()方法，删除数组最后一个元素，并返回该元素，所以利用这个方法可以取到数组的最后一个；

（2）length方法：

let arr=["1","2","3"];
console.log(  arr[ arr.length-1 ]  );    // "3"

（3）slice方法：在数组上使用slice(-1)就可以获取数组的最后一个元素了。(-1 指最后一个元素，-2 指倒数第二个元素)

let arr=["1","2","3"];
console.log(  arr.slice(-1)   );     //  ["3"]

4.let和const的区别

（1）const 用于声明一个常量，即不可改变的变量。这意味着你不能再次对常量进行赋值，否则会抛出一个错误。但是，如果常量声明的是一个对象，你仍然可以修改对象的属性。

（2）let 用于声明一个变量，允许你对变量进行重新赋值。

5.cookie和localstore和sessionstore区别

（1）相同点：cookie、sessionStorage和localStorage都用在客户端存储数据，每一个都有自己的存储和到期限制。

（2）不同点：

存储大小：cookie数据大小不能大于4K；localStorage和sessionStorage则可以达到5M
有效时间：cookie在设置的有效期内一直有效；localStorage存储持久数据，只要不手动清除则一直存在；sessionStorage数据在当前浏览器关闭后就会被自动清除

三、vue

1.vue2和vue3的区别

（1）双向数据绑定原理不同

Vue2 的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。
Vue3 中使用ES6的Proxy API对数据代理。

（2）API 类型不同

Vue2 使用选项类型api,选项型api 在代码里分割了不同的属性：data,computed,method等。
Vue3 使用合成型api,新的合成型api 能让我们使用方法来分割，相比于旧的api 使用属性来分组，这样代码会更加简便和整洁。

（3）定义数据变量和方法不同

Vue2是把数据放到了data 中，在 Vue2中定义数据变量是data(){},创建的方法要在method:{}
Vue3 就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：1）从vue 引入 reactive；2）使用 reactive ()方法来声明数据为响应性数据；使用setup()方法来返回我们的响应性数据，从而template 可以获取这些响应性数据。

（4）生命周期钩子函数不同

Vue2 中的生命周期：beforeCreate 组件创建之前；created 组建创建之后；beforeMount 组件挂载到页面之前执行；Mounted 组件挂载到页面之后执行，beforeUpdate 组件更新之前；updated组件更新之后
Vue3 中的生命周期：setup 开始创建组件；onBeforeMount 组件挂载到页面之前执行；onMounted 组件挂载到页面之后执行；onBeforeUpdate 组件更新之前；onUpdated 组件更新之后；而且 Vue3 生命周期在调用前需要先进行引入。除了这些钩子函数外，Vue3 还增加了 onRenderTracked 和onRenderTriggered 函数。

2.v-if和v-show区别

v-if控制Dom是否存在，v-show控制样式

3.组件及通信方式有哪些

（1）父子传递

父组件通过props向下传递数据给子组件
子组件通过 $emit 和父组件通信

（2）兄弟组件传值

EventBus进行兄弟组件的传值

（3）祖孙组件传递

provide 与 inject进行祖孙组件间的传递

（4） vuex

4.路由的两种工作模式

hash 和 history区别

（1）hash

地址中永远带有#号，不美观
若以后将地址通过第三方手机app分享，若app效验严格，则地址会被标记为不合法
兼容性较好

（2）history模式

地址干净美观
兼容性和hash模式相比略差
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

5.watch和computed区别

（1）是否有缓存功能

computed是有缓存的，只有它依赖的属性值改变的时候，它才会进行计算。
watch是没有缓存功能的，只要监听的数据变化了，它就会触发相应的操作。

（2）是否支持异步

computed是不支持异步的，当computed内有异步操作的时候，它是监听不到数据变化的。
watch是支持异步操作的，适合监听路由和设置计时器等。

6.vue3中的ref和reactive的区别

（1）数据类型不同：ref用于包装JavaScript基本类型的数据（如字符串、数字、布尔值等），而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。

（2）使用方式不同：ref需要通过在模板中使用ref指令以及在JavaScript代码中使用ref函数进行创建和使用，而reactive则需要通过调用Vue.js提供的reactive函数进行包装和创建。

（3）访问方式不同：对于通过ref函数创建的响应式数据，我们可以通过.value属性来访问其实际值；而对于通过reactive函数创建的响应式对象，我们可以直接访问其属性或调用其方法。

7.为什么 vue 中定义变量的地方需要使用data函数并 return 出去？

因为不使用包裹的数据会在项目的全局可见，造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

8.在 vue 中，v-for 的 diff 算法的原理是什么？

在Vue中，v-for 的diff算法原理是能够可以自动追踪列表中项目的身份，在列表数据发生变化时（例如，项目被添加、删除或重新排序），Vue能够智能地对DOM进行更新，而不是每次都重新渲染整个列表。

9.如果 v-if 和 v-for 同时使用，哪个优先级更高？

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

10.关于 vue 的生命周期有哪些？简单描述

Vue 3中的选项式生命周期钩子基本上与Vue 2保持一致，它们都是定义在Vue实例的对象参数中的函数，它们在Vue实例的生命周期的不同阶段被调用。这里主要描述一下vue3的生命周期：

（1）onBeforeMount：对应Vue2中的beforeMount钩子，Vue实例挂载之前调用；

（2）onMounted：对应Vue2中的mounted钩子，Vue实例挂载完成后调用；

（3）onBeforeUpdate：对应Vue2中的beforeUpdate钩子，数据更新时调用，但在DOM更新前；

（4）onUpdated：对应Vue2中的updated钩子，数据更新后在DOM更新后调用；

（5）onBeforeUnmount：对应Vue2中的beforeDestroy钩子，Vue实例销毁前调用；

（6）onUnmounted：对应Vue2中的destroyed钩子，Vue实例销毁后调用。

11.关于 vuex 共有几个属性，哪里可以书写同步任务，哪里可以书写异步任务？

vuex共有5个属性，分别为：

（1）state：vuex的基本数据，用来存储变量；

（2）geeter：从基本数据(state)派生的数据，相当于state的计算属性；

（3）mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)；

（4）action：和mutation的功能大致相同，不同之处在于，Action提交的是mutation，而不是直接变更状态，Action可以包含任意异步操作；

（5）modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

同步任务可以在mutations中书写，因为mutations是直接修改状态的地方。异步任务通常在actions中书写。

12.什么事跨域，如何解决跨域问题？

跨域：跨域就是当在页面上发送ajax请求时，由于浏览器同源策略的限制，要求当前页面和服务端必须同源，也就是协议、域名和端口号必须一致。

解决方案：

Node中间件跨域(http-proxy-middleware)，两次跨域。同源策略是浏览器需要遵循的标准，而服务器向服务器发送请求则无需遵循同源策略，使用一个代理服务器，设置Access-Control-Allow-Origin等字段便可以解决浏览器和代理服务器之间的跨域问题，而服务器之间没有限制，便实现了浏览器和服务器之间跨域通信，并且可以实现代理多个请求到不同的服务器。
nginx反向代理。实现原理和node中间件代理类似，只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，可修改cookie信息