前端最新面试题及答案 (2025) 前端最新面试题及答案 (2025) JavaScript 核心 1. ES6+ 新

前端最新面试题及答案 (2025)

JavaScript 核心

1. ES6+ 新特性

问题: 请解释 ES6 中 let/const 与 var 的区别，以及箭头函数的特点。

答案:

let/const vs var:
作用域: let/const 是块级作用域，var 是函数作用域
变量提升: var会提升变量，let/const不会(有暂时性死区)
重复声明: var允许重复声明，let/const不允许
const声明必须初始化且不能重新赋值(对象属性可修改)
箭头函数:
语法更简洁
没有自己的this，继承外层this值
不能作为构造函数使用(new)
没有arguments对象，可用rest参数替代

2. Promise与异步编程

问题: Promise.all、Promise.race、Promise.allSettled有什么区别？

答案:

Promise.all:
所有promise都成功时返回结果数组；任何一个失败立即reject
Promise.race:
第一个settled的promise决定结果(无论成功失败)
Promise.allSettled:
等待所有promise完成(无论成功失败)，返回每个的结果状态数组

// Promise.allSettled示例  
Promise.allSettled([promise1, promise2]).then(results => {  
results.forEach(result => {  
if(result.status === 'fulfilled') {  
console.log('成功:', result.value);  
} else {  
console.log('失败:', result.reason);  
}  
});  
});

React

1. React Hooks

问题: useEffect和useLayoutEffect有什么区别？请给出使用场景示例。

答案:

	useEffect	useLayoutEffect
执行时机	DOM更新后异步执行	DOM更新前同步执行
使用场景	API请求、订阅等	DOM测量、同步DOM操作

// useLayoutEffect示例：测量DOM元素尺寸  
function MeasureExample() {  
const [size, setSize] = useState({});  
const ref = useRef();  
  
useLayoutEffect(() => {  
setSize({  
width: ref.current.offsetWidth,  
height: ref.current.offsetHeight  
});  
}, []);  
  
return <div ref={ref}>Size: {JSON.stringify(size)}</div>;  
}

2. React性能优化

问题: React.memo和useMemo有什么区别？如何正确使用它们？

答案:

React.memo:
用于组件记忆化，避免不必要的重新渲染(浅比较props)
useMemo:
用于计算结果记忆化，避免重复计算

// React.memo示例  
const MyComponent = React.memo(function MyComponent(props) {  
/* render using props */  
});  
  
// useMemo示例  
function App({ list }) {  
const sortedList = useMemo(() => (  
[...list].sort((a, b) => a.value - b.value)  
), [list]);  
  
return <List items={sortedList} />;  
}

Vue

Vue3 Composition API

问题: Vue3的setup函数与Vue2的Options API相比有哪些优势？

答案:

逻辑组织更好:

Options API将逻辑分散(data, methods, computed等)
Composition API可将相关逻辑组织在一起

更好的类型推断:
Composition API对TypeScript支持更好
代码复用性高:
可使用自定义组合式函数轻松复用逻辑
更小的生产包体积:
基于函数的API对tree-shaking更友好

// Composition API示例：计数器逻辑复用  
export function useCounter() {  
const count = ref(0);  
  
function increment() {  
count.value++;  
}  
  
return { count, increment };  
}  
  
// Component中使用：  
setup() {  
const { count, increment } = useCounter();  
  
return { count, increment };  
}

TypeScript

TS高级类型应用场景分析题（以下为题目）

Q：请说明`Partial<T>`、`Required<T>`和`Readonly<T>`这些工具类型的用途及其实现原理

A：

这三种都是TypeScript内置的工具类型：

1️⃣ Partial<T>
• 用途：将类型T的所有属性变为可选属性
• 实现：

type Partial<T> = { [P in keyof T]?: T[P] };

• 应用场景：适用于需要部分更新对象的场景（如表单编辑）

2️⃣ Required<T>
• 用途：将类型T的所有属性变为必选属性（与Partial相反）
• 实现：

type Required<T> = { [P in keyof T]-?: T[P] };

• 应用场景：确保API返回完整数据时使用

3️⃣ Readonly<T>
• 用途：将类型T的所有属性变为只读属性
• 实现：

type Readonly<T> = { readonly [P in keyof T]: T[P] };

• 应用场景：防止配置对象被意外修改

Q：（进阶）如何实现一个`Mutable<T>`工具类型，能够移除T中所有属性的readonly修饰符？

A：

可以通过映射类型中的The Remapping via as特性实现：

type Mutable<T> = {  
-readonly [P in keyof T]: T[P];  
};  
  
/* ------ Test Case ------ */  
  
interface Todo {  
readonly title: string;  
readonly description: string;  
}  
  
type MutableTodo = Mutable<Todo>;  
/*  
等效于：  
{  
title: string;  
description: string;  
}  
*/

关键点说明：
1️⃣ -readonly语法用于移除修饰符（同理可用-?移除可选修饰符）

Q：（实战）结合条件类型和工具类型实现一个`NullableProperties<T>`，使T中所有非函数属性变为可为null的类型

A：

需要结合条件类型判断属性值是否为函数：

type NullableProperties<T> = {  
[K in keyof T]: T[K] extends Function ? T[K] : T[K] | null;  
};  
  
/* ------ Test Case ------ */  
  
interface User {  
name: string;  
age: number;  
sayHi(): void; // ⚠️保持原样不变成null  
}  
  
type NullableUser = NullableProperties<User>;  
  
/*  
等效于：  
{  
name: string | null;  
age: number | null;  
sayHi(): void; // 👈保持Function不变  
}  
*/

Web性能优化

CDN优化策略分析题（以下为题目）

Q：CDN如何通过边缘节点提升网站性能？请描述其工作原理和至少三个优化技巧

A：

CDN（内容分发网络）通过地理分布的边缘节点缓存静态资源来加速访问：

🌍 工作原理：
1️⃣ DNS解析会将用户请求路由到最近的边缘节点
2️⃣ HIT则直接返回缓存的资源（减少源站压力）
3️⃣ MISS时从源站拉取并缓存新内容

🔧 优化技巧：
1️⃣ 多级缓存策略
• Edge节点缓存热数据
• Mid层缓存更大范围数据
• Origin shielding保护源站

2️⃣ 智能内容刷新
• Cache-Control设置合适的max-age
• Surrogate Key实现精准清除特定内容

3️⃣ 协议优化
• HTTP/2或HTTP/3提升传输效率
• TLS会话票证减少SSL握手开销

Web安全防护策略分析题（以下为题目）

Q：现代Web应用面临的主要安全威胁有哪些？针对XSS和CSRF分别说明防御方案

A：

🔒 主要安全威胁矩阵：
│───────│───────────────────────────│
│ OWASP │ Threat Example │
│───────│───────────────────────────│
│ #1 │ Injection (SQLi等) │
│ #5 │ Broken Access Control │
│ #7 │ XSS │
│ #8 │ CSRF │
│───────│───────────────────────────│

🛡️ XSS防御方案：
▸输入输出编码（DOMPurify库）
▸CSP策略限制脚本来源（Content-Security-Policy头）
▸HttpOnly标记保护Cookie

⚔️ CSRF防御方案：
▸SameSite Cookie属性（Lax/Strict模式）
▸CSRF Token验证机制
▸关键操作要求二次认证

Webpack构建优化实践分析题（以下为题目）

Q：针对大型项目如何进行Webpack构建速度优化？请提供具体实施方案

A：

🚀 分层优化方案：

🔧 基础工具升级

# Before:  
"webpack": "^4.x"  
  
# After:  
"webpack": "^5.75.0",  
"swc-loader": "^0.2.x" // 👈替换babel-loader

⚡️ 并行化处理

module.exports = {  
parallelism: os.cpus().length -1, // CPU核数减一  
plugins: [new ThreadsPlugin()] // HappyPack替代方案  
};

📦 精细化缓存策略

cache: {  
type: 'filesystem',  
cacheDirectory: path.resolve('.cache'),  
buildDependencies: { config: [__filename] }  
},  
  
externalsTypeModule({ // CDN externals  
lodash:'_',  
vue:'Vue'  
})

📊 构建分析辅助

npx webpack-bundle-analyzer stats.json  
  
# 👆识别大模块后进行针对性优化

前端最新面试题及答案 (2025)