字节跳动前端工程师面试题及答案.docxVIP

第PAGE页共NUMPAGES页

2026年字节跳动前端工程师面试题及答案

一、基础知识（5题，每题6分，共30分）

1.请解释JavaScript中的闭包是什么，并说明它在前端开发中有哪些应用场景？

答案：

闭包是指一个函数可以访问其外部函数作用域中的变量。即使在内部函数执行完毕后，外部函数的局部变量依然可以被内部函数访问和修改。

应用场景：

-私有变量：通过闭包隐藏内部实现，防止外部直接访问。

-事件处理：在回调函数中访问外部状态，如节流、防抖。

-模块化开发：使用立即执行函数表达式（IIFE）封装代码，避免全局污染。

2.比较事件冒泡和事件捕获的区别，并说明如何阻止事件冒泡？

答案：

-事件冒泡：事件从子节点向上传播至父节点，默认行为。

-事件捕获：事件从父节点向下传播至子节点，通常用于性能优化。

-阻止冒泡：`event.stopPropagation()`或`event.preventDefault()`。

3.什么是CSS中的盒模型？如何区分标准盒模型和IE盒模型？

答案：

盒模型包括：内容（content）、边框（border）、外边距（margin）、内边距（padding）。

-标准盒模型：`box-sizing:content-box`，宽高仅包含内容。

-IE盒模型：`box-sizing:border-box`，宽高包含内容和边框。

4.解释CSS中的Flexbox布局原理及其优缺点。

答案：

Flexbox是弹性布局，支持一维排列（行或列）。

优点：

-响应式设计，自动适应容器大小。

-对齐和分布子元素灵活。

缺点：

-语义不够清晰，嵌套Flexbox可能复杂。

5.什么是WebP格式？与JPEG、PNG相比有何优势？

答案：

WebP是Google开发的图像格式，支持有损和无损压缩。

优势：

-文件体积更小（约25%）。

-支持透明背景和动画。

二、JavaScript进阶（6题，每题5分，共30分）

6.请实现一个函数，实现数组去重，并说明时间复杂度。

答案：

javascript

functionunique(arr){

return[...newSet(arr)];

}

//时间复杂度：O(n)

7.解释Promise.all的用法及其异常处理方式。

答案：

`Promise.all`等待所有Promise完成，返回新Promise。

异常处理：

javascript

Promise.all(promises)

.then(results=console.log(results))

.catch(error=console.error(error));

8.如何实现一个深拷贝函数？

答案：

javascript

functiondeepClone(obj){

if(obj===null||typeofobj!==object)returnobj;

constclone=Array.isArray(obj)?[]:{};

for(letkeyinobj){

clone[key]=deepClone(obj[key]);

}

returnclone;

}

9.解释原型链和继承的区别。

答案：

原型链是对象查找机制，通过`__proto__`连接。继承可通过原型链（ES5）或`class`（ES6）实现。

10.什么是异步编程？如何实现？

答案：

异步编程处理非阻塞操作，如网络请求。实现方式：回调、Promise、async/await。

11.请编写一个函数，实现字符串的千分位格式化（如1234567-1,234,567）。

答案：

javascript

functionformatNumber(num){

returnnum.toString().replace(/\B(?=(\d{3})+(?!\d))/g,,);

}

三、React/Vue框架（7题，每题4分，共28分）

12.React中的虚拟DOM是什么？它的优缺点是什么？

答案：

虚拟DOM是轻量级DOM树副本，React通过对比优化渲染。

优点：

-减少直接DOM操作。

-跨平台（Web/移动端）。

缺点：

-开销较大，复杂应用需注意性能。

13.Vue中的响应式原理是什么？

答案：

Vue通过`Object.defineProperty`劫持属性，监听数据变化并更新DOM。

14.解释React中的useEffect钩子用法，包括依赖项的作用。

答案：

`useEffect(()={/.../},[deps])`，依赖项为空时仅在挂载时执