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

前端最新面试题及答案 (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>;  
}