Web前端开发笔试真题（含详细答案解析）

Web前端开发笔试真题（含详细答案解析）考试说明：本试卷适配初级、中级Web前端开发岗位招聘笔试，涵盖HTML、CSS、JavaScript、ES6+、浏览器原理、网络基础、前端工程化等核心考点，题型贴合企业真实出题风格，难度适配职场招聘，答案解析通俗实用，侧重实战应用。总分：100分考试时长：90分钟一、单项选择题（每题3分，共30分）1.以下不属于HTML5新增标签的是（）A.headerB.footerC.divD.article答案：C解析：div是HTML4及更早版本的通用区块标签，不属于HTML5新增语义化标签。header、footer、article均为HTML5核心语义化标签，分别用于定义页头、页脚、文章主体内容。2.CSS中，以下选择器优先级最高的是（）A.类选择器B.ID选择器C.标签选择器D.通配符选择器答案：B解析：CSS选择器优先级从高到低依次为：内联样式>ID选择器>类选择器/属性选择器/伪类选择器>标签选择器>通配符选择器。3.以下关于JavaScript变量声明的说法，错误的是（）A.var存在变量提升，存在函数作用域B.let和const存在块级作用域，无变量提升C.const声明的变量不可修改，不能重新赋值D.let可以重复声明同名变量答案：D解析：let和const不允许在同一作用域内重复声明同名变量，否则会直接报错。var支持重复声明，这也是var的主要缺陷之一。const声明的基本数据类型变量不可修改，引用类型可修改内部属性，不可重新赋值。4.下列JavaScript数据类型中，属于引用数据类型的是（）A.StringB.NumberC.ObjectD.Boolean答案：C解析：JS基本数据类型包括String、Number、Boolean、Undefined、Null、Symbol、BigInt，存储在栈内存；引用数据类型包括Object、Array、Function，存储在堆内存，变量保存的是内存地址。5.ES6中，关于箭头函数的说法正确的是（）A.箭头函数可以绑定自己的thisB.箭头函数可以作为构造函数使用C.箭头函数没有arguments对象D.箭头函数支持this指向修改答案：C解析：箭头函数的this指向外层作用域的this，自身不绑定this，无法通过call、apply、bind修改this指向；不能作为构造函数，不支持new实例化；没有arguments对象，可使用剩余参数替代。6.浏览器中，以下事件流的执行顺序正确的是（）A.事件冒泡=>事件捕获=>目标阶段B.事件捕获=>目标阶段=>事件冒泡C.目标阶段=>事件捕获=>事件冒泡D.事件冒泡=>目标阶段=>事件捕获答案：B解析：DOM事件流分为三个阶段，依次为：事件捕获阶段（从外层元素向内层元素传递）、目标阶段（触发当前目标元素事件）、事件冒泡阶段（从目标元素向外层元素传递）。7.以下HTTP请求方法中，用于资源删除的是（）A.GETB.POSTC.DELETED.PUT答案：C解析：GET用于查询资源，POST用于提交新增资源，PUT用于更新资源，DELETE用于删除指定资源，是RESTful接口规范的标准请求方法。8.Vue中，用于实现父子组件双向数据绑定的指令是（）A.v-bindB.v-modelC.v-onD.v-for答案：B解析：v-model是双向绑定指令，可实现表单元素或组件数据的双向同步；v-bind单向绑定数据，v-on绑定事件，v-for实现列表循环渲染。9.以下不属于前端性能优化手段的是（）A.图片懒加载B.代码压缩打包C.频繁操作DOMD.开启浏览器缓存答案：C解析：DOM操作消耗浏览器性能，频繁操作DOM会导致页面重排重绘，降低页面渲染速度。图片懒加载、代码压缩、开启缓存均为常用的前端性能优化方案。10.JavaScript中，typeofnull的返回值是（）A.nullB.undefinedC.objectD.boolean答案：C解析：这是JS的历史遗留bug，typeof检测null会返回object。判断null的正确方式为直接通过===null精准匹配。二、多项选择题（每题4分，共20分，多选、少选、错选不得分）1.以下属于CSS布局方式的有（）A.标准流布局B.浮动布局C.Flex布局D.Grid布局答案：ABCD解析：前端主流CSS布局包含四种，默认标准流文档布局，传统浮动布局，现代弹性Flex布局、网格Grid布局，分别适配不同的页面布局场景。2.以下可以实现JS异步操作的有（）A.setTimeoutB.PromiseC.async/awaitD.同步for循环答案：ABC解析：setTimeout是基础异步定时器，Promise是异步解决方案，async/await是Promise的语法糖，均用于处理异步任务。for循环为同步执行代码，不存在异步特性。3.浏览器常见的缓存类型有（）A.强缓存B.协商缓存C.内存缓存D.硬盘缓存答案：ABCD解析：从缓存策略分为强缓存（Cache-Control/Expires）和协商缓存（Last-Modified/ETag）；从存储位置分为内存缓存（memorycache）和硬盘缓存（diskcache）。4.Vue组件中，常用的传参方式有（）A.父传子：propsB.子传父：$emitC.跨组件：VuexD.任意组件：事件总线答案：ABCD解析：Vue组件通信常用方案：父子组件通过props、$emit通信；跨层级、全局组件可通过Vuex状态管理、事件总线（$bus）实现数据传递。5.以下会造成页面重排（回流）的操作有（）A.修改元素宽高B.修改元素颜色C.新增DOM节点D.修改页面字体大小答案：ACD解析：重排是页面元素布局位置、尺寸发生改变触发的重新渲染。修改元素颜色、背景色仅触发重绘；修改尺寸、新增删除DOM、修改字体大小、改变定位均会触发重排。三、简答题（每题6分，共30分）1.简述CSS盒子模型的组成，以及标准盒模型和IE怪异盒模型的区别。参考答案：CSS盒子模型由内容区（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。核心区别：标准盒模型（box-sizing:content-box）的元素总宽度=content宽度+padding+border+margin，设置的width仅代表内容区宽度；怪异盒模型（box-sizing:border-box）的元素总宽度=设置的width+margin，width属性包含了content、padding、border的总宽度，日常开发中更常用border-box，方便尺寸精准控制。2.简述JavaScript中this的指向规则。参考答案：this的指向由函数调用方式决定，核心规则如下：（1）普通函数直接调用：this指向window（浏览器环境）/global（Node环境）；（2）对象方法调用：this指向调用该方法的对象；（3）构造函数new调用：this指向新创建的实例对象；（4）定时器、事件回调：默认指向window；（5）apply/call/bind手动修改：this指向指定的绑定对象；（6）箭头函数：无独立this，继承外层作用域的this。3.简述Promise的三种状态及特点。参考答案：Promise共有三种不可逆状态：（1）pending（等待中）：初始状态，异步任务未完成；（2）fulfilled（成功）：异步任务执行成功，状态从pending切换为fulfilled，可通过then获取结果；（3）rejected（失败）：异步任务执行失败，状态从pending切换为rejected，可通过catch捕获错误。核心特点：状态一旦从pending切换为成功或失败，就会永久固定，无法再次修改，且Promise支持链式调用，可解决回调地狱问题。4.简述Vue中v-if和v-show的区别及使用场景。参考答案：区别：（1）渲染原理：v-if是真实的条件渲染，不满足条件时直接销毁DOM节点，满足条件时重新创建；v-show是通过CSS的display属性控制显示隐藏，DOM节点始终存在；（2）性能消耗：v-if切换开销大，初始渲染开销小；v-show初始渲染开销大，切换开销小。使用场景：页面元素偶尔切换显示隐藏、条件大概率不变时，用v-if；页面元素频繁切换显示隐藏时，用v-show。5.简述前端跨域的产生原因及常用解决方案。参考答案：跨域原因：浏览器同源策略限制，当协议、域名、端口号任意一项不同时，就会产生跨域，禁止页面之间的资源交互，目的是保障浏览器安全。常用解决方案：（1）后端开启CORS跨域资源共享（主流方案）；（2）开发环境配置webpack代理proxy；（3）使用JSONP解决get请求跨域；（4）Nginx反向代理跨域。四、编程题（每题10分，共20分）1.编写JavaScript代码，实现数组去重（至少写出两种方法）参考答案方法一：ES6Set去重（最简写法）PlainText

functionuniqueArr(arr){

return[...newSet(arr)];

}

//测试

console.log(uniqueArr([1,2,2,3,3,4]));//[1,2,3,4]方法二：遍历判断去重（兼容低版本）PlainText

functionuniqueArr(arr){

constres=[];

arr.forEach(item=>{

if(!res.includes(item)){

res.push(item);

}

})

returnres;

}

//测试

console.log(uniqueArr([1,2,2,3,3,4]));//[1,2,3,4]解析：Set数据结构天然不允许重复值，是ES6最简洁的数组去重方案；遍历判断法兼容性更好，适合老旧浏览器环境，可处理常规数组去重场景。2.编写代码，实现防抖函数（debounce）题目要求：触发事件后，延迟指定时间执行函数，若期间再次触发，重新计时参考答案PlainText

//防抖函数封装

functiondebounce(fn,delay=300){

lettimer=null;

returnfunction(...args){

//每次触发清空定时器，重新计时

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},