Web前端技术核心试题及答案呈现

Web前端技术核心试题及答案呈现考试时间：______分钟总分：______分姓名：______一、选择题（共10题，每题2分，共20分）1.以下关于HTML5语义化标签的说法，正确的是（）。A.`<header>`标签只能用于页面头部B.`<section>`标签必须包含`<h1>-<h6>`标题元素C.`<nav>`标签用于包裹导航链接，是页面唯一的导航容器D.`<article>`标签代表独立的内容模块，可脱离页面上下文独立存在2.在CSS中，以下选择器的优先级最高的是（）。A.类选择器（.class）B.ID选择器（#id）C.标签选择器（div）D.伪类选择器（:hover）3.关于JavaScript中的作用域，以下说法正确的是（）。A.`var`声明的变量是块级作用域B.`let`声明的变量存在变量提升C.函数作用域中可以访问全局作用域的变量D.`const`声明的变量可以被重新赋值4.以下属于ES6模块化规范的关键字是（）。A.`import`和`require`B.`export`和`module.exports`C.`import`和`export`D.`require`和`exports`5.在CSS盒模型中，以下哪种盒模型的宽度计算包含`padding`和`border`（）。A.`content-box`B.`border-box`C.`padding-box`D.`margin-box`6.以下JavaScript数据类型中，属于基本数据类型的是（）。A.ObjectB.ArrayC.StringD.Function7.在Vue3中，以下选项中不是组合式API的是（）。A.`ref`B.`reactive`C.`data`D.`computed`8.关于JavaScript中的异步编程，以下说法正确的是（）。A.`Promise`的`.then()`方法会阻塞代码执行B.`async`函数返回的是一个`Promise`对象C.`setTimeout`是同步函数D.`await`只能在`async`函数内部使用9.以下CSS布局方式中，属于弹性布局的是（）。A.`display:grid`B.`display:flex`C.`display:block`D.`display:inline`10.在React中，父组件向子组件传递数据主要通过（）。A.`state`B.`props`C.`refs`D.`context`二、填空题（共5题，每题3分，共15分）1.CSS中，用于实现元素弹性布局的属性是______，通过设置该属性的值为______，可使子元素平均分配容器宽度。2.JavaScript中，用于遍历数组并返回新数组的方法是______，用于检测数组中是否包含某个值的方法是______。3.在Vue3中，用于创建响应式数据的API是______，用于计算派生状态的API是______。4.Webpack中，用于将多个JS文件打包成一个文件的插件是______，用于提取CSS代码的插件是______。5.HTTP状态码中，表示“未找到”的状态码是______，表示“服务器内部错误”的状态码是______。三、简答题（共3题，每题5分，共15分）1.简述JavaScript中“闭包”的概念，并说明一个闭包的实际应用场景。2.说明CSS选择器优先级的计算规则，并举例说明如何提高优先级。3.列举Vue组件间通信的至少三种方式，并简述其适用场景。四、代码题（共2题，每题15分，共30分）1.使用JavaScript实现一个函数`throttle`，对高频触发的事件（如鼠标滚动）进行节流处理：要求每隔固定时间（如200ms）最多执行一次回调函数。2.使用Promise实现一个函数`fetchData`，依次获取用户数据（`/api/user`）和订单数据（`/api/orders`），要求：若用户数据获取失败，则不再获取订单数据；若获取成功，则返回合并后的数据（`{user,orders}`）。五、综合应用题（共1题，共20分）使用Vue3的组合式API实现一个“待办事项（TodoList）”组件，要求包含以下功能：1.输入框+添加按钮，可新增待办事项（输入非空验证）；2.待办事项列表展示，每项包含“任务描述”“完成状态”“删除按钮”；3.点击任务描述可切换完成状态（已完成显示删除线）；4.底部显示统计信息：“已完成X项，共Y项”；5.支持按“全部”“未完成”“已完成”筛选待办事项。试卷答案一、选择题1.D解析：`<article>`标签代表独立的内容模块，可脱离上下文独立存在；A错误，`<header>`可用于区块头部；B错误，`<section>`无需强制包含标题；C错误，`<nav>`非唯一导航容器。2.B解析：ID选择器优先级高于类选择器、标签选择器和伪类选择器（优先级计算：ID>类>标签>伪类）。3.C解析：函数作用域可访问全局变量；A错误，`var`是函数作用域；B错误，`let`无变量提升；D错误，`const`不可重新赋值。4.C解析：ES6模块化使用`import`和`export`；A、B是CommonJS规范，D是混合写法。5.B解析：`border-box`盒模型宽度=内容+内边距+边框；`content-box`仅包含内容宽度。6.C解析：基本数据类型包括String、Number、Boolean等；Object、Array、Function是引用类型。7.C解析：Vue3组合式API包括`ref`、`reactive`、`computed`等；`data`是选项式API的属性。8.B解析：`async`函数返回Promise；A错误，`.then()`不阻塞；C错误，`setTimeout`是异步；D正确，`await`只能在`async`函数内使用。9.B解析：`display:flex`是弹性布局；`grid`是网格布局；`block`和`inline`是常规布局。10.B解析：React中父组件通过`props`向子组件传递数据；`state`是组件自身状态；`refs`用于DOM操作；`context`用于跨层级传递。二、填空题1.`display:flex`；`flex:1`解析：弹性布局通过`display:flex`启用；子元素设置`flex:1`可均分容器宽度。2.`map`；`includes`解析：`map`遍历数组返回新数组；`includes`检测数组是否包含指定值。3.`ref`/`reactive`；`computed`解析：`ref`/`reactive`创建响应式数据；`computed`计算派生状态。4.`TerserWebpackPlugin`（或`UglifyJsWebpackPlugin`）；`MiniCssExtractPlugin`解析：代码压缩插件用于合并JS；`MiniCssExtractPlugin`提取CSS到单独文件。5.`404`；`500`解析：HTTP状态码404表示资源未找到；500表示服务器内部错误。三、简答题1.答案：闭包是函数内部定义的函数，可访问外部函数的变量。应用场景：计数器（通过闭包封装私有变量）。解析：闭包通过作用域链保留外部变量，实现变量私有化；计数器示例中，`createCounter`返回的函数引用了`count`变量，即使`createCounter`执行完毕，`count`仍存在。2.答案：优先级规则：ID选择器（100）>类选择器（10）>标签选择器（1）>伪类/伪元素（1）。提高优先级可通过添加ID选择器或增加选择器层级。解析：优先级通过权重值计算；例如`div#header.class`的权重为101（ID=100+类=10），高于`div.class`（10+1=11）。3.答案：-`props`：父组件向子组件传递数据（父子通信）；-`emit`：子组件触发父组件事件（子父通信）；-`provide/inject`：跨层级组件共享数据（祖先-后代通信）。解析：`props`是单向数据流的基础；`emit`实现子组件向父组件反馈；`provide/inject`解决深层嵌套组件数据传递问题。四、代码题1.答案：```javascriptfunctionthrottle(fn,delay){letlastTime=0;returnfunction(...args){constnow=Date.now();if(now-lastTime>=delay){fn.apply(this,args);lastTime=now;}};}```解析：通过记录上次执行时间`lastTime`，判断当前时间与上次时间差是否超过`delay`；若超过则执行回调并更新`lastTime`，否则跳过。2.答案：```javascriptfunctionfetchData(){returnfetch('/api/user').then(res=>{if(!res.ok)thrownewError('用户数据获取失败');returnres.json();}).then(user=>{returnfetch('/api/orders').then(res=>{if(!res.ok)thrownewError('订单数据获取失败');returnres.json();}).then(orders=>({user,orders}));});}```解析：使用Promise链式调用，先获取用户数据；若失败则抛出错误终止链；若成功则继续获取订单数据，最终合并返回`{user,orders}`。五、综合应用题答案：```vue<template><divclass="todo-list"><divclass="input-area"><inputv-model.trim="newTodo"@keyup.enter="addTodo"placeholder="请输入待办事项"/><button@click="addTodo":disabled="!newTodo">添加</button></div><divclass="filter-area"><button@click="filter='all'":class="{active:filter==='all'}">全部</button><button@click="filter='active'":class="{active:filter==='active'}">未完成</button><button@click="filter='completed'":class="{active:filter==='completed'}">已完成</button></div><ulclass="todo-items"><liv-for="todoinfilteredTodos":key="todo.id"class="todo-item"><span:class="{completed:pleted}"@click="toggleTodo(todo.id)">{{todo.text}}</span><button@click="deleteTodo(todo.id)"class="delete-btn">删除</button></li></ul><divclass="stats">已完成{{completedCount}}项，共{{todos.length}}项</div></div></template><scriptsetup>import{ref,computed}from'vue';constnewTodo=ref('');consttodos=ref([{id:1,text:'学习Vue3',completed:false},{id:2,text:'完成TodoList',completed:true},]);constfilter=ref('all');//计算已完成数量constcompletedCount=computed(()=>{returntodos.value.filter(todo=>pleted).length;});//根据筛选条件过滤待办事项constfilteredTodos=computed(()=>{if(filter.value==='active'){returntodos.value.filter(todo=>!pleted);}elseif(filter.value==='completed'){returntodos.value.filter(todo=>pleted);}returntodos.value;});//添加待办事项constaddTodo=()=>{if(!newTodo.value)return;todos.value.push({id:Date.now(),text:newTodo.value,completed:false,});newTodo.value='';};//切换完成状态consttoggleTodo=(id)=>{consttodo=todos.value.find(t=>t.id===id);if(todo)pleted=!pleted;};//删除待办事项constdeleteTodo=(id)=>{todos.value=todos.value.filter(t=>t.id!==id);};</script><stylescoped>.todo-list{max-width:500px;margin:0auto;font-family:Arial,sans-serif;}.input-area{display:flex;margin-bottom:20px;}.input-areainput{flex:1;padding:8px;border:1pxsolid#ccc;border-radius:4px;}.input-areabutton{margin-left:10px;padding:8px16px;background:#42b983;color:white;border:none;border-radius:4px;cursor:pointer;}.input-areabutton:disabled{background:#ccc;cursor:not-allowed;}.filter-area{margin-bottom:20px;}.filter-areabutton{m