2026年web前端常见的面试题及答案

2026年web前端常见的面试题及答案考试时长：120分钟满分：100分一、单选题（总共10题，每题2分，总分20分）1.在React中，以下哪个钩子用于在组件挂载后执行副作用操作？A.useStateB.useEffectC.useContextD.useReducer2.CSS中，如何实现一个元素水平垂直居中？A.display:flex;justify-content:center;align-items:center;B.position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);C.margin:0auto;D.A和B均可3.以下哪个HTTP状态码表示请求成功？A.404B.500C.200D.3024.WebP格式相比JPEG有哪些优势？A.更高的压缩率B.更好的兼容性C.支持透明背景D.以上都是5.在Vue中，如何定义一个响应式数据？A.constdata=reactive({count:0});B.letdata={count:0};C.data:{count:0}incomponentoptionsD.A和C均可6.以下哪个CSS选择器优先级最高？A.#idB..classC.elementD.!important7.Websocket协议与HTTP协议的主要区别是什么？A.Websocket是持久连接B.Websocket支持跨域C.Websocket传输效率更高D.以上都是8.在JavaScript中，以下哪个方法用于数组去重？A.filter()B.map()C.indexOf()D.unique()9.CSSGrid布局与Flexbox布局的主要区别是什么？A.Grid支持二维布局B.Flexbox更灵活C.Grid性能更好D.A和B均正确10.在TypeScript中，如何定义一个接口？A.interfaceUser{name:string;}B.typeUser={name:string;}C.constUser={name:string;}D.enumUser{name:string;}二、填空题（总共10题，每题2分，总分20分）1.CSS中，使用________属性可以控制元素的显示模式（块级/行内）。2.JavaScript中，________是单线程的，执行同步代码时阻塞主线程。3.React中，________钩子用于在组件卸载时清理副作用。4.HTTP请求方法中，________用于获取资源。5.CSS中，________属性用于设置元素的外边距。6.Websocket协议的端口通常是________。7.Vue中，使用________指令可以绑定DOM事件。8.TypeScript中，________关键字用于声明一个不可变对象。9.CSS中，________选择器匹配所有类名为.class的元素。10.JavaScript中，________方法用于将JSON字符串解析为对象。三、判断题（总共10题，每题2分，总分20分）1.CSS中，flex-grow属性控制Flex子项的伸缩比例。（正确）2.WebP格式不支持动画。（错误）3.JavaScript中，undefined和null是相等的。（错误）4.React中，useState钩子可以用于异步操作。（正确）5.CSSGrid布局不支持嵌套。（错误）6.Websocket协议需要建立HTTP握手阶段。（正确）7.TypeScript中，interface和type可以互相替代。（错误）8.CSS中，z-index只影响定位元素。（正确）9.JavaScript中，闭包可以访问外部函数的变量。（正确）10.Vue中，v-for指令需要使用key属性优化性能。（正确）四、简答题（总共4题，每题4分，总分16分）1.简述React中的虚拟DOM是什么及其优势。答：虚拟DOM是React的核心概念，是内存中的DOM表示。优势包括：减少实际DOM操作、提高性能、跨平台支持。2.解释CSS中盒模型（box-sizing）的两种模式及其区别。答：content-box模式（默认）不包含padding和border；border-box模式包含padding和border，实际宽高固定。3.描述Websocket协议的工作流程。答：1.客户端发送HTTP请求并包含Sec-WebSocket-Key头；2.服务器响应并生成响应头；3.双方通过base64算法建立WebSocket连接。4.解释JavaScript中的异步编程及其三种实现方式。答：异步编程允许非阻塞操作，方式包括：回调函数、Promise、async/await。五、应用题（总共4题，每题6分，总分24分）1.编写一个React组件，实现一个计数器功能，包含+1和-1按钮。答：```jsxfunctionCounter(){const[count,setCount]=useState(0);return(<div><p>{count}</p><buttononClick={()=>setCount(c=>c+1)}>+1</button><buttononClick={()=>setCount(c=>c-1)}>-1</button></div>);}```2.用CSS实现一个响应式布局，在小屏幕上显示一行，大屏幕显示两行。答：```css.container{display:flex;flex-wrap:wrap;gap:10px;}.item{flex:11300px;margin-bottom:10px;}@media(min-width:768px){.item{flex:1150%;}}```3.编写JavaScript代码，实现一个函数，接收一个数组，返回新数组，其中重复元素只保留第一次出现的元素。答：```javascriptfunctionuniqueArray(arr){return[...newSet(arr)];}```4.用Vue实现一个表单，包含用户名和密码输入框，提交时显示输入内容。答：```vue<template><form@submit.prevent="submitForm"><inputv-model="username"type="text"placeholder="用户名"><inputv-model="password"type="password"placeholder="密码"><buttontype="submit">提交</button></form></template><script>exportdefault{data(){return{username:'',password:'',};},methods:{submitForm(){alert(`用户名：${this.username}\n密码：${this.password}`);},},};</script>```【标准答案及解析】一、单选题1.B解析：useEffect用于副作用操作，useState用于状态管理，useContext用于上下文，useReducer用于复杂状态逻辑。2.D解析：flex布局和绝对定位均可实现居中，但flex更简洁。3.C解析：200表示成功，404表示未找到，500表示服务器错误，302表示重定向。4.D解析：WebP压缩率更高、支持透明、兼容性好。5.D解析：reactive和componentoptions均可定义响应式数据。6.D解析：!important优先级最高，其他按ID、类、标签、内联顺序。7.A解析：Websocket是持久连接，支持全双工通信。8.A解析：filter配合indexOf实现去重。9.D解析：Grid支持二维，Flexbox更灵活。10.A解析：interface是TypeScript的接口关键字。二、填空题1.display解析：控制元素显示模式。2.主线程解析：JavaScript单线程执行同步代码。3.useEffect解析：用于组件挂载后副作用。4.GET解析：GET用于获取资源。5.margin解析：控制元素外边距。6.80解析：Websocket默认端口80或443。7.v-on解析：绑定DOM事件。8.readonly解析：声明不可变对象。9..class解析：匹配类名为.class的元素。10.JSON.parse解析：解析JSON字符串。三、判断题1.正确解析：flex-grow控制伸缩比例。2.错误解析：WebP支持动画格式。3.错误解析：undefined和null不相等。4.正确解析：useState可处理异步更新。5.错误解析：Grid支持嵌套布局。6.正确解析：需HTTP握手建立连接。7.错误解析：interface和type用途不同。8.正确解析：z-index只影响定位元素。9.正确解析：闭包可访问外部变量。10.正确解析：v-for需key优化性能。四、简答题1.虚拟DOM是React在内存中的DOM表示，通过diff算法最小化实际DOM操作，提高性能和跨平台能力。2.content-box模式下元素宽高只包含内容，border和padding在外；border-box模式下宽高包含所有内容，实际尺寸固定。3.Websocket流程：客户端发送HTTP请求并附加Sec-WebSo