logo

开发者热搜

面试常考的高频手写js题汇总

作者：十万个为什么2025.09.19 12:47浏览量：0

简介：本文汇总了前端面试中高频出现的手写JavaScript题目，涵盖基础类型判断、深拷贝、事件总线、防抖节流等核心场景，提供解题思路与代码实现，助力开发者系统掌握面试必备技能。

面试常考的高频手写JS题汇总

在前端技术面试中，手写JavaScript代码是考察开发者基础能力的重要环节。这类题目不仅检验对语言特性的理解，更能体现问题拆解与工程化思维。本文系统梳理了8类高频手写题，结合实际场景与边界条件分析，帮助开发者构建完整的解题框架。

一、基础类型判断

1.1 类型检测的终极方案

传统typeof存在局限性（如typeof null === 'object'），而instanceof无法检测原始类型。更可靠的方案是结合Object.prototype.toString：

  1. function getType(target) {
  2.   return Object.prototype.toString.call(target).slice(8, -1).toLowerCase();
  3. }
  4. // 测试用例
  5. console.log(getType([])); // 'array'
  6. console.log(getType(null)); // 'null'

该方法通过调用对象的toString方法获取内部[[Class]]属性，覆盖所有JS类型。

1.2 数组判断的优化实现

判断变量是否为数组时，需考虑跨框架环境：

  1. function isArray(target) {
  2.   // 优先使用ES5标准方法
  3.   if (Array.isArray) return Array.isArray(target);
  4.   // 兼容性回退
  5.   return Object.prototype.toString.call(target) === '[object Array]';
  6. }

现代工程中建议直接使用Array.isArray()，此实现展示了渐进增强思想。

二、深拷贝实现

2.1 基础版递归实现

  1. function deepClone(obj, hash = new WeakMap()) {
  2.   // 处理基本类型和函数
  3.   if (obj === null || typeof obj !== 'object') return obj;
  5.   // 处理循环引用
  6.   if (hash.has(obj)) return hash.get(obj);
  8.   // 处理Date和RegExp
  9.   if (obj instanceof Date) return new Date(obj);
  10.   if (obj instanceof RegExp) return new RegExp(obj);
  12.   // 创建对应类型的实例
  13.   const cloneObj = Array.isArray(obj) ? [] : {};
  14.   hash.set(obj, cloneObj);
  16.   // 递归拷贝属性
  17.   for (let key in obj) {
  18.     if (obj.hasOwnProperty(key)) {
  19.       cloneObj[key] = deepClone(obj[key], hash);
  20.     }
  21.   }
  23.   // 处理Symbol属性
  24.   const symbolKeys = Object.getOwnPropertySymbols(obj);
  25.   for (let key of symbolKeys) {
  26.     cloneObj[key] = deepClone(obj[key], hash);
  27.   }
  29.   return cloneObj;
  30. }

该实现完整处理了：

  • 原始类型直接返回
  • 循环引用检测（使用WeakMap避免内存泄漏）
  • 特殊对象（Date/RegExp）
  • 继承属性过滤（hasOwnProperty）
  • Symbol属性拷贝

2.2 性能优化方案

对于大型对象，可采用迭代+栈的方式避免递归爆栈：

  1. function deepCloneIterative(obj) {
  2.   const stack = [{ source: obj, target: {} }];
  3.   const map = new WeakMap();
  5.   while (stack.length) {
  6.     const { source, target } = stack.pop();
  8.     if (map.has(source)) {
  9.       continue;
  10.     }
  11.     map.set(source, target);
  13.     for (let key in source) {
  14.       if (source.hasOwnProperty(key)) {
  15.         if (typeof source[key] === 'object' && source[key] !== null) {
  16.           stack.push({
  17.             source: source[key],
  18.             target: Array.isArray(source[key]) ? [] : {}
  19.           });
  20.         } else {
  21.           target[key] = source[key];
  22.         }
  23.       }
  24.     }
  25.   }
  27.   return target;
  28. }

三、事件总线实现

3.1 发布-订阅模式

  1. class EventBus {
  2.   constructor() {
  3.     this.events = {};
  4.   }
  6.   on(event, callback) {
  7.     if (!this.events[event]) {
  8.       this.events[event] = [];
  9.     }
  10.     this.events[event].push(callback);
  11.   }
  13.   emit(event, ...args) {
  14.     if (this.events[event]) {
  15.       this.events[event].forEach(callback => {
  16.         callback(...args);
  17.       });
  18.     }
  19.   }
  21.   off(event, callback) {
  22.     if (!this.events[event]) return;
  24.     if (callback) {
  25.       this.events[event] = this.events[event].filter(
  26.         cb => cb !== callback
  27.       );
  28.     } else {
  29.       delete this.events[event];
  30.     }
  31.   }
  33.   once(event, callback) {
  34.     const onceCallback = (...args) => {
  35.       callback(...args);
  36.       this.off(event, onceCallback);
  37.     };
  38.     this.on(event, onceCallback);
  39.   }
  40. }

关键设计点：

  • 使用对象存储事件队列
  • 支持链式调用（可扩展）
  • once方法的实现技巧
  • 参数解构传递

四、防抖与节流

4.1 防抖（debounce）

  1. function debounce(fn, delay, immediate = false) {
  2.   let timer = null;
  4.   return function(...args) {
  5.     const context = this;
  7.     if (immediate && !timer) {
  8.       fn.apply(context, args);
  9.     }
  11.     clearTimeout(timer);
  12.     timer = setTimeout(() => {
  13.       if (!immediate) {
  14.         fn.apply(context, args);
  15.       }
  16.       timer = null;
  17.     }, delay);
  18.   };
  19. }

参数说明：

  • immediate控制是否立即执行首次调用
  • 使用闭包保存timer引用
  • 箭头函数保持this指向

4.2 节流（throttle）

  1. function throttle(fn, delay) {
  2.   let lastTime = 0;
  3.   let timer = null;
  5.   return function(...args) {
  6.     const context = this;
  7.     const now = Date.now();
  8.     const remaining = delay - (now - lastTime);
  10.     if (remaining <= 0) {
  11.       if (timer) {
  12.         clearTimeout(timer);
  13.         timer = null;
  14.       }
  15.       lastTime = now;
  16.       fn.apply(context, args);
  17.     } else if (!timer) {
  18.       timer = setTimeout(() => {
  19.         lastTime = Date.now();
  20.         timer = null;
  21.         fn.apply(context, args);
  22.       }, remaining);
  23.     }
  24.   };
  25. }

时间戳+定时器组合实现：

  • 首次立即执行
  • 末次延迟执行
  • 动态计算剩余时间

五、Promise实现

5.1 基础版Promise

  1. class MyPromise {
  2.   constructor(executor) {
  3.     this.state = 'pending';
  4.     this.value = undefined;
  5.     this.reason = undefined;
  6.     this.onFulfilledCallbacks = [];
  7.     this.onRejectedCallbacks = [];
  9.     const resolve = (value) => {
  10.       if (this.state === 'pending') {
  11.         this.state = 'fulfilled';
  12.         this.value = value;
  13.         this.onFulfilledCallbacks.forEach(fn => fn());
  14.       }
  15.     };
  17.     const reject = (reason) => {
  18.       if (this.state === 'pending') {
  19.         this.state = 'rejected';
  20.         this.reason = reason;
  21.         this.onRejectedCallbacks.forEach(fn => fn());
  22.       }
  23.     };
  25.     try {
  26.       executor(resolve, reject);
  27.     } catch (err) {
  28.       reject(err);
  29.     }
  30.   }
  32.   then(onFulfilled, onRejected) {
  33.     onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  34.     onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
  36.     const promise2 = new MyPromise((resolve, reject) => {
  37.       if (this.state === 'fulfilled') {
  38.         setTimeout(() => {
  39.           try {
  40.             const x = onFulfilled(this.value);
  41.             resolvePromise(promise2, x, resolve, reject);
  42.           } catch (e) {
  43.             reject(e);
  44.           }
  45.         }, 0);
  46.       } else if (this.state === 'rejected') {
  47.         setTimeout(() => {
  48.           try {
  49.             const x = onRejected(this.reason);
  50.             resolvePromise(promise2, x, resolve, reject);
  51.           } catch (e) {
  52.             reject(e);
  53.           }
  54.         }, 0);
  55.       } else if (this.state === 'pending') {
  56.         this.onFulfilledCallbacks.push(() => {
  57.           setTimeout(() => {
  58.             try {
  59.               const x = onFulfilled(this.value);
  60.               resolvePromise(promise2, x, resolve, reject);
  61.             } catch (e) {
  62.               reject(e);
  63.             }
  64.           }, 0);
  65.         });
  67.         this.onRejectedCallbacks.push(() => {
  68.           setTimeout(() => {
  69.             try {
  70.               const x = onRejected(this.reason);
  71.               resolvePromise(promise2, x, resolve, reject);
  72.             } catch (e) {
  73.               reject(e);
  74.             }
  75.           }, 0);
  76.         });
  77.       }
  78.     });
  80.     return promise2;
  81.   }
  82. }
  84. function resolvePromise(promise2, x, resolve, reject) {
  85.   if (promise2 === x) {
  86.     return reject(new TypeError('Chaining cycle detected for promise'));
  87.   }
  89.   let called = false;
  90.   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  91.     try {
  92.       const then = x.then;
  93.       if (typeof then === 'function') {
  94.         then.call(
  95.           x,
  96.           y => {
  97.             if (called) return;
  98.             called = true;
  99.             resolvePromise(promise2, y, resolve, reject);
  100.           },
  101.           r => {
  102.             if (called) return;
  103.             called = true;
  104.             reject(r);
  105.           }
  106.         );
  107.       } else {
  108.         resolve(x);
  109.       }
  110.     } catch (e) {
  111.       if (called) return;
  112.       called = true;
  113.       reject(e);
  114.     }
  115.   } else {
  116.     resolve(x);
  117.   }
  118. }

实现要点：

  • 三种状态管理
  • 异步执行回调（使用setTimeout）
  • 链式调用处理
  • 值穿透解析
  • 循环引用检测

六、柯里化实现

6.1 通用柯里化函数

  1. function curry(fn, args = []) {
  2.   return function(...newArgs) {
  3.     const allArgs = [...args, ...newArgs];
  4.     if (allArgs.length >= fn.length) {
  5.       return fn.apply(this, allArgs);
  6.     } else {
  7.       return curry.call(this, fn, allArgs);
  8.     }
  9.   };
  10. }
  12. // 使用示例
  13. function sum(a, b, c) {
  14.   return a + b + c;
  15. }
  16. const curriedSum = curry(sum);
  17. console.log(curriedSum(1)(2)(3)); // 6
  18. console.log(curriedSum(1, 2)(3)); // 6

关键特性：

  • 参数收集与阈值判断
  • 递归调用保持this指向
  • 支持分步传参

七、函数组合

7.1 compose函数实现

  1. function compose(...funcs) {
  2.   if (funcs.length === 0) return arg => arg;
  3.   if (funcs.length === 1) return funcs[0];
  5.   return funcs.reduce((a, b) => (...args) => a(b(...args)));
  6. }
  8. // 使用示例
  9. const add5 = x => x + 5;
  10. const multiply3 = x => x * 3;
  11. const divide2 = x => x / 2;
  12. const operation = compose(divide2, multiply3, add5);
  13. console.log(operation(10)); // ((10+5)*3)/2 = 22.5

实现要点：

  • 边界条件处理
  • 使用reduce实现从右向左的组合
  • 支持多参数传递（通过…args）

八、手写AJAX

8.1 原生XMLHttpRequest实现

  1. function ajax(options) {
  2.   const { url, method = 'GET', data = null, async = true, headers = {} } = options;
  4.   return new Promise((resolve, reject) => {
  5.     const xhr = new XMLHttpRequest();
  6.     xhr.open(method, url, async);
  8.     // 设置请求头
  9.     Object.keys(headers).forEach(key => {
  10.       xhr.setRequestHeader(key, headers[key]);
  11.     });
  13.     xhr.onload = function() {
  14.       if (xhr.status >= 200 && xhr.status < 300) {
  15.         resolve({
  16.           status: xhr.status,
  17.           data: xhr.responseText,
  18.           headers: xhr.getAllResponseHeaders()
  19.         });
  20.       } else {
  21.         reject({
  22.           status: xhr.status,
  23.           error: xhr.statusText
  24.         });
  25.       }
  26.     };
  28.     xhr.onerror = function() {
  29.       reject({
  30.         error: 'Network Error'
  31.       });
  32.     };
  34.     // 处理请求体
  35.     if (data) {
  36.       if (typeof data === 'object') {
  37.         data = JSON.stringify(data);
  38.         if (!headers['Content-Type']) {
  39.           xhr.setRequestHeader('Content-Type', 'application/json');
  40.         }
  41.       }
  42.       xhr.send(data);
  43.     } else {
  44.       xhr.send();
  45.     }
  46.   });
  47. }

关键实现：

  • Promise封装
  • 请求头动态设置
  • 状态码范围判断
  • JSON数据序列化
  • 错误处理机制

面试应对策略

  1. 代码规范：保持一致的缩进和命名风格
  2. 边界处理：主动考虑null/undefined等特殊情况
  3. 性能优化：在实现中体现对性能的考虑（如循环引用检测）
  4. 沟通技巧：
    • 先实现基础功能，再逐步优化
    • 对不确定的部分明确说明假设条件
    • 主动讨论可能的扩展场景

总结

高频手写题考察的是开发者对语言特性的深度理解和工程化思维。建议通过以下方式提升：

  1. 建立类型判断、异步处理等核心模块的模板库
  2. 针对每个实现编写完整的测试用例
  3. 理解底层原理（如事件循环、原型链）
  4. 关注ES6+新特性（如Proxy、Reflect）的应用

掌握这些核心题目后，建议进一步研究源码级实现（如lodash的深拷贝方案），这将在高级面试中形成差异化优势。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数