2024高频前端面试题（含答案）

大家好，欢迎来到IT知识分享网。

一、简单页面

1、CSS选择器样式优先级
2、CSS实现三列布局（左右固定宽度，中间自适应）
在 CSS 中，实现一个三列布局，其中左右两列宽度固定，中间列自适应，通常使用 flexbox 或者 grid 布局可以轻松完成。这里分别给出两种方法：

方法一：Flexbox布局

.container { 
    display: flex; } .column-left { 
    width: 200px; /* 左侧固定宽度 */ background: #f1f1f1; } .column-right { 
    width: 200px; /* 右侧固定宽度 */ background: #f1f1f1; } .column-middle { 
    flex: 1; /* 中间自适应，占用剩余空间 */ background: #ffffff; } 

HTML 示例：

<div class="container"> <div class="column-left">左侧栏</div> <div class="column-middle">中间栏</div> <div class="column-right">右侧栏</div> </div> 

方法二：Grid布局

.container { 
    display: grid; grid-template-columns: 200px auto 200px; /* 左右固定，中间自适应 */ } .column-left { 
    background: #f1f1f1; } .column-right { 
    background: #f1f1f1; } .column-middle { 
    background: #ffffff; } 

HTML 示例：

<div class="container"> <div class="column-left">左侧栏</div> <div class="column-middle">中间栏</div> <div class="column-right">右侧栏</div> </div> 

.left{ width:200px; 或者 flex:0 0 200px; } .right{ width:200px; 或者 flex:0 0 200px; } .center{ flex:1; } 

3、如果要做优化，CSS提高性能的方法有哪些？
内联首屏关键CSS
异步加载CSS
资源压缩
合理使用选择器
减少使用昂贵的属性
不要使用@import

二、js

1、防抖和节流，应用场景
防抖和节流都是防止某一时间频繁触发，但是原理却不一样。
防抖是将多次执行变为只执行一次，节流是将多次执行变为每隔一段时间执行。
防抖(debounce)：
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流(throttle)：
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
2、什么是闭包
「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
3、继承有哪些方法
原型链继承
借用构造函数继承（伪造对象、经典继承）
实例继承（原型式继承）
组合式继承
寄生组合继承
es6继承 extends
4、什么是深/浅拷贝，有哪些实现方式
基本数据类型：string、number、boolean、undefined、null、Symbol（ES6，符号类型）
引用数据类型：object、array、function
JS数据类型分为基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。
JSON字符串转换为JSON对象：

var obj = str.parseJSON();//将JSON字符串转换为JSON对象 var obj = JSON.parse(str);// 将字符串转换为JSON对象 

将JSON对象转化为JSON字符串：

var str = JSON.stringify(obj); var str = obj.toJSONString(); 

Object.assign：对象的合并 （第一级属性深拷贝，第一级以下的级别属性浅拷贝。）
ES6中的 Object.assign()，第一个参数必须是个空对象。
Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

let obj1 = { a: { b: 1}, c: 2 } let obj2 = Object.assign({},obj1) obj2.a.b = 3; //第二层，obj1变了，是浅拷贝 obj2.c = 3; //第一层，obj1不变，是深拷贝 console.log(obj1); console.log(obj2); 

5、数组有哪些常用方法，引出下一个问题,slice和splice区别：

1.splice改变原数组，slice不改变原数组。2.splice除了可以删除之外，还可以插入。3.splice可传入3个参数，slice接受2个参数。

6、Promise.all和Promise.race的区别，应用场景

7、微任务和宏任务的区别

1、Vue中的的通信方式有几种？隔代组件的通信你用那种方式解决？

props/$emit适用父子组件通信
ref与parent/children适用父子组件通信
attrs/listeners,provide/inject 适用于隔代组件通信
vuex,EventBus(事件总线)适用于父子、隔代、兄弟组件通信
slot插槽方式

2、v-show 和 v-if指令的共同点和不同点？

v-show是css切换，v-if是完整的销毁和重新创建，如果频繁切换时用v-show，运行时较少改变用v-if

3、为什么使用key？

做一个唯一标识， Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。

4、简述computed和watch的使用场景

computed:
支持缓存，数据变，直接会触发相应的操作；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；即一个属性受多个属性影响，多对一或者一对一的关系；
监听的是这个属性自身的变化，且不会操作缓存
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
是一个计算属性,类似于过滤器,对绑定到view的数据进行处理
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的例子： 购物车商品结算的时候
watch:
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行
watch是一个观察的动作
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　例子：搜索数据

5、params和query的区别（怎么定义 vue-router 的动态路由? 怎么获取传过来的值？）

6、$route 和 $router 的区别

8、vue-router 有哪几种导航钩子?

9、Vue实例的生命周期讲一下, mounted阶段真实DOM存在了嘛?

11、vuex有哪几种属性，怎么使用？哪种功能场景使用它？

12、vuex中state存储的数据如果页面刷新此时数据还会有吗?（刷新之后销毁了）

13、v-bind和v-model的区别， v-model原理知道吗？

//语法糖写法 <input type="text" v-model="name" > //还原为以下实例 <input type="text" v-bind:value="name" v-on:input="name=$event.target.value"> 

14、Vue中的常见指令有那些？

v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot…

15.改变this指向call、apply与bind区别：

16,vue路由的两种模式

17，vue的响应式原理：

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 数据劫持，来劫持各个属性的setter，getter，在数据更新时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {
{}}），

最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

18.Flex容器属性

1.flex-direction主轴方向（row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。） 2.flex-wrap（nowrap（默认值）：不换行。 wrap：换行。 wrap-reverse：换行，第一行在下方。 ） 3.flex-flow（12简写形式） 4.justify-content项目在主轴上的对齐方式。（flex-start（默认值）：左对齐（即上面页面展示效果） flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。） 5.align-items项目在交叉轴上如何对齐。（lex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。） 6.align-content 

19.标准盒模型和怪异盒模型的区别：

20.vue的插槽（slot）主要分三种：

21.vue自定义指令：

自定义指令通常包含两个部分：v-前缀和指令名称，它们分别用于标记指令的使用和指令本身的定义。

1. v-指令前缀：这是 Vue 的标志，告诉 Vue 这是一个自定义指令，Vue 将会解析并处理这个前缀。
2. 指令名称：是你为这个特殊行为起的名字，比如 v-my-directive。
3. 指令实现：通常分为两个部分：
   • 指令表达式（v-my-directive="expression"）：这里定义了当指令被激活时关联的计算属性或方法。
   • 指令选项（如 v-my-directive="{ method: 'myMethod', twoWay: true }"）：可以提供额外配置，例如是否双向绑定数据、触发哪个方法等。
     在Vue.js中，声明一个自定义指令可以帮助你在模板中添加更丰富的功能，比如处理元素的交互或修改数据。以下是在Vue中声明一个自定义指令的基本步骤：
     

1. 定义指令：

• 使用Vue.directive()方法创建一个指令对象。这个对象包含两个属性：bind和update（可选），分别表示指令被绑定到元素上和元素的数据变化时的钩子。

Vue.directive('my-directive', { 
    bind(el, binding, vnode) { 
    // 当指令第一次被绑定时执行的代码 console.log('Bound:', el, binding.value); }, update(el, binding, vnode) { 
    // 当指令绑定的值发生变化时执行的代码 console.log('Updated:', el, binding.value); } }); 

2. 指令绑定：

• 在模板中使用自定义指令，使用v-前缀加上自定义指令名称，后跟属性名（通常是表达式）。

<div v-my-directive="someValue">这是指令的绑定位置</div> 

3. 示例中的参数：

• el：被指令作用的DOM元素。
• binding：一个对象，包含了指令相关的配置信息，如value、expression等。
• vnode：虚拟节点，提供了更多关于组件的信息。

22.常用的git命令

git config 用法：git config –global user.name “[name]” 用法：git config –global user.email “[email address]” git init 用法：git init [repository name] 该命令可用于创建一个新的代码库 git clone 用法：git clone [url] 该命令可用于通过指定的URL获取一个代码库。 git add 添加文件到仓库 git status 查看仓库当前的状态，显示有变更的文件。 git diff 比较文件的不同，即暂存区和工作区的差异。 git commit 提交暂存区到本地仓库。 git reset 回退版本。 git push 用法：git push [variable name] master 该命令可以将主分支上提交的变更发送到远程代码库。 

23.数组和字符串的相互转换

24.js 判断数据类型的几种方法

typeof str // "string" 字符串 typeof num // "number" 数值 typeof array // "object" 对象（可以和函数区别开） // 👆注意，数组也是一个对象 typeof date // "object" 对象 typeof func // "function" 函数 typeof symbol // "symbol" 

25.toString 方法

把对象直接转换成字符串

26.es6新特性：

1、let 和 const let 表示申明变量。const 表示申明常量 常量定义了就不能改了。对象除外，因为对象指向的地址没变。 const在申明是必须被赋值。 两者都为块级作用域。 2、模板字符串 3、解构 4、函数的默认值 5、Spread / Rest 操作符，三个点… 6、箭头函数 7、for of for of遍历的是键值对中的值 for in遍历的是键值对中的键 8、class类，原型链的语法糖表现形式 9、导入导出 导入improt 导出export default 10、promise Promise 用于更优雅地处理异步请求。 11、async/await 比promise更好的解决了回调地狱 12、Symbol，新的基本类型 13、Set集合 存储任何类型的唯一值，即集合中所保存的元素是不重复的。类数组结构。 let arrNew = new Set(待去重的数组) 

27.webpack

1、webpack的作用是什么，谈谈你对它的理解？
现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决Scss，Less……新增样式的扩展写法的编译工作。
所以现代化的前端已经完全依赖于webpack的辅助了。
现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。
react.js+WebPack
vue.js+WebPack
AngluarJS+WebPack
2、webpack的工作原理?
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
3、webpack打包原理
把一切都视为模块：不管是 css、JS、Image 还是 html 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。
按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载
4、webpack的核心概念
Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
output ：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
5、Webpack的基本功能有哪些？
代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化：压缩 JavaScript、CSS、html 代码，压缩合并图片等
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
6、gulp/grunt 与 webpack的区别是什么?
三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。grunt和gulp是基于任务和流（Task、Stream）的。
类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。webpack是基于入口的。
webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。
7、webpack是解决什么问题而生的?
如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱，因为它们存在依赖关系，同时对于ES6+等新的语法，less, sass等CSS预处理都不能很好的解决……，此时就需要一个处理这些问题的工具。

28.MVVM模式

1、MVVM相比较于MVP，将Presenter变成ViewModel，ViewModel可以理解成是View的数据模型和Presenter的合体 2、MVVM中的数据可以实现双向绑定，即View层数据变化则ViewModel中的数据也随之变化，反之ViewModel中的数据变化，则View层数据也随之变化` 注：MVC指的是Model-View-Controller，分别代表着模型层、视图层、控制器。 

29.原型链

当js试图得到一个对象的属性时，会先去这个对象的本身去寻找，如果这个对象本身没有找到这个属性，那么js就会去它构造函数的’prototype’属性中去寻找,也就是去’proto‘中寻找，如果’prototype’属性本身中依旧没有找到，’prototype’中依旧有一个‘proto’。

30.闭包

31.Vue和React的区别是什么？

一、核心思想不同 Vue是一个灵活易用的渐进式双向绑定的MVVM框架。 React的核心思想是声明式渲染和组件化、单向数据流，React既不属于MVC也不属于MVVM架构。 注：React的单向数据流指的是数据主要从父节点通过props传递到子节点， 如果顶层某个props改变了，React会重新渲染所有的子节点，但是单向数据流并非单向绑定， React想要从一个组件去更新另一个组件的状态，需要进行状态提升，即将状态提升到他们最近的 祖先组件中，触发父组件的状态变更，从而影响另一个组件的显示。单向数据流的好处是能够保证 状态改变的可追溯性，假如，父组件维护了一个状态，子组件如果能够随意更改父组件的状态，那 么各组件的状态改变就会变得难以追溯 二、组件写法上不同 Vue的组件写法是通过template的单文件组件格式。 React的组件写法是JSX+inline style，也就是吧HTML和CSS全部写进JavaScript中。 三、Diff算法不同 Diff算法是一种对比算法，主要是对比旧的虚拟DOM和新的虚拟DOM，找出发生更改的节点，并只 更新这些接地那，而不更新未发生变化的节点，从而准确的更新DOM，减少操作真实DOM的次数， 提高性能。 vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删 除重建，但是react则会认为是同类型的节点，只会修改节点属性。 vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次比对的方式，当一个集合只 是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点 移动到最后一个，从这点上来说vue的对比方式更加高效。 四、响应式原理不同 React的响应式原理 React主要是通过setState()方法来更新状态，状态更新之后，组件也会重新渲染。 Vue的响应式原理 vue会遍历data数据对象，使用Object.definedProperty()将每个属性都转换为getter和 setter，每个Vue组件实例都有一个对应的watcher实例，在组件初次渲染的时候会记录组件用到 了那些数据，当数据发生改变的时候，会触发setter方法，并通知所有依赖这个数据的watcher实 例调用update方法去触发组件的compile渲染方法，进行渲染数据。 

32. rem的特点：

33.http请求过程

浏览器发起请求-> 解析域名得到ip进行TCP连接 ->浏览器发送HTTP请求和头信息发送->服务器对浏览器进行应答，响应头信息和浏览器所需的内容-> 关闭TCP连接或保持-> 浏览器得到数据数据进行操作。

34.前端如何实现跨域？

// vue.config.js中配置代理 devServer:{ 
    proxy:"http://localhost:5000" } // 使用代理 axios.get('http://localhost:8080/students').then( response => { 
    console.log('请求成功了',response.data) }, error => { 
    console.log('请求失败了',error.message) } ) 

35.vue 中的 keep-alive

36.vue.nextTick()方法

this.$nextTick(function(){ 
    console.log(that.$refs.aa.innerText); //输出：修改后的值 }) 

什么时候需要用的Vue.nextTick()？
1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
2.vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码

37.em的特点：

38.js事件循环机制

JavaScript的事件循环（Event Loop）是其异步执行的核心机制之一，用于处理非阻塞I/O操作和回调函数。简单来说，它是浏览器或Node.js环境中的一个重要调度器，负责监听并管理任务队列。

1. 任务队列：分为两种类型：宏任务（macro-task）和微任务（micro-task）。宏任务包括setTimeout、setInterval、DOM操作、网络请求等；微任务如Promise.resolve、MutationObserver等。
2. 执行栈：当前正在运行的同步代码所构成的栈。
3. 事件循环过程：
   • 执行栈中的同步代码执行完毕后，会检查是否有微任务，如果有则先执行微任务直到队列为空。
   • 接着，执行下一个宏任务。这个过程中如果遇到新的微任务，会插入到微任务队列中，并继续执行当前宏任务。
   • 当宏任务完成，再次检查微任务队列，如有微任务，则执行它们，如此反复。
4. 轮询检测：事件循环不是被动等待，而是通过定期的轮询检查是否有可执行的任务。

了解了事件循环机制有助于优化异步代码，避免阻塞UI线程，提高应用性能。相关问题：