企业官网建设流程全解析

Reddit 前端面试攻略：基于 front-end-interview-handbook 拆解 JavaScript 基本功、HTML 表单与前端系统设计考点

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

本文基于仓库中 reddit-front-end-interview-questions.md 记录的 Reddit 前端面试真题与候选人经验，结合本仓库前端面试训练体系（packages/front-end-interview-guidebook与packages/system-design）中的方法论，为你还原 Reddit 面试各轮的真实考察形式，并给出可落地的解题思路、代码框架与复习路径。读完你将对“纯 JS 数组去重不借助 Set/对象”“用表单数据构造 JSON”“口头走查 Feed 系统设计”这类高频题形成完整应对方案。

Reddit 前端面试考察什么：一句话概括

Reddit 前端面试的核心信号非常明确——聚焦 JavaScript 基础与用 HTML + JS 构建 UI，全程不使用 React。因此，如果你的简历投向了 Reddit，复习重心应放在原生 JavaScript、HTML 语义与原生 DOM 操作上，而不是花时间背诵某个框架的 API。在继续往下读之前，请先在本仓库确认这些考点并非孤例，而是有其通用方法论支撑的：

• 本仓库 前端编码面试指南 将编码题划分为算法题、JavaScript 编码题、UI 编码题三类，Reddit 的真题恰好覆盖了后两类；
• 候选人一致反馈“Reddit focus on communication and collaboration”（注重沟通与协作），说明这不仅是纯做题，更是一场持续的技术表达与交流过程。

下面按面试轮次逐一拆解。

电话初筛（Tech Screen）：小算法 + 场景化基础题

电话初筛通常由两段组成，总时长约 20～30 分钟。

20 分钟小算法：数组与过滤器（filter）

多位候选人提到，Reddit 的电话轮包含“20 mins simple coding with arrays and filters”。这类题考查的是你对数组高阶方法与回调语义的熟练程度。若复习不充分，可以参考本仓库 JavaScript 面试问题清单 与 JavaScript 复习指南 中对Array.prototype.filter、map、reduce的逐一拆解，尤其是以下实现细节：

• filter的回调收到(element, index, array)三个参数；
• 回调返回真值（truthy）则保留该元素，因此“返回false/0/''/null/undefined/NaN”都会被过滤掉，常见失误是回调中忘记显式返回比较结果；
• 稀疏数组中的空洞会被跳过。

一个典型练习形态如下：给出一组消息对象，要求过滤出满足条件（如read: false或length > N）的元素，并保持原始顺序。

// 过滤出所有未读消息，且不修改原数组 const unread = messages.filter((message) => !message.read); // 过滤后再做映射 const unreadSenders = messages .filter((message) => !message.read) .map((message) => message.sender);

场景化基础题：POST vs GET

候选人报告电话轮“问了一些通用问题，如 GET & POST”。这是一道被反复问起的网络基础题，回答时需要对比而不是罗列：

• 语义与副作用：GET 用于读取、不应产生副作用；POST 用于提交数据、可能产生副作用（创建/修改资源）。
• 幂等性：GET 是幂等的（重复请求结果一致）；POST 不保证幂等，这也是“防重复提交/重复下单”问题为何要额外设计（如禁用按钮、token 去重）的根本原因。
• 请求体位置：GET 参数进入 URL query string；POST 数据放在请求体（body），可承载更大、结构化的数据。
• 可见性与安全：GET 参数会出现在历史记录、日志、代理缓存中，因此绝不能用 GET 传密码、token 等敏感信息；POST 参数虽不在 URL，但若不用 HTTPS 仍会明文传输。
• 缓存：GET 天然可被浏览器/代理缓存，POST 默认不缓存。

安全题：XSS

候选人提到电话轮还会涉及 XSS。红迪这类社区产品高度依赖用户生成内容，UGC 渲染正是 XSS 高发场景，因此这道题考察的是你能否在实践中防住它。回答要点可以借用本仓库 UI 面试速查表 中“Security”一节的结论：

• 永远不要用innerHTML（或 React 的dangerouslySetInnerHTML）渲染未经处理的用户输入，改用textContent；
• 若必须渲染富文本，先经过 DOMPurify 等库的白名单消毒，再插入 DOM；
• 当用户输入要进入 URL query 参数时，用encodeURIComponent转义，防止被注入额外参数。

面试中主动说出“所有渲染用户内容的地方都要默认转义，富文本必须走白名单消毒”即可比“我知道 XSS”高一档。

JavaScript 编码题：不使用对象或 Set 的消息去重

这是 Reddit 编码轮最具体的一道高频题：

给定一组消息（messages），在不使用对象（object）或Set的前提下对其进行去重。

注意这里的约束措辞——不让用对象或Set，本质上是禁止利用哈希表 O(1) 查重，考察你在“限制数据结构”下的基本功力：能否写出正确的双重循环、能否分析复杂度、能否和面试官讨论取舍。候选人反馈这道题在 2026 年 4 月的 tech screen 与 2026 年 4 月反馈中都出现过，属于必须熟练掌握的题目。

下面按“从朴素到优化”给出三层解法，供你在白板上演进。

解法一：暴力双重循环（最朴素、面试首选）

对每个元素向前扫描，若前面已出现过相同元素则跳过。只依赖数组与===比较，完全不使用任何“哈希类”容器，完全满足题目的硬约束。

function dedupe(list) { const result = []; outer: for (let i = 0; i < list.length; i++) { for (let j = 0; j < result.length; j++) { if (result[j] === list[i]) { continue outer; // 已存在，跳过 } } result.push(list[i]); } return result; }

• 时间复杂度：最坏 O(n²)（全部元素互不相同）；
• 空间复杂度：O(n)（结果数组）；
• 优势：保持元素的首次出现顺序，且实现不依赖任何被禁止的数据结构。

解法二：filter+indexOf（更“数组风格”的写法）

如果你先和面试官确认可以用数组内建方法，indexOf版本语义更简洁：保留“首次出现的下标等于当前下标”的元素。

const dedupe = (list) => list.filter((item, index) => list.indexOf(item) === index);

• indexOf内部仍是线性扫描，整体复杂度同样是 O(n²)；
• 代码极短，但面试时要能说明它比Set慢在哪里、为何约束下这是合理的；
• 适合“Reddit 强调简单 coding、能跑通并讲清楚”的风格。

解法三：排序后相邻去重（空间更省的思路）

若题目允许修改输入顺序，可以先排序再单趟扫描，把复杂度降到 O(n log n)。

function dedupeBySort(list) { if (list.length <= 1) return list.slice(); const sorted = [...list].sort(); const result = [sorted[0]]; for (let i = 1; i < sorted.length; i++) { if (sorted[i] !== sorted[i - 1]) result.push(sorted[i]); } return result; }

这一解法的价值在于向面试官展示你的权衡意识：用排序换复杂度，代价是丢失原有顺序——对“消息列表”这类讲究时间线的数据往往不可接受，因此更适合作为“方案讨论”而非最终提交。

必须主动谈的边界情况

去重题除了 happy path，面试官真正想听的是你能否枚举出语义歧义：

• 消息是对象还是字符串/数字？若消息是对象，===比较的是引用而非内容——两个“内容相同”但来自不同引用的消息对象不会被去重，必须先和面试官确认“相等”的定义；
• NaN：NaN !== NaN，任何基于===的去重都无法识别 NaN，需要Number.isNaN特判；
• -0 与 0：-0 === 0为true，基于===的方案会自动把它们视为重复（若用Object.is语义则相反）；
• 空数组 / 单元素数组：应直接正确返回。

面试经验：不要只写“能过 happy path”的版本。向面试官提出“消息是对象时按什么判等、NaN 是否可能出现、能否破坏原始顺序”这三个问题，本身就比写出最终答案更得分——这也与本仓库对编码面试“算法题之外同样看沟通”的定位一致。

HTML 表单：读取表单数据并构造 JSON 对象

电话轮与 onsite 均出现过的第二类硬核题是：给定一个 HTML 表单，读取其中所有字段值，构造一个 JSON 对象。它的本质是“序列化”问题，考察点包括：

1. 是否理解name属性是表单字段的唯一标识（没有name的控件不会被提交）；
2. 是否知道浏览器原生的提交解析机制（FormData/URLSearchParams）以及Content-Type（application/x-www-form-urlencoded与multipart/form-data）的差异；
3. 是否掌握“数组/多选控件”等特殊字段的处理；
4. 是否遵循“提交前preventDefault()，用 fetch/XHR 异步提交”的前端最佳实践（见 UI 面试速查表 的 Forms 一节）。

一个可直接练习的完整示例

假设题目给出如下表单：

<form id="signup-form"> <label for="username">用户名</label> <input id="username" name="username" type="text" required /> <label for="email">邮箱</label> <input id="email" name="email" type="email" required /> <label for="role">角色</label> <select id="role" name="role"> <option value="">请选择</option> <option value="admin">管理员</option> <option value="member">成员</option> </select> <fieldset> <legend>订阅话题</legend> <label><input type="checkbox" name="topics" value="tech" /> 技术</label> <label><input type="checkbox" name="topics" value="design" /> 设计</label> </fieldset> <label for="bio">简介</label> <textarea id="bio" name="bio" rows="3"></textarea> <button type="submit">注册</button> </form>

要求读取全部字段并输出：

{ "username": "alice", "email": "alice@example.com", "role": "admin", "topics": ["tech", "design"], "bio": "前端工程师" }

原生解法（无需框架）

const form = document.querySelector('#signup-form'); form.addEventListener('submit', (event) => { // 阻止默认的整页刷新提交，改为异步 event.preventDefault(); const formData = new FormData(form); const payload = {}; for (const [key, value] of formData.entries()) { // FormData 对同名 checkbox 会按出现顺序展开为多条 entry if (formData.getAll(key).length > 1) { payload[key] = formData.getAll(key); } else { payload[key] = value; } } console.log(JSON.stringify(payload, null, 2)); // 真正提交时： // fetch('/api/users', { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify(payload), // }); });

关键点解释：

• new FormData(form)：传入表单元素后，会自动收集所有带name的控件；
• 同名控件（多选 checkbox / 多选 select）：formData.getAll(key)返回数组，这就是上面topics能变成["tech", "design"]的原因；
• 空值处理：未填写的输入与未选中的select默认项仍会出现在FormData中（值为''），构造 JSON 时可自行决定保留或剔除；
• 类型转换：若字段语义是数字（如年龄、数量），需要用Number(value)转换，否则 JSON 里全是字符串；日期字符串同理。

进阶形态：字段名表达嵌套结构

真实产品表单往往需要嵌套 JSON。当字段name采用点号（user.name）或括号（user[name]）命名时，你需要自己写一个“按路径写入”的小函数，这与很多序列化库（如qs）的做法一致：

function setByPath(target, path, value) { const keys = path.split('.'); let cursor = target; for (let i = 0; i < keys.length - 1; i++) { cursor[keys[i]] ??= {}; cursor = cursor[keys[i]]; } cursor[keys.at(-1)] = value; }

配合前端校验表单：记得在submit前先调用form.reportValidity()或checkValidity()，利用原生required/pattern/type="email"做第一层校验（见 UI 速查表 HTML 小节），再决定是否序列化与提交。

UI 编码轮：表单类界面（原生 HTML/CSS/JS）

Onsite 的 UI coding 轮同样是表单相关的界面题，例如带校验、状态反馈与提交交互的表单页面。Reddit 不使用 React，因此你必须能用原生 HTML + CSS + JavaScript 构建出一个结构完整、可交互、可访问的表单组件。构建时请对照本仓库 UI 面试速查表 的自检清单：

• HTML 语义与可访问性：用<label>+for关联每个输入框；交互元素一律用<button>/<a>而非绑了 click 的<div>；错误提示通过aria-describedby与输入框关联；icon-only 按钮加aria-label（速查表强调“clickable div 是严重红旗”）。
• 输入类型与原生校验：email、password、number等类型搭配required、pattern、min/max优先做第一层校验。
• 状态管理：遵循“最小化状态、其余推导”原则——表单是典型的派生数据场景；提交期间禁用按钮、展示 loading，成功后清理或展示成功信息，失败时展示可读错误（对应速查表 Network 一节的 pending/success/failure 三态）。
• 边界与 UX：长文本截断、错误状态即时可见、移动端触控目标至少 44×44px、可空状态提示。
• 防重复提交：提交后立即禁用按钮，避免重复 POST（呼应前文“POST 不幂等”的讨论）。

如果题面明确可以选用框架，则优先框架；但按 Reddit 的候选人反馈，练习时应把原生方案作为基线。

系统设计轮：口头走查 Feed 与答题类游戏 App

“Talk through” 一个 Feed（只讨论、不写码）

电话轮的系统设计是一道纯口头讨论题——描述如何设计一个信息流（feed）。这正是本仓库系统设计体系中反复出现的经典案例，前端侧与后端侧关注点截然不同：后端关心容量估算、数据库 schema、服务如何可扩展地生成 feed；而前端系统设计更关注客户端应用的架构与 UI 组件（参见 前端系统设计导读）。

前端视角下“Talk through a feed”至少要覆盖：

1. 功能需求澄清：feed 里有哪些内容类型（纯文本、图片、链接、投票）、是否分页、是否下拉刷新、是否实时推送新帖；
2. 架构分层：可以沿用 系统设计框架 中基于 News Feed 示例的分层思路——数据获取层负责分页拉取与缓存，Store 保存服务端下发数据，View 层只负责按数据渲染；前端 store 中大部分是服务端来源的数据；
3. 核心交互设计：分页/无限滚动、下拉刷新、点赞/收藏的乐观更新（先反映成功态、失败再回滚并报错）；
4. API 形态：RESTful 接口提供GET /feed?cursor=...&limit=20之类带游标的分页接口，避免用脆弱的offset翻页；
5. 健壮性：并发请求乱序响应（竞态）处理——跟踪最新请求 ID 并丢弃过期响应；图片懒加载与虚拟列表以支持超长列表（对应 UI 速查表 的 Edge cases / Performance 小节）。

在 types-of-questions 中，“News Feed”也被作为“信息流/列表页”这类产品的代表案例列出，可作为考前预演素材。

设计一个答题类（Quiz-like）游戏 App

Onsite 的系统设计题是设计一个答题类游戏应用，同样是前端系统设计范畴。答题游戏天然是“客户端应用”，建议按下面的骨架展开：

• 功能需求：题库与题目类型（单选/多选/判断）、计时、计分、进度条、逐题作答流程、结果页（分数与复盘）、重开一局；
• 数据结构设计：题目{ id, prompt, options, answer, explanation }、玩家会话{ currentIndex, score, answers: [] }；
• 状态设计（重点）：坚持“最小化状态、其余推导”——真正的“状态”只有当前题号与用户作答记录，其余（进度百分比、得分是否应展示、下一题按钮是否可用）都应实时推导，避免多份状态失步；这正是 UI 速查表强调的 state-reducer 思路（多字段联动更新可考虑 reducer）；
• 计时与交互：倒计时、作答后立即反馈对错、禁用重复提交；
• 边界：题库耗尽（最后一题）、重新开始（状态重置）、题目内容含长文本的排版。

由于 Reddit 全程使用原生 HTML/JS，用原生 JS 实现时建议把游戏封装成一个“接收容器元素 + options 配置、可创建多个实例”的组件函数，避免全局变量污染（速查表 JavaScript/Component instantiation 一节明确给了这套 API 设计建议）。

行为面试与沟通：Reddit 式“讲给初级工程师听”

候选人反馈（2026 年 4 月）透露 tech screen 的第一部分是 trivia 式的沟通考察：

“how would you talk to a junior engineer about something?”

这其实是在模拟“技术解释/辅导”场景，属于典型的行为/软技能考察，可参考本仓库 行为面试指南 的框架来组织回答：

• 先确认对方的背景与已掌握的概念，再决定讲解粒度；
• 用一个具体可运行的例子开场，而不是堆术语；
• 讲清“为什么”而不只是“怎么做”；
• 主动询问对方是否理解，及时调整；
• 例如解释“为什么这里用 POST 而不用 GET”，可以先用“提交表单下单”的直觉场景引入，再落到幂等、缓存与安全的正式定义。

结合多轮反馈可以看出 Reddit 面试的关键软素质：清晰沟通、协作意识、能把复杂概念降维讲明白——这些与编码能力同样影响最终结果。

复习路线图与仓库资源导航

汇总 Reddit 面试各轮考察点后，推荐按以下优先级准备：

几个额外的复习建议：

1. 不要用 React 练手。候选人一致反馈 Reddit 不考察 React，把精力投入原生 JS 会让你更贴近真实面试环境；
2. 数组去重、表单序列化这类题要在白板/裸编辑器上写，训练不依赖 IDE 自动补全的肌肉记忆（编码环境差异见 前端编码面试指南）；
3. Feed 与 Quiz App 两道系统设计题要能“讲出来”——对着不写代码的面试官把架构、数据、状态讲顺，比画图更重要；
4. 把每次 tech screen 的 20 分钟小算法当热身赛：Reddit 的小算法普遍不刁钻，重点考察正确、干净的编码与口头解释能力。

说明：文中候选人经验摘录整理自仓库文档 reddit-front-end-interview-questions.md 所记录的 GreatFrontEnd 社区反馈，涉及具体日期为社区用户自行分享，复习时请以当前官网实际流程为准。

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