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

前端面试手撕题目全解析

news 2025/8/4 8:20:52

以下是前端面试中常遭遇的“手撕”基础题目汇总，涵盖 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.dtcms.com/a/313070.html

    相关文章：

  2. CXGrId中按回车控制
  3. 微店所有店铺内的商品数据API接口
  4. 宝马集团与SAP联合打造生产物流数字化新标杆
  5. 达梦数据库备份与还原终极指南：从基础到增量策略实战
  6. [leetcode] 位运算
  7. 【网络与爬虫 39】Crawlee现代爬虫革命：TypeScript驱动的智能数据采集框架
  8. 井盖识别数据集-2,700张图片 道路巡检 智能城市
  9. C的运算符与表达式
  10. iNavFlight飞控固件学习-4《LED初始化》
  11. MVCC的实现原理
  12. git配置公钥/密钥
  13. Android XR SDK深度解析：构建下一代沉浸式体验的开发指南
  14. 《从原理到实践：MySQL索引优化与SQL性能调优全解析》
  15. Vue中:deep()和 ::v-deep选择器的区别
  16. JavaScript：编程世界中的“语盲”现象
  17. Java，八股，cv，算法——双非研0四修之路day24
  18. ulimit参数使用详细总结
  19. ELECTRICAL靶机
  20. Transformer模型用于MT信号相关性预测与分析
  21. python的易物小店交换系统
  22. 2106. 摘水果
  23. 数据结构中使用到的C语言
  24. RocksDb 是什么？levelDB、LSM 树、SSTable又分别是什么？区别呢？
  25. Linux 内存调优之如何限制进程、系统级别内存资源
  26. 第二章 矩阵
  27. 剥离petalinux设备树,使用 dtc 单独编译
  28. 主流身份认证协议都有哪些？应用场景有何区别？
  29. BRL贝叶斯规则列表
  30. 《C++》stack容器详解
  31. 块三角掩码（Block-Triangular Masking）