前端面试手撕题目全解析

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

HTML 基础题 📝

语义化卡片（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）；

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; }

自定义元素 + 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 基础题目 🧪

生命周期顺序与场景适用：
```
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount/ destroyed
```
✔ 可用于初始化数据、手动注册订阅、第三方插件挂载、子组件交互等场景 (ExplainThis)。

手写简化 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。

Vue 的响应式原理（简版伪代码）：
- 使用 Object.defineProperty 拦截 getter/setter，收集依赖；
- 每个组件对应一个 Watcher，监听属性变化后发起重新渲染；
- Dep.notify() 通知所有 watcher 更新视图；
- Vue 的更新机制是“push + diff”（比 React 更精细）；如果再触发展现 Virtual DOM diff，减少不必要操作 (cnblogs.com)。
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;
}

最后一击：答题包装建议

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

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

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

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

一、HTML 核心考点

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/94235.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/94235.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

道格拉斯-普克算法 - 把一堆复杂的线条变得简单，同时尽量保持原来的样子

道格拉斯-普克算法 - 把一堆复杂的线条变得简单，同时尽量保持原来的样子 flyfish 道格拉斯-普克算法（Douglas-Peucker Algorithm解决的问题其实很日常：把一堆复杂的线条（比如地图上的道路、河流，或者GPS记录的轨迹&…