2025金三银四春招Web前端八股文汇总【助你备战金三银四】

在金三银四的春招季，掌握 Web 前端八股文能有效提升面试成功率。以下为你梳理了涵盖 JavaScript、CSS、ES6、Vue2、vue3 、React、Node.JS、小程序、HTTP、TypeScript、Webpack、Git、Linux、算法与数据结构、设计模式等 15 个技术栈的相关内容，助你备战春招。【需要前端八股文，看文末】

一、JavaScript

1. 数据结构

常见的 JavaScript 数据结构有数组（Array）、对象（Object）、集合（Set）、映射（Map）等。数组是有序的元素集合，可以通过索引访问元素；对象是无序的键值对集合；集合是值的集合，每个值都是唯一的；映射也是键值对的集合，与对象不同的是，键可以是任意类型。

1. BOM 理解及常见对象

BOM（浏览器对象模型）提供了与浏览器交互的接口。常见的 BOM 对象有 window 对象，它是 BOM 的核心，代表浏览器窗口，包含了 document 对象（操作 HTML 文档）、location 对象（获取或设置当前页面的 URL）、navigator 对象（获取浏览器的相关信息）、screen 对象（获取屏幕的相关信息）、history 对象（操作浏览器的历史记录）等。

1. == 和 === 区别及使用场景

== 是宽松相等，在比较时会进行类型转换。例如，"1" == 1 会返回 true，因为字符串 "1" 会被转换为数字 1 再进行比较。而 === 是严格相等，只有在类型和值都相等时才返回 true，如 "1" === 1 会返回 false 。在需要严格比较类型和值的场景，如判断变量是否为特定类型的值时，使用 === ；在一些允许类型转换的比较场景，如比较用户输入的值（可能类型不一致）时，可以使用 == 。

1. 作用域链理解

作用域链是由当前环境与上层环境的一系列变量对象组成的链条。当在 JavaScript 中查找一个变量时，会先在当前作用域中查找，如果找不到，就会沿着作用域链向上层作用域查找，直到全局作用域。作用域链保证了对变量的有序访问，避免变量命名冲突，同时也决定了函数执行时对变量的访问权限。

1. this 对象理解

this 在不同的执行环境中有不同的指向。在全局环境中，this 指向全局对象（浏览器中是 window）；在函数内部，如果函数是作为对象的方法调用，this 指向该对象；如果是普通函数调用，this 指向全局对象（严格模式下指向 undefined）；在构造函数中，this 指向新创建的对象；在箭头函数中，this 继承自外层作用域的 this 。例如：

const obj = { name: 'test', sayHello: function() { console.log(this.name); // 这里的this指向obj } }; obj.sayHello(); function test() { console.log(this); // 普通函数调用，非严格模式下this指向window } test(); const arrowFunc = () => { console.log(this); // 箭头函数的this继承自外层作用域 }; arrowFunc();

1. new 操作符具体干了什么

当使用 new 操作符调用构造函数时，会执行以下步骤：

1. 创建一个新的空对象。

2. 将新对象的 proto 属性指向构造函数的 prototype 属性。

3. 将构造函数的 this 指向新创建的对象，并执行构造函数，可能会为新对象添加属性和方法。

4. 如果构造函数没有返回一个对象类型的值（包括 null），则返回新创建的对象。

5. JavaScript 中执行上下文和执行栈

执行上下文是 JavaScript 代码执行时的环境，包括变量环境（存储变量声明）、词法环境（包含标识符绑定）、this 值等。执行栈是一个存储执行上下文的栈结构，当 JavaScript 引擎开始执行代码时，会将全局执行上下文压入执行栈。每当调用一个函数时，就会创建一个新的函数执行上下文并压入执行栈，函数执行完毕后，其对应的执行上下文从执行栈中弹出。例如：

function outer() { function inner() { console.log('Inner function'); } inner(); } outer(); // 执行过程中，先将全局执行上下文压入执行栈， // 调用outer函数时，将outer函数的执行上下文压入执行栈， // 调用inner函数时，将inner函数的执行上下文压入执行栈， // inner函数执行完毕，其执行上下文弹出， // outer函数执行完毕，其执行上下文弹出

1. 类型转换机制

JavaScript 中的类型转换主要有三种：

1. 自动类型转换：在进行运算或比较时，JavaScript 会自动进行类型转换。例如，当一个字符串和一个数字进行加法运算时，字符串会被转换为数字（如果可以转换的话），如 "3" + 2 会被转换为 3 + 2 ，结果为 5；在比较 "5" > 3 时，字符串 "5" 会被转换为数字 5 再进行比较，结果为 true 。

2. 显式类型转换：可以通过 Number ()、String ()、Boolean () 等函数进行显式类型转换。例如，Number ("5") 会将字符串 "5" 转换为数字 5；String (5) 会将数字 5 转换为字符串 "5"；Boolean (0) 会将数字 0 转换为布尔值 false 。

3. 隐式类型转换：某些操作符会引发隐式类型转换，如 == 操作符在比较时可能会进行隐式类型转换，而 === 不会。

4. 事件循环理解

JavaScript 是单线程语言，通过事件循环机制来处理异步操作。事件循环包括宏任务队列和微任务队列。宏任务有 setTimeout、setInterval、I/O 操作、UI 渲染等；微任务有 Promise.then、process.nextTick（Node.js 环境）等。执行过程如下：

1. 先执行同步代码，将同步任务依次压入调用栈执行。
2. 遇到异步任务时，根据是宏任务还是微任务，将其分别放入宏任务队列或微任务队列。
3. 当调用栈为空时，事件循环开始工作，先检查微任务队列，将微任务队列中的任务依次取出放入调用栈执行，直到微任务队列为空。
4. 再从宏任务队列中取出一个宏任务放入调用栈执行，执行完后，再次检查微任务队列并执行其中的任务，如此循环。例如：

console.log('start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().then(() => { console.log('Promise.then'); }); console.log('end'); // 输出结果为：start -> end -> Promise.then -> setTimeout

二、CSS

1. 盒子模型理解

盒子模型是 CSS 布局的基础，每个 HTML 元素都可以看作是一个盒子。标准盒子模型由 content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。width 和 height 属性只包含 content 部分。例如：

.box { width: 200px; height: 100px; padding: 20px; border: 1px solid black; margin: 10px; }

在这个例子中，实际占据的水平空间为 200px（content 宽度） + 2 * 20px（左右 padding） + 2 * 1px（左右 border） + 2 * 10px（左右 margin） = 262px 。IE 盒子模型的 width 和 height 属性包含了 content、padding 和 border 部分，在计算元素占据的空间时有所不同。可以通过 box-sizing 属性来切换盒子模型，默认值为 content-box（标准盒子模型），设置为 border-box 时为 IE 盒子模型。

1. BFC 理解

BFC（块级格式化上下文）是一个独立的渲染区域，它规定了内部元素如何布局，以及与外部元素的相互关系和作用。创建 BFC 的方式有：

1. 根元素（html）。
2. 浮动元素（float 不是 none）。
3. 绝对定位元素（position 为 absolute 或 fixed）。
4. 行内块元素（display 为 inline-block）。
5. 表格单元格（display 为 table-cell）。
6. overflow 不为 visible 的块元素。

BFC 的作用主要有：

1. 避免外边距折叠，当两个相邻的块级元素都处于同一个 BFC 中时，它们的外边距不会合并。

2. 清除浮动，BFC 内部的浮动元素不会影响外部元素的布局。

3. 自适应两栏布局，利用 BFC 的特性可以实现一侧固定，一侧自适应的布局。

4. 元素水平垂直居中的方法

• 水平居中：
• 行内元素：可以通过设置父元素的 text-align:center 来实现。
• 块级元素：
• 定宽块级元素，可以设置其 margin:0 auto。
• 不定宽块级元素，可以使用 flex 布局，将父元素 display:flex; justify-content:center。
• 使用绝对定位和 transform，设置元素 position:absolute; left:50%; transform:translateX (-50%);
• 垂直居中：
• 单行文本：设置元素的 line-height 等于其 height。
• 块级元素：
• 使用 flex 布局，将父元素 display:flex; align-items:center。
• 使用绝对定位和 transform，设置元素 position:absolute; top:50%; transform:translateY (-50%);
• 对于定高的块级元素，也可以通过设置其 padding-top 和 padding-bottom 相等来实现近似垂直居中。
• 水平垂直居中：
• 使用 flex 布局，将父元素 display:flex; justify-content:center; align-items:center。
• 使用绝对定位和 transform，设置元素 position:absolute; top:50%; left:50%; transform:translate (-50%, -50%);
• 利用 table-cell 布局，将父元素 display:table-cell; vertical-align:middle; text-align:center，子元素设置为 inline-block。

1. CSS3 新增特性

• Flexbox 布局：一种灵活的盒模型布局方式，通过设置 display:flex 将元素变为弹性容器，容器内的子元素可以通过 justify-content（水平对齐方式）、align-items（垂直对齐方式）等属性进行灵活布局，适用于各种响应式布局场景，尤其是需要自适应宽度和高度的布局。
• Grid 布局：网格布局，将页面划分为网格，通过设置 display:grid 创建网格容器，使用 grid-template-columns（定义列）、grid-template-rows（定义行）等属性精确控制元素在网格中的位置和大小，适合复杂的页面布局。
• 动画（@keyframes） ：通过 @keyframes 规则定义动画序列，然后使用 animation 属性将动画应用到元素上，如：

@keyframes example { from { transform: translateX(0); } to { transform: translateX(100px); } } .box { animation: example 5s linear infinite;

}

这段代码定义了一个名为 example 的动画，让元素在 5 秒内从初始位置水平移动到 100px 处，线性运动且无限循环。

• 过渡（transition） ：用于在元素的属性值发生变化时添加过渡效果，例如：

.box { width: 100px; height: 100px; background-color: red; transition: width 2s ease; } .box:hover { width: 200px;

}

当鼠标悬停在.box 元素上时，其宽度从 100px 过渡到 200px，过渡时间为 2 秒，过渡效果为 ease（缓动效果）。

• 媒体查询（@media） ：用于根据设备的屏幕尺寸、分辨率等条件应用不同的样式，实现响应式设计。例如：

@media screen and (max-width: 600px) { .box { width: 100%; }

}

当屏幕宽度小于等于 600px 时，.box 元素的宽度变为 100%。

1. flexbox 布局及适用场景

Flexbox 布局（弹性盒布局模型）是 CSS3 中用于灵活布局的一种方式。它通过将容器设置为 display:flex，使容器内的子元素成为弹性项。主要属性包括：

• 容器属性：
• flex-direction：定义主轴方向，可选值有 row（默认，水平方向从左到右）、row-reverse（水平方向从右到左）、column（垂直方向从上到下）、column-reverse（垂直方向从下到上）。
• justify-content：定义弹性项在主轴上的对齐方式，可选值有 flex-start（默认，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，弹性项之间间隔相等）、space-around（弹性项周围间隔相等）。
• align-items：定义弹性项在交叉轴上的对齐方式，可选值有 flex-start（顶部对齐）、flex-end（底部对齐）、center（垂直居中对齐）、baseline（基线对齐）、stretch（拉伸，默认值，弹性项在交叉轴方向拉伸以填充容器）。
• flex-wrap：定义弹性项是否换行，可选值有 nowrap（默认，不换行）、wrap（换行）、wrap-reverse（换行且顺序反转）。
• 弹性项属性：
• flex-grow：定义弹性项的放大比例，默认值为 0，即不放大。如果所有弹性项的 flex-grow 都为 1，则它们将平均分配剩余空间。
• flex-shrink：定义弹性项的缩小比例，默认值为 1，即当空间不足时会缩小。如果设置为 0，则该弹性项不会缩小。
• flex-basis：定义弹性项在分配多余空间之前的初始大小，可以设置为具体的长度值（如 px、em 等）或 auto（默认，根据内容自动计算）。
• flex：是 flex-grow、flex-shrink 和 flex-basis 的简写属性，例如 flex:1 表示 flex-grow:1; flex-shrink:1; flex-basis:0%。

适用场景包括：

1. 导航栏布局，通过设置 flex-direction 为 row，利用 justify-content 属性实现导航项的水平对齐和分布。

2. 卡片式布局，将卡片容器设置为 flex 容器，通过 flex-wrap 实现卡片的自动换行和排列。

3. 页面整体布局，如实现一侧固定，一侧自适应的两栏布局，通过设置 flex-grow 属性来分配空间。

4. CSS 预编语言理解及区别

CSS 预编语言是一种扩展 CSS 功能的语言，通过增加变量、函数、混合等特性，使 CSS 代码更易于维护和管理。常见的 CSS 预编语言有 Sass（包括 SCSS 语法）、Less 和 Stylus 。

• Sass（SCSS） ：是最早出现的 CSS 预编语言之一，它支持变量、嵌套规则、混合、继承等功能。SCSS 语法与 CSS 语法非常接近，只是增加了一些扩展，例如：

primary-color: #007bff; body { background-color: primary-color; }

在这个例子中，定义了一个变量 $primary-color，并在 body 选择器中使用该变量设置背景颜色。Sass 还支持嵌套规则，例如：

nav { ul { list-style-type: none; li { display: inline-block; a { text-decoration: none; color: $primary-color; } } } }

通过嵌套可以更直观地表示 HTML 元素之间的层级关系。

• Less：也是一种流行的 CSS 预编语言，它的语法和 Sass 类似，但在一些细节上有所不同。Less 同样支持变量、混合、嵌套等功能，例如：

@primary-color: #007bff; body { background-color: @primary-color; } 与 Sass 不同的是，Less 使用 @符号来定义变量。在混合方面，Less 的语法更加简洁，例如： .border-radius(@radius) { border-radius: @radius; } .box { .border-radius(5px); }

在这个例子中，定义了一个名为.border-radius 的混合，然后在.box 选择器中直接使用该混合。

• Stylus：语法相对简洁，省略了一些符号，例如变量定义不需要特殊符号，例如：

primaryColor = #007bff body background-color primaryColor

Stylus 也支持嵌套、混合等功能，并且在函数和表达式方面有更强大的功能。

它们的区别主要体现在语法上，选择哪种预编语言可以根据团队的习惯和项目需求来决定。

总结：

2025年前端竞争更注重“技术深度+跨界能力”，建议以TypeScript为核心，深耕主流框架与新兴领域（AI/鸿蒙），同时通过系统性项目与工具辅助面试准备。保持对技术趋势的敏感度，将年龄与经验转化为差异化竞争力。

前端八股文获取【点此】