脸书前端工程师面试题及答案.docxVIP

第PAGE页共NUMPAGES页

2026年脸书前端工程师面试题及答案

一、选择题（共5题，每题2分）

1.题目：在React中，以下哪个钩子用于在组件卸载时执行清理操作？

A.`useEffect`

B.`useContext`

C.`useRef`

D.`useCallback`

答案：A

解析：`useEffect`钩子可以用于在组件挂载、更新和卸载时执行副作用操作。当第三个参数为空数组时，仅在组件卸载时执行清理操作。

2.题目：以下哪个CSS选择器具有最高的特异性？

A.`div`

B.`#id`

C.`.class`

D.`divp`

答案：B

解析：CSS选择器的特异性从高到低依次为ID选择器（`#id`）、类选择器（`.class`）、标签选择器（`div`），以及后代选择器（`divp`）。ID选择器的特异性最高。

3.题目：在JavaScript中，以下哪个方法用于将数组中的所有元素合并成一个字符串？

A.`map`

B.`reduce`

C.`join`

D.`filter`

答案：C

解析：`join`方法用于将数组中的所有元素合并成一个字符串，并可以指定分隔符。例如，`[1,2,3].join(-)`返回`1-2-3`。

4.题目：以下哪个HTTP状态码表示请求成功？

A.404

B.500

C.200

D.302

答案：C

解析：HTTP状态码200表示请求成功。404表示未找到资源，500表示服务器内部错误，302表示临时重定向。

5.题目：在Web性能优化中，以下哪个技术可以显著减少页面加载时间？

A.CSS动画

B.WebP图片格式

C.JavaScript框架

D.重定向

答案：B

解析：WebP图片格式比JPEG和PNG更高效，可以显著减少图片大小，从而加快页面加载速度。CSS动画和JavaScript框架可能会增加加载时间，重定向会导致额外的网络请求。

二、简答题（共3题，每题5分）

6.题目：简述React中的虚拟DOM是什么，以及它的优点。

答案：

虚拟DOM（VirtualDOM）是React的核心概念之一，它是一个轻量级的JavaScript对象，用于表示UI的树状结构。当组件状态发生变化时，React会重新计算虚拟DOM，并与上一次的虚拟DOM进行比较，找出差异，然后只对DOM进行必要的更新，从而提高性能。

优点：

-性能优化：通过减少直接操作DOM的次数，提高页面性能。

-跨平台支持：虚拟DOM可以渲染到不同的平台，如Web、移动端等。

-开发体验：简化开发流程，提供更直观的组件化开发方式。

7.题目：简述CSSGrid布局与Flexbox布局的区别。

答案：

CSSGrid布局和Flexbox布局都是现代CSS布局技术，但它们的应用场景和特点不同。

CSSGrid布局：

-适用于二维布局（行和列）。

-可以同时控制行和列的布局。

-适合复杂布局，如网格系统。

Flexbox布局：

-适用于一维布局（行或列）。

-主要用于父容器和子元素之间的布局。

-适合简单的布局，如导航栏、按钮等。

8.题目：简述JavaScript中的闭包是什么，以及它的应用场景。

答案：

闭包是指在一个函数内部定义的函数可以访问外部函数的变量。即使外部函数已经执行完毕，内部函数仍然可以访问这些变量。

应用场景：

-数据封装：隐藏内部状态，防止外部直接访问。

-函数柯里化：将多参数函数转换为单参数函数。

-模块化开发：在模块中封装私有变量和函数。

三、代码题（共3题，每题10分）

9.题目：请编写一个React组件，实现一个简单的计数器，包含增加和减少按钮。

答案：

jsx

importReact,{useState}fromreact;

constCounter=()={

const[count,setCount]=useState(0);

constincrement=()={

setCount(count+1);

};

constdecrement=()={

setCount(count-1);

};

return(

div

h1Count:{count}/h1

buttononClick={increment}Increment/button

buttononClick={decrement}Decrement/button

/div

);

};

exportdefaultCounter;

10.题目：请编写一个JavaScript函数，实现数组去重。

答案：

javascript

functionunique