前端经典面试题（1000+道前端面试题包含JS、Vue、React、Node、TypeScript、工程化等）

2025年，公司面试了100多个前端开发，其中大部分都在八股文这里卡住了，我把近半年所有的高频面试题整理出来了，直接拿去背吧！！！

需要更多前端25年面试资料，或面试题，请看文末嗱

JavaScript

[单选题]

有以下ES6 代码

function* gen(){
yield 1;
yield 2;
yield 3;

下面选项描述正确的是哪个？

A. gen0执行后返回2

B. gen0执行后返回undefined

C. gen0执行后返回一个Generator 对象

D. gen0执行后返回1

答案：C

提示：

这是Es6 的新 feature，function 后面带 * 的叫做 generator function。甬数运行时，返回一个迭代器。

[不定项选择题]

语句 vararr=[ab,c,d;执行后，数组 arr中每项都是一个整数，下面得到其中最大整数语句正确的是哪几项？

A. Math.max(arr)

B. Math.max(arr[0], arr[1], arr[2], arr[3])

C. Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])

D. Math.max.apply(Math,arr)

答案：BCD

提示：

Å选项错误

因为函数Math.max(x):的参数是 Number类型，可以使小数，整数，正数，负数或者是0.如果不是上面所述类型就会返回NaN.

[问答题]

写一个 traverse 函数，输出所有页面宽度和高度大于 50 像素的节点。

---

参考：

<script language="javascript">

function traverse() {

var arr = [];

var elements = [];

if (document.all) {

elements = document.all;

} else {

elements = document.getElementsByTagName("*");

}

//console.log(elements.length);

for (var i = 0; i < elements.length; i++) {

var ele = elements[i];

//console.log(ele.tagName);

//width 返回的是字符串 offsetWidth 返回的是带边框的 Number 型的数字

var width = parseFloat(ele.style.width) || ele.offsetWidth;

//console.log(width);

var height = parseFloat(ele.style.height) || ele.offsetHeight;

//console.log(height);

if (width > 50 && height > 50) {

arr.push(elements[i].tagName);

}

}

return arr;

}

window.onload=function() //注意 onload 的使用方式

{

console.log(traverse());

console.log("a");

console.log('a');

}

    </script>

.

[问答题]

请写一个表格以及对应的 CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。

---

参考：

<table class="table">

<tr><td>第一行</td></tr>

<tr><td>第二行</td></tr>

<tr><td>第三行</td></tr>

<tr><td>第四行</td></tr>

</table>

<style>

.table tr:nth-child(odd){

background-color:white;

}

.table tr:nth-child(even){

background-color:gray;

}

.table tr:hover{

background-color:yellow;

}

</style>

[问答题]

写一个求和的函数 sum，达到下面的效果

// Should equal 15

sum(1, 2, 3, 4, 5);

// Should equal 0

sum(5, null, -5);

// Should equal 10

sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1, 'E', 1, 'F', 1, 'G', 1);

// Should equal 0.3, not 0.30000000000000004

sum(0.1, 0.2);

参考：

unction sum() {

var nResult = 0;

for (var i = 0, l = arguments.length; i < l; i++) {

nResult += window.parseFloat(arguments[i]) || 0;

}

return nResult.toFixed(3) * 1000 / 1000;

}

....................................

Vue

1.Vue有了数据响应式，为何还要diff？

参考答案:

Vue中的数据响应式和虚拟DOM的diff算法是两个不同的概念，它们分别解决了不同的问题，相互协作以提高页面渲染的效率和性能。

2.vue3为什么不需要时间分片?

参考答案：

Vue3不需要时间分片(timeslicing）主要是因为它的核心渲染机制和性能优化策略已经足够高效，能够在大多数情况下提供流畅的用户体验。

3. vue3为什么要引l入Composition API？

参考答案：

Vue3引入CompositionAPI的原因主要是为了更好地解决以下几个问题：

1. 更好的代码组织和重用
2. 更好的逻辑复用
3. 更好的TypeScript支持
4. 适应函数式编程趋势

4.谈谈Vue事件机制，并手写$on、$off、$emit、$once

参考答案：

Vue 的事件机制允许组件之间进行通信，通过$on、$off、$emit和$once等方法进行事件的订阅、取消订阅、触发和一次性订阅。我们可以通过手写这些方法来理解其工作原理。

5.computed计算值为什么还可以依赖另外一个computed计算值？

参考答案：

在Vue中，computed计算属性可以依赖其他computed计算属性，因为Vue的响应式系统能够正确地追踪依赖关系。

篇幅原因，只给出答案，详细答案解析请看文末

...............................

React

1. React Portals有什么用?

参考答案：

ReactPortals是React提供的一种机制，用于将子组件渲染到父组件DOM层次结构之外的位置。它在处理一些特殊情况下的UI布局或交互时非常有用。以下是一些使用ReactPortals的常见情况：

1. 在模态框中使用：当你需要在应用的根DOM结构之外显示模态框(对话框）时，ReactPortals可以帮助你将模态框的内容渲染到根DOM之外的地方，而不影响布局。

2. 处理z-index问题：在一些复杂的布局中，可能存在z-index的层级关系导致组件无法按照预期的方式叠加显示。使用ReactPortals可以将组件渲染到具有更高z-index的容器中，以解决这些问题。

3. 在全局位置显示组件：如果你希望某个组件在页面的固定位置显示，而不受父组件的定位影响，ReactPortals可以将该组件渲染到body或其他容器中。

4. 在动画中使用：当你需要在页面中的某个位置执行动画时，ReactPortals可以帮助你将动画的内容渲染到离该位置更近的DOM结构中，以提高动画性能。

2.react 和 react-dom是什么关系?

参考答案：

react和react-dom是React 库的两个主要部分，它们分别负责处理不同的事务。它们之间的关系可以理解为：

1. react：这是React 库的核心部分，包含了React的核心功能，如组件、状态、生命周期等。它提供了构建用户界面所需的基本构建块。当你编写React组件时，你实际上是在使用react包。

2. react-dom：这是React 专门为DOM环境提供的包，它包含了与浏览器DOM相关的功能。react-dom提供了用于在浏览器中渲染React 组件的方法，包括ReactDoM.render。在Web开发中，react-dom被用于将React应用渲染到浏览器的DOM中。

基本上，react和react-dom是为了分离React的核心功能，以便更好地处理不同的环境和平台。这种分离使得React更加灵活，可以适应不同的渲染目标，而不仅仅局限于浏览器环境。

3.React中为什么不直接使用requestIdleCallback?

参考答案：

在React中，使用requestIdleCallback直接可能会导致一些问题，因此React并没有直接采用这个API。requestIdleCallback是一个浏览器提供的API，用于在浏览器空闲时执行任务，但在React中，有一些特殊的考虑：

1. 一致性问题：requestIdleCallback的执行时机不是完全可控的，这可能导致在不同环境中表现不一致。React希望提供一致的行为，以确保开发者在不同浏览器和设备上获得可预测的性能表现。

2．实时性问题：React通常希望能够响应用户输入并立即更新UI，而requestIdleCallback执行的时机不一定能够满足实时性的需求。这可能导致用户体验上的问题，特别是在需要快速响应的场景中。

3. 调度器控制：React内部有一个任务调度器，负责管理和调度任务的执行。直接使用requestIdleCallback可能破坏React的任务调度策略，导致不可预测的结果。

为了解决这些问题，React引入了scheduler模块，该模块允许React更好地控制任务的调度和执行。React可以根据自身的需要在不同优先级下安排任务，并确保在保证实时性的同时，提供一致的性能表现。

虽然requestIdleCallback是一个有趣的浏览器API，但在React这样的复杂UI库中，需要更高度的控制和一致 性，因此React选择了自己实现任务调度和执行的机制。

4.为什么react需要fiber架构，而Vue却不需要?

参考答案：

React引I入Fiber架构的主要原因是为了实现更好的异步渲染和更高效的任务调度。Fiber架构使得React能够更细粒度地控制和中断渲染过程，以便更好地响应用户交互、实现懒加载等功能。Vue在设计上采用了不同的策略，因此并不需要类似于Fiber的架构。

以下是一些原因解释为什么React选择了Fiber架构，而Vue没有类似的架构：

1. 异步渲染和任务优先级：React的Fiber架构使得实现异步渲染和任务优先级变得更加容易。这对于复杂的用户界面和大规模应用中的性能优化非常重要。React可以通过中断和恢复渲染过程，根据任务的优先级调度渲染工作，从而更好地响应用户输入和满足实时性要求。

2. 更好的中断和恢复机制：Fiber架构提供了一种更灵活的中断和恢复机制，允许React在渲染过程中暂停、中断，然后根据优先级恢复。这使得React能够更好地处理复杂的渲染逻辑，并在需要时放弃低优先级的工作。

3. 增量更新：Fiber允许React实现增量更新，即只更新变化的部分而不必重新渲染整个组件树。这对于提高渲染性能和减少不必要的工作非常有帮助。

Vue在设计上采用了一种不同的响应式系统和渲染机制，不需要像React那样进行复杂的中断和任务调度。Vue的设计目标可能更注重简洁性和开发体验，而React的目标之一是提供更灵活和强大的性能优化工具。每个框架在设计上都有权衡和取舍，选择适合其目标和使用场景的策略。

5.子组件是一个Portal，发生点击事件能冒泡到父组件吗？

参考答案：

React 的 Portal 通过 React 的 context 和事件冒泡的机制工作。

在理解这个问题之前，首先要了解一些基本知识：

1. React Context：React使用context 来存储组件树的一些信息，比如事件处理程序。当组件使用Portal时，Portal在React内部仍然保持在父组件树中，即使在DOM上渲染到其他地方。也就是说，Portal的context依然从其父组件继承而来。

2. DOM事件冒泡：DOM中的事件（例如点击事件）通常会从触发事件的元素开始，然后逐步向上冒泡到父元素，直到document元素。在这个过程中，事件会按照DOM树的层级一层层地向上传递。

3. React 的事件代理：React 使用事件代理模式将所有事件都代理到顶层（document或者rootDOM节点)进行处理。这意味着当在子组件中触发一个事件时，无论子组件是否使用了Portal，React都会将事件传递到其父组件，然后逐级往上冒泡，直到到达代理事件的顶层。

在React中，当一个子组件使用Portal将其内容渲染到其他DOM节点时，尽管在DOM结构上子组件不再是父组件的直接子节点，但在React的组件树中，子组件仍然是父组件的子节点。这意味着React在监听和处理事件时，会沿着组件树的路径（而不是DOM树的路径）冒泡事件。因此，子组件中触发的事件仍然会冒泡到父组件。总结：Portal在DOM结构上将子组件渲染到其他位置，但在React的组件树中，它仍然是父组件的子组件。这使得事件可以从子组件沿着组件树冒泡到父组件。

...............................

Node.js

1.common.js和es6中模块引入的区别？

参考答案:

CommonJs和ES6模块系统在语法和行为上有显著的区别：

一、CommonJS

CommonJs是一种模块系统，主要用于Node.js 环境。它使用require函数来引l入模块，并使用module.exports来导出模块。

2.为什么Node在使用esmodule时必须加上文件扩展名？

参考答案：

这个事情分两部分说。

第一个问题是，我们需要用代码内容以外的信息（比如文件扩展名来确定一段代码是否是esmodule。这件事情的根子是在TC39，在设计esmodule时就无法从语法上严格区分一段代码到底是esmodule还是传统的script (注意 commonjs 本质上仍然是传统script)。有人可能会问，难道不是有import、export语句就是es module啊？从开发者的理解上来说，确实是这样。但问题是，没有import、export语句也不代表就不是es module。

3.浏览器和Node中的事件循环有什么区别？

参考答案：

浏览器

关于微任务和宏任务在浏览器的执行顺序是这样的：

· 执行一只task（宏任务）

· 执行完micro-task队列（微任务）

如此循环往复下去

常见的 task(宏任务)比如:setTimeout、setInterval、script(整体代码)、I/O操作、UI渲染等。常见的micro-task 比如: new Promise().then(回调)、MutationObserver(html5新特性)等。

...............................

TypeScript

1. 说说对TypeScript中命名空间与模块的理解?区别？
2. 说说你对 typescript 的理解?与javascript 的区别?
3. Typescript中泛型是什么?
4. TypeScript中有哪些声明变是的方式?
5. 什么是Typescript的方法重载?
6. 请实现下面的 sleep 方法
7. typescript 中的 is 关键字有什么用？
8. TypeScript支持的访问修饰符有哪些?
9. 请实现下面的myMap 方法
10. 请实现下面的 treePath 方法
11. 请实现下面的 product 方法
12. 请实现下面的 myAll 方法
13. 请实现下面的 sum方法
14. 请实现下面的mergeArray方法
15. 实现下面的firstSingleChar方法
16. 实现下面的 reverseWord 方法
17. 如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型？
18. 请补充 objToArray 函数
19. 使用TS实现一个判断传入参数是否是数组类型的方法
20. TypeScript的内置数据类型有哪些?

...............................

工程化

1. package.json文件中的 devDependencies 和 dependencies 对象有什么区别?
2. webpack 5 的主要升级点有哪些?
3. 说下Vite的原理
4. 与webpack类似的工具还有哪些?区别?
5. 说说如何借助webpack来优化前端性能？
6. 说说webpack proxy工作原理？为什么能解决跨域?
7. 说说webpack的热更新是如何做到的？原理是什么?
8. 面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路?
9. 说说webpack中常见的Plugin?解决了什么问题?
10. 说说webpack中常见的Loader?解决了什么问题?
11. 说说webpack的构建流程?
12. 说说你对webpack的理解？解决了什么问题?
13. webpack loader 和 plugin实现原理
14. 如何提高webpack的构建速度?
15. 说说 webpack-dev-server 的原理

...............................

获取以上所有详细题库，或需要更多前端资料【点此传送门】