2025年前端面试题(附答案及解析)(2025年).docxVIP

2025年前端面试题(附答案及解析)(2025年)

一、JavaScript基础与ES6+

1.问题：`Symbol`的设计目的是什么？在实际开发中有哪些典型应用场景？

答案：`Symbol`是ES6引入的第七种原始数据类型，用于创建唯一且不可变的标识符。其核心设计目的是解决对象属性名冲突问题，尤其是在扩展对象或库开发时避免属性覆盖。典型场景包括：为对象添加私有属性（避免被`for...in`或`Object.keys()`枚举）、定义对象的元属性（如`Symbol.iterator`实现迭代器）、作为常量枚举值（确保唯一性）。

解析：`Symbol`通过`Symbol()`函数提供，每次调用返回唯一值（即使传入相同描述）。例如，为对象添加私有方法时，使用`Symbol`作为属性名可避免外部直接访问；在实现自定义迭代器时，需为对象定义`[Symbol.iterator]`方法，使对象可被`for...of`遍历。需注意`Symbol`属性不会被`JSON.stringify()`序列化，且可通过`Object.getOwnPropertySymbols()`获取所有`Symbol`属性。

2.问题：`let`和`const`声明的变量在块级作用域中的表现有何差异？`const`声明的对象是否可以修改？

答案：`let`声明的变量可重新赋值但不可重复声明，`const`声明的变量必须初始化且不可重新赋值。在块级作用域（如`if`、`for`）中，两者都会形成封闭作用域，避免变量提升导致的问题。`const`声明的对象或数组本身不可重新赋值，但对象的属性或数组的元素可以修改。

解析：例如`constobj={a:1};obj.a=2`是允许的，因为`const`限制的是变量绑定（即`obj`不能指向新对象），而非对象内容。若需完全不可变，需使用`Object.freeze()`。块级作用域的典型例子是循环中使用`let`声明索引变量，避免闭包捕获同一变量的问题（如`for(leti=0;...){setTimeout(()=console.log(i),0)}`会输出0-4，而`var`会输出5个5）。

3.问题：简述JavaScript事件循环（EventLoop）的执行机制，说明微任务（Microtask）和宏任务（Macrotask）的执行顺序。

答案：事件循环是JavaScript处理异步代码的核心机制，其执行流程为：执行调用栈中的同步代码→执行所有微任务队列中的任务→渲染页面→执行宏任务队列中的一个任务→重复此过程。微任务包括`Promise.then/catch/finally`、`MutationObserver`、`queueMicrotask`；宏任务包括`setTimeout`、`setInterval`、`setImmediate`（Node.js）、`I/O`、`UI渲染`等。

解析：例如代码`console.log(1);setTimeout(()=console.log(2),0);Promise.resolve().then(()=console.log(3));console.log(4)`的输出顺序是1→4→3→2。原因是同步代码先执行（输出1、4），然后处理微任务（`Promise.then`输出3），最后处理宏任务（`setTimeout`回调输出2）。需注意`requestAnimationFrame`属于渲染阶段的任务，在微任务之后、宏任务之前执行。

二、Vue3核心原理与实践

4.问题：Vue3响应式系统的实现原理是什么？`reactive`和`ref`的区别是什么？

答案：Vue3通过`Proxy`对象实现响应式，对目标对象的读取（`get`）和设置（`set`）操作进行拦截。读取时收集依赖（将当前活跃的副作用函数存入依赖集合），设置时触发依赖（执行所有收集的副作用函数更新视图）。`reactive`用于对象（包括数组、Map等）的响应式转换，`ref`用于基本类型（如`number`、`string`）或对象的响应式封装，内部通过`value`属性实现代理。

解析：`reactive`的局限性在于无法处理基本类型（因`Proxy`只能代理对象），而`ref`通过包裹一个对象（`{value:x}`）并代理其`value`属性解决此问题。当`ref`用于对象时，会自动调用`reactive`进行深层代理。例如`constcount=ref(0)`，访问时需`count.value`，模板中可直接使用`count`（Vue模板编译器会自动解包`ref`）。

5.问题：Vue3组合式API（CompositionAPI）