前端面試手撕題目全解析

以下是前端面試中常遭遇的“手撕”基礎題目匯總，涵蓋 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;
}

推薦答題思路 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 核心考點

語義化標簽
? 作用：提升代碼可讀性、SEO優化（如
、
替代
）

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/94235.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/94235.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/94235.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

道格拉斯-普克算法 - 把一堆復雜的線條變得簡單，同時盡量保持原來的樣子

道格拉斯-普克算法 - 把一堆復雜的線條變得簡單，同時盡量保持原來的樣子 flyfish 道格拉斯-普克算法（Douglas-Peucker Algorithm解決的問題其實很日常：把一堆復雜的線條（比如地圖上的道路、河流，或者GPS記錄的軌跡&…