当前位置： 首页 > news >正文

前端面试手撕题目全解析

news 2025/8/4 7:33:16

以下是前端面试中常遭遇的“手撕”基础题目汇总，涵盖 HTML→JS→Vue→React，每题附经典实现／原理解析，可现场答题或后端总结。

HTML 基础题 📝

  1. 语义化卡片（Semantic Card + ARIA）

    <article class="card" aria-label="Product Card"><header><h2 class="card-title">超轻量可折叠水杯</h2></header><section class="card-body"><p class="description">不占空间，随时随地喝水</p><button aria-label="Add to cart">🛒</button></section>
</article>

    ✅ 掌握 <main>, <article>, <section>, <header> 等 HTML5 语义标签；为无障碍辅助技术提供兼容（通过 aria-label）；

  2. Sticky Footer 实现（Flex 布局 + min-height: 100vh）

    <body class="page"><main class="content">…多内容…</main><footer class="footer">© 2025 Demo 公司</footer>
</body>

    html, body { margin:0; padding:0; }
.page { min-height:100vh; display:flex; flex-direction:column; }
.content { flex:1; }
.footer { height:60px; background:#f3f3f3; }

  3. 自定义元素 + Native Form 验证示例

    <label for="age">年龄<label><input id="age" type="number" min="1" max="120" required>
<button onclick="form.reportValidity()">提交</button>

    ✅ 演示如何结合自定义 type、required 以及 reportValidity() 显示原生错误提示。

JavaScript 常考题 💡

手写防抖 & 节流

function debounce(fn, ms = 300) {let timer;return function(...args) {clearTimeout(timer);timer = setTimeout(() => fn.apply(this, args), ms);};
}function throttle(fn, ms = 300) {let last = 0, timer = null;return function(...args) {const now = Date.now();if (now - last < ms) {clearTimeout(timer);timer = setTimeout(() => {last = Date.now();fn.apply(this, args);}, ms - (now - last));} else {last = now;fn.apply(this, args);}};
}

✅ 面试时经典考察滚动、输入频率控制函数，应理解 clearTimeout 的作用与首次触发／尾触发的区别。文中提到防抖 vs 节流面试解析非常常见 (掘金)。

Promise.all() 简易版

Promise.myAll = function(iterable) {return new Promise((resolve, reject) => {const arr = Array.from(iterable);if (arr.length === 0) return resolve([]);const res = new Array(arr.length);let count = 0;arr.forEach((p, i) => {Promise.resolve(p).then(val => {res[i] = val;count += 1;if (count === arr.length) resolve(res);}).catch(reject);});});
};

✅ 面试中对实现并发控制、失败短路、位置保持非常常见 (大厂面试每日一题, 思否)。

深拷贝（DeepClone）示例

function deepClone(obj, map = new WeakMap()) {if (obj === null || typeof obj !== 'object') return obj;if (map.has(obj)) return map.get(obj);const clone = obj instanceof Date ? new Date(obj): obj instanceof RegExp ? new RegExp(obj): Array.isArray(obj) ? []: {};map.set(obj, clone);Reflect.ownKeys(obj).forEach(key => {clone[key] = deepClone(obj[key], map);});return clone;
}

✅ 要处理循环引用、特殊对象、保持原型链与不可枚举属性等深度拷贝复杂性 (ExplainThis)。

事件循环 + 宏任务／微任务机制解析（经典题）

题目示例：

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

输出结果： A D C B

解析： 浏览器事件循环会先执行同步代码（A, D），然后将 .then 放入微任务队列（优先级高），立即执行(C)，最后执行宏任务队列中的 setTimeout 回调(B) (CSDN博客)。

✅ 面试常見用以检测对 JS 单线程、事件循环模型与 async/await背后原理的掌握。

Vue 基础题目 🧪

  1. 生命周期顺序与场景适用：

    beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount/ destroyed

    ✔ 可用于初始化数据、手动注册订阅、第三方插件挂载、子组件交互等场景 (ExplainThis)。

  2. 手写简化 v-model 指令支持 <input> 双向绑定：

    app.directive('model', {beforeMount(el, binding, vnode) {el.value = binding.value;el.addEventListener('input', e => {vnode.context[binding.expression] = e.target.value;});},updated(el, binding) {if (el.value !== binding.value) el.value = binding.value;}
});

    ✔ 考察 listener + props sync，理解 update hook 中避免老值 stale problem。

  3. Vue 的响应式原理（简版伪代码）：

    • 使用 Object.defineProperty 拦截 getter/setter，收集依赖；
    • 每个组件对应一个 Watcher，监听属性变化后发起重新渲染；
    • Dep.notify() 通知所有 watcher 更新视图；
    • Vue 的更新机制是“push + diff”（比 React 更精细）；如果再触发展现 Virtual DOM diff，减少不必要操作 (cnblogs.com)。

  4. nextTick() 原理：

    • Vue 会维护一个更新队列，当数据变化时，使用 Promise.resolve().then() 把回调排入微任务；
    • 在本轮更新完成之后且 DOM patch 结束前，执行所有 queued callbacks —— 就是 Vue.nextTick(fn) 的实现基础 (cnblogs.com)。

React 实战题 🎯

setState 是同步还是异步？

✅ React 16 以前：

  • 在 React 合成事件或生命周期内多个 setState 会批量异步执行；
  • 在原生事件／setTimeout 中则立即同步执行（无批量）；
  • isBatchingUpdates 控制逻辑状态，决定是马上更新还是放入队列延迟执行 (interview.poetries.top, interview.poetries.top)。

✅ React 18+（带automatic batching）：

  • 默认所有 setState 都批量异步执行，跨同步边界也可合并。

手写精简版 useSetState Hook 用法：

function useSetState(initial) {const [state, setState] = React.useState(initial);const setMerge = React.useCallback(partial => {setState(prev => typeof partial === 'function' ? { ...prev, ...partial(prev) } : { ...prev, ...partial });}, []);return [state, setMerge];
}

✔ 常用于类组件迁移或处理中间复杂状态对象。

自定义 Hook —— “usePrevious” 用来获取上一次的 props / state 值：

function usePrevious(value) {const ref = React.useRef();React.useEffect(() => {ref.current = value;});return ref.current;
}

推荐答题思路 vs ⚙️ 笔试技巧

  • 🎯 原理结合代码实现：例如讲 Promise.all 的状态控制步骤时，要同时写出 .then/.catch 逻辑；
  • 🎯 边界处理：空输入、循环引用、取消节流／防抖、 finally 支持；
  • 🎯 防坑措施：写内容前先声明假设，如 arguments, this 包含性、map.has()；
  • 🎯 真实业务场景中的演练：例如：“如果输入框提交 API 想要防抖 + 防止重复提交，你会怎么做？”

最后一击：答题包装建议

步骤做法
✅ 场景定位“这个题是考异步模型 / 响应式设计 / 事件绑定机制。”
✅ 核心原理简练说明背后机制，宏/微任务、依赖追踪、渲染批次等。
⚠️ 关键限制条件讨论 edge-case、API 兼容性、性能影响等。
💬 输出可交付物写出刚才例子代码时，模拟如何现场写白板步骤，用注释提升可读性（why）

掌握以上这四大模块的题型（HTML 布局＋JavaScript 常见算法＋Vue 响应式系统＋React 状态更新策略），你在面试现场就可以胸有成竹地写出代码、讲清原理、回答补充问题。祝你面试拿 offer，写题不打烊！

前端面试中的场景题旨在考察候选人对实际开发问题的理解与解决能力。以下是一些高频场景题及其解析，供您参考：

以下是前端面试中HTML、JS、Vue、React的常考基础题目详解及代码解析，结合高频考点和实战需求整理：

一、HTML 核心考点

  1. 语义化标签
    • 作用：提升代码可读性、SEO优化（如

    、
    替代
    ）
    http://www.lryc.cn/news/608757.html

    相关文章：

  2. 【数据迁移】Windows11 下将 Ubuntu 从 C 盘迁移到 D 盘
  3. Redis——常用指令汇总指南（三）(哈希类型)
  4. Odoo OWL前端框架全面学习指南 (后端开发者视角)
  5. 三角洲行动ACE反作弊VT-d报错？CPU虚拟化如何开启！
  6. GitOps：云原生时代的革命性基础设施管理范式
  7. Ubuntu20.04 Carla安装与和Ros联合仿真
  8. Ubuntu22.4部署大模型前置安装
  9. AI + 云原生：正在引爆下一代应用的技术革命
  10. LabVIEW小波变换检测信号断点
  11. HCIP笔记（第四章）
  12. 悬挂的绳子，它的函数方程是什么样子的？
  13. Python Dash 全面讲解
  14. 大屏项目展示
  15. 基于Springboot+UniApp+Ai实现模拟面试小工具八：管理端基础功能实现
  16. RAG与智能体技术全景解析：架构革新、场景落地与未来趋势
  17. linux2.6 和 unix-v6 源码实验
  18. uni-app学习笔记01-项目初始化及相关文件
  19. Java小红书源码1:1还原uniapp_仿小红书源码
  20. UniApp 实现顶部固定导航栏 Tab 及滚动变色效果
  21. 7.13.B+树
  22. io_setup系统调用及示例
  23. [AI8051U入门第十五步]W5500实现DHCP自动获取IP
  24. UE5的渲染Debug技巧
  25. [每周一更]-(第154期)：Docker 底层深度剖析：掌控 CPU 与内存资源的艺术
  26. Leetcode 12 java
  27. GitHub 趋势日报 (2025年08月02日)
  28. ThinkPad P16 Gen2,P16 Gen2 LTE(21FA,21FB)原装Win10Pro,Win11专业版系统镜像，恢复出厂开箱状态
  29. All the Mods 9 - To the Sky - atm9sky 局域网联机报错可能解决方法
  30. Timer串口常用库函数（STC8系列）
  31. 代码随想录算法训练营第三十九天