前端最新面試題及答案 (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>;
}
)
