2025年前端开发笔试题及答案.docxVIP

2025年前端开发笔试题及答案

一、基础题（每题5分，共30分）

1.简述HTML5语义化标签的典型应用场景，并列举至少5个常用语义化标签及其核心作用。

答案：HTML5语义化标签通过标签名直观表达内容含义，提升可访问性和SEO。常用标签包括：

-`header`：页面或区域的头部（如网站导航栏）；

-`nav`：导航链接集合（如主导航菜单）；

-`main`：页面主要内容（仅出现一次）；

-`article`：独立可复用的内容块（如博客文章）；

-`section`：文档中的章节（如产品特性模块）；

-`aside`：侧边栏或补充内容（如相关链接）。

2.说明CSS标准盒模型与怪异盒模型（IE盒模型）的核心差异，如何通过CSS属性切换两种盒模型？

答案：标准盒模型中，元素宽度（width）仅包含内容区（content），边框（border）和内边距（padding）会增加元素总宽度；怪异盒模型中，width包含content+padding+border，总宽度等于设置的width。通过`box-sizing`属性切换：`box-sizing:content-box`（标准），`box-sizing:border-box`（怪异）。

3.写出以下JavaScript代码的执行结果，并解释事件循环（EventLoop）的执行机制。

```javascript

console.log(1);

setTimeout(()={

console.log(2);

Promise.resolve().then(()={

console.log(3);

});

},0);

Promise.resolve().then(()={

console.log(4);

setTimeout(()={

console.log(5);

},0);

});

console.log(6);

```

答案：执行结果为：1、6、4、2、3、5。

事件循环机制：

-主线程执行同步代码，依次输出1、6；

-遇到`setTimeout`（宏任务）和`Promise.then`（微任务），分别加入宏任务队列和微任务队列；

-同步代码执行完毕，检查微任务队列，执行`Promise.then`输出4，其中嵌套的`setTimeout`（宏任务）加入宏任务队列；

-微任务队列清空后，执行宏任务队列中的第一个`setTimeout`，输出2，其内部的`Promise.then`（微任务）加入微任务队列；

-再次检查微任务队列，执行输出3；

-最后执行宏任务队列中的第二个`setTimeout`，输出5。

4.对比ES6中`let`、`const`与`var`的主要区别，说明`const`声明对象时能否修改属性。

答案：

-作用域：`var`函数作用域，`let`/`const`块级作用域；

-变量提升：`var`存在提升（未初始化可访问，值为undefined），`let`/`const`存在暂时性死区（TDZ，声明前不可访问）；

-重复声明：`var`允许重复声明，`let`/`const`在同一作用域禁止重复声明；

-赋值限制：`const`声明时必须初始化，且不能重新赋值（但对象/数组的属性/元素可修改）。

`const`声明对象时，变量指向的内存地址不可变，但对象属性可修改（如`constobj={a:1};obj.a=2`合法）。

5.描述Vue3中`reactive`与`ref`的区别及适用场景。

答案：

-`reactive`：用于为对象（包括数组、Map等）创建响应式数据，基于Proxy实现，无法直接处理基本类型；

-`ref`：用于为基本类型（如number、string）或对象创建响应式数据，内部通过`value`属性暴露值，访问/修改需通过`.value`（模板中可省略）；

适用场景：基本类型或需要在组合式API中传递的变量用`ref`，复杂对象用`reactive`（若对象属性频繁修改，`ref`包装对象也可，但`reactive`更符合语义）。

6.列举至少4种CSS垂直居中的实现方式（需包含Flex和Grid方案）。

答案：

-Flex布局（父元素）：`display:flex;align-items:center;`；

-Grid布局（父元素）：`display:grid;align-items:center;`；

-绝对定位+transform（子元素）：`pos