Airbnb 前端面试真题全解析（Front End Interview Handbook 企业题库篇）：JavaScript 编码、UI 组件、系统设计与实战复盘-二趣网

Airbnb 前端面试真题全解析（Front End Interview Handbook 企业题库篇）：JavaScript 编码、UI 组件、系统设计与实战复盘

【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbook

导读

Airbnb 的前端面试以"实战导向 + 组件高频复用"著称：既有 Backbone Model 风格的键值对象编码题，也有大量需要在白板或编辑器里现场写出的 UI 组件题，还会穿插 LeetCode 风格的算法轮与聊天应用、旅行预订平台等系统设计轮。本文基于 website/contents/companies/airbnb-front-end-interview-questions.md 的完整题库与候选人口述记录，逐类拆解每道题的考察点与追问方向，并对照本仓库的 React Hooks、前端系统设计等配套资料给出复习主线，帮助你建立一份可落地、可自测的 Airbnb 备战清单。

题库全景：Airbnb 前端面试到底考什么

翻开该文档即可发现，Airbnb 前端面试与其他 FAANG 类公司相比更"务实"——官方题库按四类划分：

环节	典型题目	本质能力
JavaScript 编码	手写 Promise；实现 Backbone Model 风格的`StoreData`键值对象	异步基础 + 发布订阅（Observer）模式
UI 编码	Autocomplete、Star Rating、Tabs、Image Carousel、洗牌发牌	交互细节、动画、可复用组件、可访问性
系统设计	聊天应用（Chat Application）；设计 Airbnb 旅行预订平台	前端架构、数据模型、API 设计、规模与性能
算法	LeetCode 风格题目	CS 基础、数据结构与算法

文档原话提醒："Airbnb 确实设有评估计算机科学基础的轮次，会抛出 LeetCode 风格问题，务必做好准备。"（见原文 Algorithm 一节）。因此答案很简单：把 Airbnb 当作"UI 组件实战 + 算法基础 + 前端系统设计"三位一体的面试准备，缺一不可。

JavaScript 编码轮：`StoreData`（Backbone Model 风格键值对象）

题目与变体

文档记录的原始版本是电话面（Phone Screen）题：

实现一个StoreData类：能添加键值对（key/value），并能监听某个 key 的值变化。这是一个 Backbone Model 风格的、带监听器的键值对象。

文档特别强调"近期变体"又加了两道硬性要求：

增加一个全局change监听器：只要任何 key 发生变化都触发；
unset后监听器不能丢（软删除 soft-delete），当该属性再次被set时，unset 之前挂载的全局监听器与属性级监听器都要重新触发。

2024 年 7 月 12 日的一位候选人也印证了这一模式（原文 quote）：

问的就是 Backbone.js，事件名是change:foo、change:bar；另有一个"任何变更都触发"的全局 change 监听；最狠的是unset时要保留监听器（软删除数据），再次set该属性后，unset 前的全局监听器和属性监听器都要重新触发。

这与本仓库 website/contents/javascript-utility-function.md 中提到的Observer（观察者）模式高度一致——面试官实际考察的就是你能否用事件回调表实现一个最小可用的发布订阅容器。

解题骨架（供实战参考）

以下是满足全部变体要求的一种参考实现思路，可直接作为练习基准：

class StoreData { constructor() { this.data = {}; // 属性级监听器：{ key: Set<fn> } this.listeners = {}; // 全局监听器：任意 key 变更都会触发 this.globalListeners = new Set(); } set(key, value) { const changed = this.data[key] !== value; this.data[key] = value; if (changed) { this.emit(key, value); this.emitGlobal(key, value); } } get(key) { return this.data[key]; } on(key, callback) { // key 为 '*change' 之类时注册到全局监听器 (this.listeners[key] ||= new Set()).add(callback); } change(callback) { this.globalListeners.add(callback); } unset(key) { // 软删除：只删除数据，保留监听器 delete this.data[key]; this.emitGlobal(key, undefined); } emit(key, value) { this.listeners[key]?.forEach((fn) => fn(value, this.data[key])); } emitGlobal(key, value) { this.globalListeners.forEach((fn) => fn(key, value)); } }

需要反复自检的三处关键点（也是追问点）：

软删除语义：unset绝不能清空listeners[key]，否则"重新 set 后监听器不触发"会直接判负；
全局监听器：当以change:foo这类命名空间区分事件时，foo变化既要触发change:foo，也要触发全局change；
值未真正变化的 set：一般约定相同值重复set不触发监听（面试时主动说明你的取舍）。

复习支撑

该题涉及的事件驱动、变更通知等概念，可在仓库 packages/front-end-interview-guidebook/contents/javascript/en-US.mdx 的 JavaScript 问答板块中复习；对 Promise/回调与异步模型的理解可参考 website/contents/javascript-questions.md 中关于 Promise 三态与"Promise 相对回调的优势"两问（见该文件Promises and/or their polyfills与Pros and cons of using Promises instead of callbacks段落）。

UI 编码轮：五个高复用组件逐个拆解

UI 题是 Airbnb 技术面的主战场，且同一个题会被多个候选人重复抽中（从后面 insider tips 可以看到 Image Carousel 出现了至少三次）。逐题给出备战要点：

1. Autocomplete（输入即联想 + 键盘导航）

给定一个输入框和一个返回 JSON 数组的 endpoint，实现 onChange 时的自动补全，并支持在结果列表中用键盘导航。

备战要点：

请求策略：输入防抖（debounce）、取消过期请求（记录 request id 或用AbortController），避免快速输入时旧响应覆盖新响应；
键盘导航：ArrowDown/ArrowUp移动高亮项、Enter选中、Escape收起列表、Tab正常退出，同时保持光标在当前选中项并处理边界回绕；
结果面板：区分"首次 Enter 直接提交表单"与"在联想项上 Enter 选中"两种语义；
可访问性：为结果项设置合适的 ARIA 角色与高亮状态，让屏幕阅读器能感知当前候选。

2. Star Rating（表单内嵌星评组件）

在表单中嵌入一个星评 widget：选择星数并通过普通表单 action 提交正确值；且要能让多个星评组件复用。

这里考的是受控表单集成的工程纪律：

每个 widget 需要独立的表单字段名（如rating-1、rating-2），组件通过name/valueprops 复用，而不是写死单个全局变量；
用隐藏 input（hidden input）承载当前星级，保证普通form action提交时 value 能被序列化带上；
hover 预览与点击锁定状态分离：hover 只影响视觉、点击才写入选中的星星数；
键盘可用：ArrowLeft/ArrowRight调整星级。

3. Tabs 组件

实现本身不难，难点在交互细节：

面板切换时内容懒渲染或按需销毁（避免大量面板同时挂载）；
键盘与 ARIA：role="tablist"/role="tab"/role="tabpanel"，支持左右方向键切换、Home/End跳转首尾，焦点与选中状态保持一致；
组件 API 设计：支持受控（由父组件传activeTab）与非受控（内部自管）两种用法——这也呼应了仓库 website/contents/front-end-system-design.md 中对"组件 API/props 设计"的强调。

4. Image Carousel（变时长轮播 + 倒计时）——Airbnb 最高频真题

原文档记录：

构建一个图片轮播：每张幻灯片停留时长不同，播到最后一张自动停止。追问：每张幻灯片上显示倒计时，倒数到 0 自动切到下一张，并在末尾停下。

文档作者明确标注："倒计时是难点——要在useEffect里用setInterval。"2026 年 1 月 8 日的候选人反馈同样点名：

每张幻灯片时长不同、末张停止；follow-up 是展示倒计时。最难点在于用useEffect内的setInterval把每张的倒计时写对。

为什么难？对比仓库 packages/react-interview-playbook/contents/react-hooks/en-US.mdx 中useEffect一节的四个陷阱清单，这道题几乎全部踩中：

依赖数组漏写导致闭包过期（stale closure）；
在 effect 内更新 state 造成依赖管理不当与无限循环；
计时器未清理导致内存泄漏（见该节memory leaks due to missing cleanup示例，setInterval必须在 effect 返回的 cleanup 中clearInterval）；
切到下一张时若不清掉旧 interval，会出现"多个倒计时同时跑"的竞态。

参考骨架：

function Carousel({ slides }) { const [index, setIndex] = useState(0); useEffect(() => { if (index >= slides.length - 1) return; // 最后一张：停止 const duration = slides[index].duration; const timer = setInterval(() => { setIndex((prev) => Math.min(prev + 1, slides.length - 1)); }, duration); return () => clearInterval(timer); // 清理是关键 }, [index, slides]); return ( <div> <img src={slides[index].src} alt={slides[index].alt} /> <div>下一张倒计时…</div> </div> ); }

建议同时阅读 packages/react-interview-playbook/contents/react-hooks/zh-CN.mdx 的中文对照版本，把"依赖数组 → 何时重跑 → cleanup"的决策链路背熟。

5. 洗牌与逐张发牌动画

洗牌并发出一组 5 张牌。真正的难点是动画：牌要一张一张地翻出。

洗牌用Fisher–Yates原地洗牌保证均匀随机；
"逐张发牌"即每张牌延迟递增地进入"已翻开"状态，配合 CSS transition/动画（翻转、位移）形成序列感；
常见错误：直接用setTimeout修改 state 且不清理、或动画触发条件写在渲染内导致重渲染时动画重播。可复用上面useEffect定时器 + cleanup 的思路来按索引递增解锁卡牌。

系统设计轮：从聊天应用到"设计 Airbnb"

文档给出的系统设计题有两道：

Design a chat application（设计聊天应用）；
Design Airbnb（travel booking platform，设计旅行预订平台）。

这类问题在仓库中被归入"Applications（应用级）前端系统设计"，与 website/contents/front-end-system-design.md 中列举的 Chat application（如 Messenger）、Travel booking website（如 Airbnb）示例一一对应。该指南给出一个通用展开框架——RADIO Framework：

Requirements exploration：通过澄清性问题界定范围（必须哪些功能、要不要离线/多人/通知）；
Architecture / High-level design：识别核心组件及其关系；
Data model：定义数据实体、字段与归属组件；
Identify and discuss issues：识别关键难点（长连接/消息时序、实时同步、虚拟列表、图片懒加载、搜索/筛选等）；
Optimization：讨论性能、可访问性、i18n、安全与可观测性改进。

文档还强调：系统设计轮的题目通常比"构建 UI"轮范围更大，一小时面试内不要求完整写码，重点是能讲清设计权衡、多种可行实现与前后端 API 形态。针对"设计 Airbnb"这一题，尤其要准备：房源/用户/预订等数据实体、地图与列表双视图、搜索过滤与分页、预订流程的状态机、图片加载优化，以及移动端优先布局等。

算法轮：别忽视 CS 基础

文档仅有一句但分量很重：Airbnb 确实有算法轮，会问 LeetCode 风格题目，必须准备。仓库也提供了配套练习：packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx（算法分册）与 packages/front-end-interview-guidebook/contents/coding/en-US.mdx（编码分册），可用来覆盖基础数据结构与高频套路。

Insider Tips：真实候选人口述的高频信号

文档收录的 GreatFrontEnd 社区候选人复盘，是最有价值的"隐性考点"：

2026-01-08（Payments 团队，screen 轮）

题目即"变时长 Image Carousel + 末张停止 + 倒计时"，环境是 React 工程；
面试官真正在看：边想边写边说出来（沉默思考很吃亏）、先口头沟通方案（方向错了会得到提示）、每个动作都能解释原因、尽量把 follow-up 也写完。

2025-10-23

又被问 Image Carousel，面试官"不断加需求直到时间耗尽"——说明面试官重视你能否在演进需求下持续重构，务必把useEffect的清理与依赖管理练熟。

2025-03-21

反馈称"前端技术面偏向实用而非算法"，结果 screen 里还是出现了 LC 难题。结论：两类都要准备，不要赌只考其中一种。

2024-07-12

考 Backbone Model，事件名change:foo/change:bar；要求全局 change 监听 +unset保留监听器的软删除语义——与 JS 编码轮描述完全一致，说明该题是长线高频题。

2024-04-19 / 2024-04-16

FE 架构轮题目是"设计一个聊天应用"，面试官全程未反驳但结果不通过——提醒你：系统设计轮主动表达"权衡取舍"比"等面试官认可"更重要；
另一名候选人表示 Airbnbtag 题几乎全覆盖却漏了 Backbone Model，结果恰恰考了它。高频题不要跳题。

备战路线图小结

综合原文档题库与候选人反馈，Airbnb 前端备战可以收敛为四条主线：

JS 编码：练透StoreData/Backbone Model（属性监听、全局 change、unset 软删除），顺带复习手写 Promise 与 Observer 模式（对照 website/contents/javascript-questions.md）；
UI 组件：Autocomplete、Star Rating、Tabs、Image Carousel、洗牌发牌五个组件反复实现，重点吃透"定时器放useEffect并正确清理"这一核心坑点（对照 packages/react-interview-playbook/contents/react-hooks/en-US.mdx）；
系统设计：以 RADIO 框架（website/contents/front-end-system-design.md）练习聊天应用与旅行预订平台两类应用级设计；
算法与表达：坚持刷 LeetCode 风格题目，同时在练习中有意识地"出声思考、先讲方案、步步解释"，因为从候选人反馈看，这三点与代码正确性同等重要。

本文所属企业题库目录 website/contents/companies/ 下还有 Google、Meta、Amazon 等公司的对应真题页，可作为横向对照了解不同公司的出题风格差异。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析