前端面试必考7类手写代码实战解析

1. 前端面试手写代码实战指南作为一名经历过京东等大厂面试的前端工程师我深知手写代码环节的重要性。这篇文章将详细解析京东等一线互联网公司前端面试中最常考的7类手写题包含完整实现、核心原理和电商场景应用。这些题目在我参与的面试中出现的频率高达90%掌握它们能显著提升面试通过率。2. 防抖与节流电商高频场景应用2.1 防抖(debounce)实现与原理防抖的核心思想是在事件频繁触发时只有当事件停止触发一段时间后才会执行处理函数。这在电商网站的搜索联想场景中尤为重要。/** * 防抖函数完整实现 * param {Function} fn - 需要防抖的函数 * param {number} delay - 延迟时间(毫秒) * param {boolean} immediate - 是否立即执行 */ function debounce(fn, delay 300, immediate false) { let timer null; return function(...args) { const context this; // 清除已有定时器保证唯一性 if (timer) clearTimeout(timer); if (immediate) { // 立即执行模式 const callNow !timer; // timer为null表示可以立即执行 timer setTimeout(() { timer null; // delay后重置timer }, delay); if (callNow) { fn.apply(context, args); } } else { // 非立即执行模式 timer setTimeout(() { fn.apply(context, args); }, delay); } }; }关键点说明闭包保存timer状态是防抖实现的核心apply确保函数执行时的this指向正确。2.2 京东实际应用场景搜索框联想用户输入时每按一个键都会触发搜索使用防抖可以避免频繁请求商品筛选条件变化价格区间滑动时实时筛选无限滚动加载滚动停止后再触发加载避免重复请求按钮防重复点击支付按钮等关键操作防止重复提交2.3 节流(throttle)的实现方案节流与防抖的区别在于节流保证在一定时间间隔内至少执行一次而防抖只在停止触发后执行一次。// 时间戳版首次立即执行 function throttle(fn, delay 300) { let lastTime 0; return function(...args) { const now Date.now(); if (now - lastTime delay) { fn.apply(this, args); lastTime now; } }; } // 定时器版最后一次也会执行 function throttleTimer(fn, delay 300) { let timer null; return function(...args) { const context this; if (!timer) { timer setTimeout(() { fn.apply(context, args); timer null; }, delay); } }; }3. 深拷贝的完整解决方案3.1 基础深拷贝实现深拷贝是前端面试必考题京东二面特别关注循环引用的处理。function deepClone(obj, map new WeakMap()) { // 处理基本类型和null if (typeof obj ! object || obj null) { return obj; } // 处理循环引用 if (map.has(obj)) { return map.get(obj); } // 初始化目标对象 let target Array.isArray(obj) ? [] : {}; map.set(obj, target); // 缓存已拷贝对象 // 处理Symbol属性 const symKeys Object.getOwnPropertySymbols(obj); if (symKeys.length) { symKeys.forEach(symKey { if (typeof obj[symKey] object obj[symKey] ! null) { target[symKey] deepClone(obj[symKey], map); } else { target[symKey] obj[symKey]; } }); } // 拷贝常规属性 for (let key in obj) { if (obj.hasOwnProperty(key)) { target[key] deepClone(obj[key], map); } } return target; }3.2 特殊类型处理完整的深拷贝还需要考虑以下特殊情况Date对象需要new Date(obj.getTime())RegExp对象需要new RegExp(obj.source, obj.flags)Function可以直接返回原函数还是需要克隆DOM元素通常直接返回原元素原型链是否需要保持原型关系4. Promise核心实现4.1 基础Promise实现class MyPromise { constructor(executor) { this.status pending; this.value undefined; this.reason undefined; this.onFulfilledCallbacks []; this.onRejectedCallbacks []; const resolve (value) { if (this.status ! pending) return; this.status fulfilled; this.value value; this.onFulfilledCallbacks.forEach(fn fn()); }; const reject (reason) { if (this.status ! pending) return; this.status rejected; this.reason reason; this.onRejectedCallbacks.forEach(fn fn()); }; try { executor(resolve, reject); } catch (err) { reject(err); } } then(onFulfilled, onRejected) { // 处理值穿透 onFulfilled typeof onFulfilled function ? onFulfilled : v v; onRejected typeof onRejected function ? onRejected : err { throw err }; const promise2 new MyPromise((resolve, reject) { if (this.status fulfilled) { setTimeout(() { try { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); } else if (this.status rejected) { setTimeout(() { try { const x onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); } else { this.onFulfilledCallbacks.push(() { setTimeout(() { try { const x onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); }); this.onRejectedCallbacks.push(() { setTimeout(() { try { const x onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0); }); } }); return promise2; } } function resolvePromise(promise2, x, resolve, reject) { // 避免循环引用 if (promise2 x) { return reject(new TypeError(Chaining cycle detected for promise)); } // 防止多次调用 let called false; if ((typeof x object x ! null) || typeof x function) { try { const then x.then; if (typeof then function) { then.call( x, y { if (called) return; called true; resolvePromise(promise2, y, resolve, reject); }, r { if (called) return; called true; reject(r); } ); } else { resolve(x); } } catch (e) { if (called) return; called true; reject(e); } } else { resolve(x); } }4.2 Promise扩展方法面试官可能会要求实现Promise.all、Promise.race等静态方法MyPromise.all function(promises) { return new MyPromise((resolve, reject) { const result []; let count 0; promises.forEach((p, i) { p.then( value { result[i] value; if (count promises.length) { resolve(result); } }, reason { reject(reason); } ); }); }); }; MyPromise.race function(promises) { return new MyPromise((resolve, reject) { promises.forEach(p { p.then(resolve, reject); }); }); };5. 函数柯里化与偏函数5.1 基础柯里化实现function curry(fn) { return function curried(...args) { if (args.length fn.length) { return fn.apply(this, args); } else { return function(...args2) { return curried.apply(this, args.concat(args2)); }; } }; } // 使用示例 function sum(a, b, c) { return a b c; } const curriedSum curry(sum); console.log(curriedSum(1)(2)(3)); // 6 console.log(curriedSum(1, 2)(3)); // 6 console.log(curriedSum(1)(2, 3)); // 65.2 京东实际应用场景参数复用电商中的折扣计算函数延迟执行表单验证规则组合动态生成函数根据用户权限生成不同的操作函数6. 前端性能监控实战6.1 核心性能指标FP (First Paint)首次绘制时间FCP (First Contentful Paint)首次内容绘制LCP (Largest Contentful Paint)最大内容绘制FID (First Input Delay)首次输入延迟CLS (Cumulative Layout Shift)累计布局偏移6.2 性能指标获取代码// 获取FP/FCP new PerformanceObserver((entryList) { const entries entryList.getEntries(); entries.forEach(entry { if (entry.name first-paint) { console.log(FP:, entry.startTime); } else if (entry.name first-contentful-paint) { console.log(FCP:, entry.startTime); } }); }).observe({ type: paint, buffered: true }); // 获取LCP new PerformanceObserver((entryList) { const entries entryList.getEntries(); const lastEntry entries[entries.length - 1]; console.log(LCP:, lastEntry.startTime); }).observe({ type: largest-contentful-paint, buffered: true }); // 获取CLS let clsValue 0; new PerformanceObserver((entryList) { const entries entryList.getEntries(); entries.forEach(entry { if (!entry.hadRecentInput) { clsValue entry.value; } }); console.log(CLS:, clsValue); }).observe({ type: layout-shift, buffered: true });6.3 京东性能优化实践LCP优化关键图片预加载使用WebP格式关键CSS内联非关键JS延迟加载CLS优化图片和视频设置固定宽高避免在现有内容上方插入动态内容使用transform动画代替影响布局的属性FID优化减少主线程长任务优化第三方脚本使用Web Worker处理复杂计算7. 电商业务常用工具函数7.1 数组去重高级实现// 支持对象去重 function unique(arr, key) { if (!key) { return [...new Set(arr)]; } const map new Map(); return arr.filter(item { const keyValue item[key]; if (!map.has(keyValue)) { map.set(keyValue, true); return true; } return false; }); } // 使用示例 const products [ { id: 1, name: iPhone }, { id: 2, name: iPad }, { id: 1, name: iPhone 13 } ]; console.log(unique(products, id)); // 输出: [{id:1,name:iPhone}, {id:2,name:iPad}]7.2 金额格式化增强版function formatMoney(cent, options {}) { const { prefix ¥, decimal 2, thousand ,, isNegativeRed true } options; let amount cent / 100; const isNegative amount 0; amount Math.abs(amount); let [integer, fraction] amount.toFixed(decimal).split(.); integer integer.replace(/\B(?(\d{3})(?!\d))/g, thousand); let result ${prefix}${integer}; if (decimal 0) { result .${fraction}; } if (isNegative) { result -${result}; if (isNegativeRed) { result span stylecolor:red${result}/span; } } return result; } // 使用示例 console.log(formatMoney(123456)); // ¥1,234.56 console.log(formatMoney(-123456, { isNegativeRed: false })); // -¥1,234.567.3 手机号/邮箱脱敏工具function maskInfo(str, type phone) { const patterns { phone: { regex: /(\d{3})\d{4}(\d{4})/, replacement: $1****$2 }, email: { regex: /(\w{1,3})[\w.-]*([\w-]\.)[\w-]{2,4}/, replacement: $1***$2 }, idCard: { regex: /(\d{4})\d{10}(\w{4})/, replacement: $1**********$2 } }; const { regex, replacement } patterns[type] || patterns.phone; return str.replace(regex, replacement); } // 使用示例 console.log(maskInfo(13812345678)); // 138****5678 console.log(maskInfo(testexample.com, email)); // tes***example.com8. 面试准备建议手写代码练习每天至少手写3个核心函数注意边界条件性能优化理解每个性能指标背后的优化原理能举例说明电商场景熟悉常见业务逻辑的实现方式代码规范注意变量命名、代码格式和注释调试能力能解释每行代码的作用和可能的问题在实际面试中面试官不仅关注代码能否运行更关注实现思路、边界条件处理和性能考虑。建议在实现完基础功能后主动讨论可能的优化空间和替代方案。