2025年web前端开发期中试卷1答案

2025年web前端开发期中试卷1答案一、选择题（每题2分，共20分）1.以下哪项不是HTML5新增的语义化标签？A.`<article>`B.`<section>`C.`<aside>`D.`<font>`答案：D解析：`<font>`是HTML4的过时标签，HTML5推荐使用CSS控制字体样式。2.关于CSSFlexbox布局，以下说法错误的是？A.`flex-wrap:wrap`会让子元素超出容器时换行B.`justify-content:space-between`会使子元素在主轴两端对齐C.`align-items`控制交叉轴的对齐方式D.父容器设置`display:flex`后，子元素默认宽度为内容宽度答案：D解析：Flex容器的子元素默认宽度由`flex-basis`决定，未设置时为内容宽度，但`flex-shrink`和`flex-grow`会影响最终宽度。3.以下JavaScript代码的输出结果是？```javascriptleta={x:1};letb=a;b.x=2;console.log(a.x);```A.1B.2C.undefinedD.报错答案：B解析：对象是引用类型，`b`和`a`指向同一内存地址，修改`b.x`会同步影响`a`。4.以下哪项是ES6中用于声明块级作用域变量的关键字？A.`var`B.`let`C.`const`D.`function`答案：B解析：`let`声明块级作用域变量，`const`声明常量（不可重新赋值），`var`是函数作用域。5.Vue3中，实现响应式数据的核心API是？A.`reactive`B.`ref`C.`computed`D.`watch`答案：A解析：`reactive`用于对象的响应式转换，`ref`主要用于基本类型或对象的包装，二者均为核心响应式API，但`reactive`是更底层的实现。6.Webpack中，用于处理CSS文件的loader是？A.`babel-loader`B.`css-loader`C.`file-loader`D.`url-loader`答案：B解析：`css-loader`负责解析CSS文件中的依赖（如`@import`和`url()`），配合`style-loader`将CSS插入DOM。7.以下哪种方式不能解决跨域问题？A.CORS（跨域资源共享）B.JSONPC.反向代理D.前端设置`Access-Control-Allow-Origin`答案：D解析：`Access-Control-Allow-Origin`是响应头，需后端设置，前端无法直接修改。8.前端性能指标LCP（最大内容ful填充绘制）主要衡量？A.首屏加载时间B.最大内容元素的渲染时间C.页面完全加载时间D.用户首次交互延迟答案：B解析：LCP关注视口中最大内容元素从开始加载到渲染完成的时间，是核心用户体验指标之一。9.以下关于WebAssembly的描述，错误的是？A.可以与JavaScript高效互操作B.主要用于替代JavaScriptC.支持C/C++等语言编译D.具有接近原生的执行速度答案：B解析：WebAssembly是JavaScript的补充，用于高性能计算场景，无法完全替代JavaScript。10.以下哪项是事件委托（事件代理）的优点？A.减少内存占用B.提高事件触发频率C.避免事件冒泡D.直接绑定子元素更高效答案：A解析：事件委托通过父元素统一监听事件，减少子元素的事件监听器数量，降低内存消耗。二、填空题（每空2分，共20分）1.原生JavaScript中，获取DOM元素的方法有`getElementById`、`getElementsByClassName`、`querySelector`和______。（答案：`getElementsByTagName`）2.CSS中，声明自定义变量的语法是______。（答案：`--变量名:值;`）3.JavaScript数组方法中，`filter`用于过滤元素，`map`用于转换元素，`reduce`用于______。（答案：累积计算）4.Vue组件的生命周期中，`onMounted`对应选项式API的______钩子。（答案：`mounted`）5.HTTP状态码`200`表示成功，`404`表示资源未找到，`500`表示______。（答案：服务器内部错误）6.事件委托的关键是利用事件的______阶段（冒泡或捕获）。（答案：冒泡）7.Webpack配置中，`entry`字段用于指定______。（答案：打包入口文件）8.CSS动画中，`@keyframes`规则用于定义______。（答案：动画关键帧）9.Promise的状态有`pending`（等待）、`fulfilled`（成功）和______。（答案：`rejected`（拒绝））10.响应式设计的关键技术包括媒体查询（MediaQuery）、弹性布局和______。（答案：流体图片/百分比单位）三、简答题（每题8分，共40分）1.简述Flexbox布局与Grid布局的主要区别及适用场景。Flexbox是一维布局模型，主要处理单行或单列的排列（主轴方向），适用于组件内部元素的对齐（如导航栏、按钮组）。Grid是二维布局模型，支持行和列的同时控制，适用于复杂的网格结构（如页面整体布局、卡片网格）。Flexbox侧重单一方向的对齐，Grid侧重二维空间的划分。2.解释JavaScript事件循环（EventLoop）的工作机制，说明宏任务（MacroTask）和微任务（MicroTask）的执行顺序。事件循环是JavaScript处理异步任务的机制。主线程执行同步代码，遇到异步任务（如`setTimeout`、`Promise`）会将其放入任务队列。宏任务包括`setTimeout`、`setInterval`、I/O操作等，微任务包括`Promise.then()`、`MutationObserver`等。执行顺序：主线程执行完同步代码后，先执行所有微任务队列中的任务，再执行宏任务队列中的一个任务，重复此过程。3.对比Vue3组合式API（CompositionAPI）与选项式API（OptionsAPI）的优缺点。选项式API按功能分类（`data`、`methods`、`computed`），代码组织清晰，适合小型项目，但逻辑复杂时（如多个逻辑关注点）会导致代码碎片化（“选项地狱”）。组合式API通过`setup`函数和`ref`/`reactive`组合逻辑，支持逻辑复用（通过组合函数），代码更模块化，适合大型项目，但学习成本较高，需要理解响应式原理。4.说明JavaScript中`this`的四种绑定规则，并举例说明默认绑定的情况。`this`的绑定规则：默认绑定：非严格模式下，独立函数调用时`this`指向全局对象（浏览器中为`window`）；严格模式下为`undefined`。隐式绑定：函数作为对象方法调用时，`this`指向该对象（如`obj.fn()`中`this`为`obj`）。显式绑定：通过`call`、`apply`、`bind`强制指定`this`。`new`绑定：通过`new`调用构造函数时，`this`指向新创建的实例对象。示例（默认绑定）：```javascriptfunctionfoo(){console.log(this);}foo();//非严格模式输出window，严格模式输出undefined```5.简述Webpack的核心概念（至少4个）及其作用。入口（Entry）：指定Webpack开始打包的起点文件，默认`./src/index.js`。输出（Output）：定义打包后文件的输出路径和文件名，如`path`（输出目录）和`filename`（文件名）。Loader：将非JavaScript文件（如CSS、图片）转换为Webpack可处理的模块，例如`css-loader`处理CSS，`babel-loader`转换ES6+代码。插件（Plugin）：扩展Webpack功能，如`HtmlWebpackPlugin`自动提供HTML文件，`CleanWebpackPlugin`清理输出目录。四、编程题（每题10分，共20分）1.用原生JavaScript实现数组去重，要求至少两种方法，并说明各自的优缺点。方法一：Set去重（ES6）```javascriptfunctionunique1(arr){return[...newSet(arr)];}//优点：代码简洁，时间复杂度O(n)；缺点：无法处理对象类型（因Set基于===比较）。```方法二：对象属性去重```javascriptfunctionunique2(arr){constobj={};constres=[];for(constitemofarr){constkey=typeofitem+JSON.stringify(item);//处理对象和基本类型if(!obj[key]){res.push(item);obj[key]=true;}}returnres;}//优点：可处理对象类型；缺点：需额外处理键名，复杂度较高。```2.编写CSS代码，实现一个宽度300px、高度200px的容器，其中子元素（宽高100px×100px）水平垂直居中，要求至少三种不同的布局方式。方式一：Flexbox```css.parent{width:300px;height:200px;display:flex;justify-content:center;align-items:center;}.child{width:100px;height:100px;}```方式二：Grid```css.parent{width:300px;height:200px;display:grid;place-items:center;}.child{width:100px;height:100px;}```方式三：绝对定位+transform```css.parent{width:300px;height:200px;position:relative;}.child{width:100px;height:100px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}```方式四：行内块+文本对齐（需配合伪元素）```css.parent{width:300px;height:200px;text-align:center;font-size:0;/消除行内元素间隙/}.parent::before{content:'';display:inline-block;height:100%;vertical-align:middle;}.child{width:100px;height:100px;display:inline-block;vertical-align:middle;font-size:16px;/恢复字体大小/}```五、综合题（20分）使用Vue3组合式API（CompositionAPI）实现一个待办事项列表（TodoList），要求包含以下功能：输入框输入待办内容，点击“添加”按钮或按回车键添加新待办；列表项显示待办内容，每项右侧有“删除”按钮，点击删除对应项；统计当前待办数量（如“剩余2项”）。实现代码：```vue<template><divclass="todo-list"><inputtype="text"v-model="newTodo"@keyup.enter="addTodo"placeholder="输入待办事项"><button@click="addTodo">添加</button><ulv-if="todos.length"><liv-for="(todo,index)intodos":key="index"><span>{{todo}}</span><button@click="deleteTodo(index)">删除</button></li></ul><pv-else>暂无待办事项</p><p>剩余{{todos.length}}项</p></div></template><scriptsetup>import{ref}from'vue';constnewTodo=ref('');consttodos=ref([]);constaddTodo=()=>{consttrimmed=newTodo.value.trim();if(trimmed){