前端最新面试题及答案 (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都成功时返回结果数组；任何一个失败立即rejectPromise.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>;
}
)
