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.Web前端性能优化中，以下哪项最能有效减少页面加载时间？A.压缩图片B.使用CDNC.代码懒加载D.以上都是5.在Vue.js中，如何定义一个响应式数据？A.constdata={count:0};B.this.$data.count=0;C.Vue.set(this,'count',0);D.A和B均可6.以下哪个CSS选择器优先级最高？A.#idB..classC.elementD.A和B优先级相同7.WebP格式相比JPEG有哪些优势？A.更高的压缩率B.更好的兼容性C.更快的加载速度D.以上都是8.在JavaScript中，以下哪个方法用于删除数组中的最后一个元素？A.push()B.pop()C.shift()D.splice()9.以下哪个是前端构建工具？A.WebpackB.Node.jsC.GitD.React10.在响应式设计中，以下哪个单位最适合用于布局？A.pxB.emC.remD.%二、填空题（总共10题，每题2分，总分20分）1.CSS中，用于控制元素显示隐藏的属性是__________。2.JavaScript中，用于判断两个值是否相等的运算符是__________。3.React中，用于管理组件内部状态的钩子是__________。4.HTTP协议中，表示“请求超时”的状态码是__________。5.CSS中，用于设置元素透明度的属性是__________。6.Web前端中，用于缓存静态资源的协议是__________。7.Vue.js中，用于监听数据变化的指令是__________。8.JavaScript中，用于创建新数组的函数是__________。9.CSS中，用于实现动画效果的属性是__________。10.WebP格式中，支持的无损压缩算法是__________。三、判断题（总共10题，每题2分，总分20分）1.CSS中，flex布局只能用于一维布局。（×）2.JavaScript中，undefined和null是相等的。（×）3.React中，函数组件不能使用hooks。（×）4.HTTP协议中，301表示永久重定向。（√）5.CSS中，margin和padding都是可继承的。（×）6.Web前端中，CDN可以提高网站的全球访问速度。（√）7.Vue.js中，v-for指令用于循环渲染列表。（√）8.JavaScript中，闭包可以访问外部函数的变量。（√）9.CSS中，animation属性可以设置动画的持续时间。（√）10.WebP格式不支持动画。（×）四、简答题（总共4题，每题4分，总分16分）1.简述React中的组件生命周期。答：React组件的生命周期分为三个阶段：-挂载阶段：包括constructor、render、componentDidMount；-更新阶段：包括componentDidUpdate；-卸载阶段：包括componentWillUnmount。2.解释CSS中的盒模型及其组成部分。答：CSS盒模型包括：-内容(content)：元素的实际内容；-边框(border)：围绕内容的边框；-外边距(margin)：元素与其他元素的外部空间；-内边距(padding)：内容与边框之间的空间。3.简述HTTP请求的方法及其用途。答：常见的HTTP请求方法包括：-GET：用于获取资源；-POST：用于提交数据；-PUT：用于更新资源；-DELETE：用于删除资源。4.解释什么是响应式设计及其核心原理。答：响应式设计是指网页能够根据不同设备的屏幕尺寸自动调整布局。核心原理包括：-使用媒体查询(mediaquery)根据屏幕尺寸应用不同的CSS规则；-使用相对单位如rem、em、%等；-使用flexbox或grid布局实现灵活的布局。五、应用题（总共4题，每题6分，总分24分）1.请写出使用CSS实现一个3列等宽布局的代码。答：```css.container{display:flex;}.column{flex:1;margin:010px;}```2.请写出JavaScript代码，实现一个函数，接收一个数组，返回数组中所有偶数的平方。答：```javascriptfunctionevenSquares(arr){returnarr.filter(num=>num%2===0).map(num=>numnum);}```3.请写出Vue.js代码，实现一个组件，包含一个输入框和一个按钮，输入框的内容实时显示在页面上。答：```html<template><div><inputv-model="inputValue"placeholder="输入内容"/><p>显示内容：{{inputValue}}</p></div></template><script>exportdefault{data(){return{inputValue:''};}};</script>```4.请写出React代码，实现一个组件，包含一个计数器，每次点击按钮，计数器加1。答：```jsximportReact,{useState}from'react';functionCounter(){const[count,setCount]=useState(0);return(<div><p>计数器：{count}</p><buttononClick={()=>setCount(count+1)}>点击加1</button></div>);}exportdefaultCounter;```【标准答案及解析】一、单选题1.B解析：useEffect用于在组件挂载后执行副作用操作。2.D解析：display:flex和position:absolute均可实现水平垂直居中。3.C解析：200表示请求成功。4.D解析：压缩图片、使用CDN、代码懒加载均能有效减少页面加载时间。5.D解析：constdata和this.$data均可定义响应式数据。6.A解析：#id选择器优先级最高。7.D解析：WebP格式具有更高的压缩率、更好的兼容性和更快的加载速度。8.B解析：pop()用于删除数组最后一个元素。9.A解析：Webpack是前端构建工具。10.C解析：rem单位适合用于响应式布局。二、填空题1.display解析：display属性控制元素显示隐藏。2.===解析：===用于判断两个值是否完全相等。3.useState解析：useState钩子用于管理组件内部状态。4.408解析：408表示请求超时。5.opacity解析：opacity属性设置元素透明度。6.HTTP解析：HTTP协议用于缓存静态资源。7.v-model解析：v-model用于监听数据变化。8.Array.from解析：Array.from用于创建新数组。9.animation解析：animation属性实现动画效果。10.Zlib解析：WebP格式使用Zlib无损压缩算法。三、判断题1.×解析：flex布局支持一维和二维布局。2.×解析：undefined和null不相等。3.×解析：函数组件可以使用hooks。4.√解析：301表示永久重定向。5.×解析：margin和padding不可继承。6.√解析：CDN可以提高全球访问速度。7.√解析：v-for用于循环渲染列表。8.√解析：闭包可以访问外部函数变量。9.√解析：animation属性可设置动画持续时间。10.×解析：WebP格式支持动画。四、简答题1.解析：React组件的生命周期分为挂载、更新和卸载三个阶段，每个阶段包含不同的钩子函数，用于执行特定的操作。2.解析：盒模型包括内容、边框、外边距和内边距，这些部分共同决定了元素的大小和布局。3.解析：HTTP请求方法包括GET、POST、PUT、DELETE等，分别用于获取、提交