前端面试笔试题及答案.docxVIP

前端面试笔试题及答案

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

1.请简述HTML语义化标签的作用，并列举3个常用的语义化标签。

考察点：HTML语义化理解与应用

答案：HTML语义化标签的核心作用是让页面结构更清晰，使浏览器和搜索引擎能快速理解内容含义，同时提升代码可读性和可维护性，也有利于无障碍访问（如屏幕阅读器可准确识别内容类型）。

常用语义化标签：header（定义页面或区块的头部，如导航栏、标题）、article（定义独立完整的内容，如博客文章、新闻报道）、footer（定义页面或区块的底部，如版权信息、联系方式）。

2.CSS中盒模型分为哪两种？请说明它们的区别，并写出如何通过CSS切换盒模型类型。

考察点：CSS盒模型核心概念

答案：CSS盒模型分为「标准盒模型（W3C盒模型）」和「怪异盒模型（IE盒模型）」。

区别：标准盒模型中，元素的width和height仅包含内容区（content）的宽度和高度，内边距（padding）、边框（border）会向外延伸，增加元素整体尺寸；怪异盒模型中，width和height包含内容区、内边距和边框，元素整体尺寸不会因padding和border额外扩大。

CSS切换方式：通过box-sizing属性控制，box-sizing:content-box;（默认值，标准盒模型），box-sizing:border-box;（怪异盒模型）。

3.请解释JavaScript中的原型链，并说明原型链的作用。

考察点：JS原型与继承机制

答案：JavaScript中每个对象都有__proto__（隐式原型），每个构造函数都有prototype（显式原型），对象的__proto__指向其构造函数的prototype。当访问一个对象的属性或方法时，若对象自身没有该属性/方法，会通过__proto__向上查找其构造函数原型的属性/方法，若仍未找到则继续向上查找原型的原型，直到找到Ototype（原型链顶端，其__proto__为null），这个链式查找结构就是原型链。

原型链的作用：实现JavaScript的继承机制，让子类对象能共享父类原型上的属性和方法，减少内存占用；同时统一对象的基础行为（如toString()、hasOwnProperty()等方法均来自Ototype）。

4.请写出一段JavaScript代码，实现将数组[1,3,5,7,9]转换为[2,4,6,8,10]（每个元素加1）。要求使用两种不同的数组方法。

考察点：JS数组方法应用

答案：

方法1：使用map()方法（遍历数组并返回新数组，不改变原数组）

constarr=[1,3,5,7,9];

constnewArr1=arr.map(item=item+1);

console.log(newArr1);//[2,4,6,8,10]

方法2：使用forEach()方法（遍历数组并手动修改新数组）

constarr=[1,3,5,7,9];

constnewArr2=[];

arr.forEach(item=newArr2.push(item+1));

console.log(newArr2);//[2,4,6,8,10]

5.请简述CSSFlex布局中justify-content和align-items的作用，并分别列举3个常用属性值。

考察点：Flex布局核心属性

答案：justify-content和align-items均用于Flex容器中项目的对齐方式，区别在于作用轴不同：

justify-content：控制项目在主轴（默认水平方向，由flex-direction决定）上的对齐方式。

常用值：flex-start（默认，项目靠主轴起点对齐）、center（项目在主轴居中对齐）、space-between（项目在主轴两端对齐，中间间距相等）。

align-items：控制项目在交叉轴（与主轴垂直的方向）上的对齐方式。

常用值：stretch（默认，项目拉伸至与交叉轴高度一致，需项目无固定高度）、center（项目在交叉轴居中对齐）、flex-end（项目靠交叉轴终点对齐）。

6.请说明JavaScript中Promise的三种状态，并写出一段代码实现“先执行异步请求A，成功后再执行异步请求B”的逻辑（可用setTimeout模拟异步请求）。

考察点：JS异步编程（Promise）

答案：Promise有三种状态：

pending（等待态）：初始状态，既未成功也未失败；

fulfilled（成功态