2025年大学web前端考试题及答案

2025年大学web前端考试题及答案一、单项选择题（每题2分，共20分）1.关于ES2023新特性，以下描述错误的是（）A.引入`Atotype.findLast`方法，从数组末尾开始查找第一个符合条件的元素B.`Stotype.description`属性支持直接修改Symbol的描述字符串C.正则表达式新增`v`标志，用于启用Unicode属性转义的严格模式D.函数参数新增`default`关键词语法，允许为参数设置更灵活的默认值答案：B（`Stotype.description`是只读属性，无法修改）2.以下CSS代码中，能实现“当容器宽度小于600px时，子元素字体大小变为14px”的是（）A.@media(max-width:600px){.container>{font-size:14px;}}B.@container(max-width:600px){.container>{font-size:14px;}}C.@supports(width:600px){.container>{font-size:14px;}}D.@layercontainer(max-width:600px){.container>{font-size:14px;}}答案：B（容器查询使用`@container`规则，依赖容器的尺寸而非视口）3.关于JavaScript事件循环机制，以下代码输出顺序正确的是（）```javascriptasyncfunctionasync1(){console.log('async1start');awaitasync2();console.log('async1end');}asyncfunctionasync2(){console.log('async2');}console.log('scriptstart');setTimeout(()=>{console.log('setTimeout');},0);async1();newPromise(resolve=>{console.log('promise1');resolve();}).then(()=>{console.log('promise2');});console.log('scriptend');```A.scriptstart→async1start→async2→promise1→scriptend→async1end→promise2→setTimeoutB.scriptstart→async1start→async2→promise1→scriptend→promise2→async1end→setTimeoutC.scriptstart→async1start→async2→scriptend→promise1→async1end→promise2→setTimeoutD.scriptstart→async1start→async2→promise1→async1end→scriptend→promise2→setTimeout答案：B（`await`会将后续代码作为微任务，`async2()`同步执行；`newPromise`构造函数同步执行，`.then`是微任务；`setTimeout`是宏任务）4.以下Vue3组合式API的使用场景中，不需要使用`ref`的是（）A.响应式追踪一个数字类型的变量B.在模板中直接访问数组的索引值（如`arr[0]`）C.作为函数参数传递时保持响应式D.存储一个对象类型的响应式数据答案：D（对象类型用`reactive`更合适，`ref`主要用于基本类型或需要保持引用的场景）5.关于Webpack5的特性，以下说法正确的是（）A.内置`node-polyfill`插件，无需额外配置即可兼容Node.js模块B.支持模块联邦（ModuleFederation），实现跨应用的模块共享C.优化持久化缓存时，默认使用`md5`算法提供缓存哈希D.移除了对TreeShaking的支持，改为由ESBuild负责代码压缩答案：B（Webpack5的模块联邦是跨应用共享代码的核心特性；A错误，需手动配置`node-polyfill`；C错误，默认使用`xxhash64`；D错误，TreeShaking仍为核心优化）6.以下HTML5语义化标签的使用场景，错误的是（）A.`<article>`包裹一篇独立的博客文章B.`<section>`作为页面主内容与侧边栏的容器C.`<nav>`包含网站的主导航菜单D.`<aside>`放置与主内容相关的补充信息（如广告）答案：B（`<section>`用于内容分块，主内容与侧边栏的容器应使用`<main>`和`<aside>`组合）7.关于CSSGrid布局，以下属性与描述不匹配的是（）A.`grid-auto-flow:dense`—自动填充时尽可能填满空白区域B.`grid-template-areas`—通过命名区域定义网格布局C.`justify-items`—控制网格项在列轴上的对齐方式D.`grid-gap`—设置网格行与列之间的间距（已更名为`gap`）答案：C（`justify-items`控制行轴（水平方向）对齐，列轴对齐用`align-items`）8.以下JavaScript代码中，`obj.a`的最终值是（）```javascriptconstobj={a:1};functionfn(x){x.a=2;x={a:3};}fn(obj);```A.1B.2C.3D.undefined答案：B（函数参数传递的是对象引用，修改`x.a`会影响原对象；但重新赋值`x`为新对象后，原对象不受影响）9.关于ServiceWorker的特性，以下描述错误的是（）A.运行在独立的线程中，不会阻塞主线程B.支持离线缓存，但需要用户手动触发安装C.可以监听`fetch`事件，拦截网络请求D.仅在HTTPS环境或本地`localhost`下可用答案：B（ServiceWorker的安装由浏览器自动触发，无需用户干预）10.以下React代码中，子组件`Child`接收到的`prop`值是（）```javascriptfunctionParent(){const[count,setCount]=useState(0);useEffect(()=>{setCount(1);},[]);return<Childvalue={count}/>;}```A.0（初始渲染时的值）B.1（副作用执行后的值）C.undefined（未正确传递）D.0和1交替出现（状态更新未完成）答案：A（`useEffect`在初始渲染后执行，此时`Child`已渲染，接收的是初始值0；下一次渲染时`count`变为1，`Child`会重新接收1）二、填空题（每空2分，共20分）1.CSS中，`aspect-ratio`属性用于设置元素的________，其值可以是数值（如`16/9`）或关键字（如`auto`）。答案：宽高比2.JavaScript中，`Promise.allSettled()`方法返回的Promise对象，其结果数组中的每个元素是包含`status`和`value`/`reason`属性的对象，其中`status`的可能值为________或________。答案："fulfilled"、"rejected"3.Vue3中，使用`defineProps`宏定义组件props时，若要设置默认值，需要在类型声明后通过________语法实现（示例：`{type:String,default:'default'}`）。答案：对象形式（或“选项对象”）4.现代浏览器中，`IntersectionObserverAPI`用于检测________与________的交集变化，常用于实现懒加载或无限滚动。答案：目标元素、视口（或“祖先元素”）5.Webpack中，`output.libraryTarget`设置为________时，打包后的库会暴露为全局变量；设置为________时，库会通过`import`或`require`引入。答案：'global'、'module'（或'commonjs'/'amd'等具体模块规范）6.正则表达式`/^[1-9]\d{5}$/`用于匹配________格式的字符串（示例：200000）。答案：中国邮政编码（或“6位数字且首位非0”）三、简答题（每题8分，共40分）1.简述CSS容器查询（ContainerQueries）与媒体查询（MediaQueries）的核心区别，并举例说明容器查询的典型应用场景。答案：核心区别：媒体查询基于视口（viewport）的尺寸，容器查询基于某个具体容器（container）的尺寸。应用场景示例：当卡片组件的宽度变化时（如从大屏的400px变为小屏的300px），通过容器查询调整卡片内部标题的字体大小或按钮的排列方式，无需依赖视口宽度。2.解释JavaScript中“事件委托（EventDelegation）”的原理，并说明其优缺点。答案：原理：利用事件冒泡机制，将事件监听器绑定到父元素，通过`event.target`判断实际触发事件的子元素，从而处理子元素的事件。优点：减少监听器数量（尤其动态添加的子元素）、提升性能、简化代码；缺点：需处理事件冒泡的终止情况（如`stopPropagation`）、可能误触发父元素的其他事件。3.对比Vue3组合式API（CompositionAPI）与选项式API（OptionsAPI）的设计理念，并说明组合式API的优势。答案：设计理念：选项式API按功能类型（data、methods、computed等）组织代码，适合小型组件；组合式API按逻辑功能（如表单验证、数据请求）组织代码，通过`setup`函数和自定义组合函数（Composables）实现逻辑复用。优势：更好的逻辑复用（避免Mixin的命名冲突）、更清晰的代码结构（相关逻辑集中）、更友好的TypeScript支持。4.描述浏览器渲染页面的主要流程，并说明`display:none`与`visibility:hidden`对渲染流程的影响差异。答案：渲染流程：解析HTML提供DOM树→解析CSS提供CSSOM树→合并为渲染树（RenderTree）→布局（Layout，计算元素尺寸和位置）→绘制（Paint，填充像素）→合成（Composite，层合并）。影响差异：`display:none`会使元素不参与渲染树构建（即“不可见且不占空间”），跳过布局、绘制、合成；`visibility:hidden`元素参与渲染树构建（“不可见但占空间”），布局和绘制仍会执行，仅合成时不显示。5.说明Webpack中`loader`与`plugin`的作用区别，并举例常见的`loader`和`plugin`及其功能。答案：作用区别：`loader`用于处理非JavaScript模块（如将CSS、图片、TypeScript转换为Webpack可识别的模块）；`plugin`用于扩展Webpack功能（如优化打包结果、管理输出文件、注入环境变量）。示例：`css-loader`解析CSS文件为JavaScript模块，`babel-loader`将ES6+代码转换为ES5；`HtmlWebpackPlugin`提供HTML文件并自动注入打包后的JS，`TerserPlugin`压缩JavaScript代码。四、编程题（共20分）1.（8分）使用HTML、CSS和原生JavaScript实现一个“输入框自动完成”功能，要求：输入框输入时，从本地模拟数据（如`['苹果','香蕉','葡萄','橙子']`）中筛选匹配前缀的项；匹配结果以列表形式展示在输入框下方，点击列表项可填充输入框；列表样式需包含悬停效果（如背景色变化）。答案：```html<inputtype="text"id="autocomplete-input"placeholder="输入水果名称..."><divid="suggestions"style="display:none;position:absolute;border:1pxsolidccc;background:white;"></div><script>constdata=['苹果','香蕉','葡萄','橙子'];constinput=document.getElementById('autocomplete-input');constsuggestionsDiv=document.getElementById('suggestions');input.addEventListener('input',(e)=>{constkeyword=e.target.value.trim();if(!keyword){suggestionsDiv.style.display='none';return;}constmatches=data.filter(item=>item.startsWith(keyword));renderSuggestions(matches);});functionrenderSuggestions(matches){suggestionsDiv.innerHTML=matches.map(item=>`<divclass="suggestion-item"style="padding:5px;cursor:pointer;">${item}</div>`).join('');suggestionsDiv.style.display=matches.length?'block':'none';//添加悬停效果和点击事件document.querySelectorAll('.suggestion-item').forEach(item=>{item.addEventListener('mouseover',()=>{item.style.backgroundColor='f0f0f0';});item.addEventListener('mouseout',()=>{item.style.backgroundColor='white';});item.addEventListener('click',()=>{input.value=item.textContent;suggestionsDiv.style.display='none';});});}</script><style>suggestions{min-width:200px;box-shadow:02px4pxrgba(0,0,0,0.1);}.suggestion-item:hover{background-color:f0f0f0;/悬停效果/}</style>```2.（12分）使用Vue3组合式API（需包含`setup`函数和`ref`/`reactive`）编写一个“待办事项”组件，要求：包含输入框和“添加”按钮，输入内容不为空时可添加待办；待办列表显示每个事项的内容和“删除”按钮；实现“全选/全不选”功能，选中项背景色变为`e8f4ff`；使用`localStorage`持久化存储待办数据（页面刷新后数据不丢失）。答案：```vue<template><div><inputv-model="newTodo"@keyup.enter="addTodo"placeholder="输入待办事项..."><button@click="addTodo":disabled="!newTodo.trim()">添加</button><div><inputtype="checkbox"v-model="allSelected"@change="toggleAll">全选</div><ul><liv-for="(todo,index)intodos":key="index":style="{backgroundColor:todo.selected?'e8f4ff':'auto'}"><inputtype="checkbox"v-model="todo.selected"><span>{{todo.content}}</span><button@click="deleteTodo(index)">删除</butt