logo

开发者热搜

面试必知：最全手写JS题解析与实战指南

作者：demo2025.09.19 12:47浏览量：1

简介：本文汇总了面试中最常见的手写JS题，涵盖数据类型、函数、原型链、异步处理等核心知识点，通过详细解析和代码示例帮助开发者系统掌握手写JS题的解题思路，提升面试通过率。

面试中最全的手写JS题解析

在前端开发面试中，手写JavaScript代码题是考察候选人基础能力的核心环节。这类题目不仅能检验开发者对语言特性的理解，还能体现其编码规范和问题拆解能力。本文将系统梳理面试中最常出现的手写JS题，从基础到进阶逐层解析，帮助读者构建完整的知识体系。

一、数据类型与基础操作

1. 类型判断：实现typeof的增强版

原生typeof存在局限性（如无法区分Array和Object），面试常要求实现更精准的类型判断函数。

  1. function getType(value) {
  2.   const typeStr = Object.prototype.toString.call(value);
  3.   return typeStr.match(/\[object (.*?)\]/)[1].toLowerCase();
  4. }
  6. // 测试用例
  7. getType([]); // "array"
  8. getType(null); // "null"
  9. getType(/regex/); // "regexp"

关键点：

  • 使用Object.prototype.toString获取标准类型标识
  • 通过正则提取实际类型名称
  • 覆盖所有原始类型和引用类型

2. 深拷贝实现

深拷贝是面试高频题，需处理循环引用、特殊对象（如Date、RegExp）等边界情况。

  1. function deepClone(obj, hash = new WeakMap()) {
  2.   if (obj === null || typeof obj !== 'object') return obj;
  4.   // 处理循环引用
  5.   if (hash.has(obj)) return hash.get(obj);
  7.   let clone;
  8.   if (obj instanceof Date) clone = new Date(obj);
  9.   else if (obj instanceof RegExp) clone = new RegExp(obj);
  10.   else {
  11.     clone = Array.isArray(obj) ? [] : {};
  12.     hash.set(obj, clone);
  13.     for (let key in obj) {
  14.       if (obj.hasOwnProperty(key)) {
  15.         clone[key] = deepClone(obj[key], hash);
  16.       }
  17.     }
  18.   }
  19.   return clone;
  20. }

优化方向：

  • 使用WeakMap避免内存泄漏
  • 特殊对象单独处理
  • 递归实现时注意栈溢出风险

二、函数与高阶编程

1. 柯里化（Currying）实现

柯里化要求将多参数函数转换为单参数函数的嵌套调用。

  1. function curry(fn) {
  2.   return function curried(...args) {
  3.     if (args.length >= fn.length) {
  4.       return fn.apply(this, args);
  5.     } else {
  6.       return function(...args2) {
  7.         return curried.apply(this, args.concat(args2));
  8.       }
  9.     }
  10.   }
  11. }
  13. // 使用示例
  14. const sum = curry((a, b, c) => a + b + c);
  15. sum(1)(2)(3); // 6

应用场景：

  • 参数复用
  • 延迟执行
  • 函数组合

2. 防抖与节流

这两个函数是性能优化的经典手段，需清晰区分实现差异。

  1. // 防抖：事件触发后等待n秒再执行
  2. function debounce(fn, delay) {
  3.   let timer;
  4.   return function(...args) {
  5.     clearTimeout(timer);
  6.     timer = setTimeout(() => fn.apply(this, args), delay);
  7.   }
  8. }
  10. // 节流：固定时间间隔执行一次
  11. function throttle(fn, interval) {
  12.   let lastTime = 0;
  13.   return function(...args) {
  14.     const now = Date.now();
  15.     if (now - lastTime >= interval) {
  16.       fn.apply(this, args);
  17.       lastTime = now;
  18.     }
  19.   }
  20. }

选择依据：

  • 防抖适合输入框联想等场景
  • 节流适合滚动事件、鼠标移动等高频事件

三、原型链与继承

1. 实现new操作符

需理解构造函数执行过程：创建对象、关联原型、执行构造方法、返回对象。

  1. function myNew(constructor, ...args) {
  2.   const obj = Object.create(constructor.prototype);
  3.   const result = constructor.apply(obj, args);
  4.   return result instanceof Object ? result : obj;
  5. }
  7. // 测试
  8. function Person(name) {
  9.   this.name = name;
  10. }
  11. const p = myNew(Person, 'Tom');
  12. console.log(p.name); // "Tom"

执行步骤：

  1. 创建空对象并关联原型
  2. 调用构造函数，绑定this
  3. 处理构造函数返回值

2. 多种继承方式实现

需掌握原型链继承、构造函数继承、组合继承等模式的差异。

  1. // 组合继承示例
  2. function Parent(name) {
  3.   this.name = name;
  4.   this.colors = ['red'];
  5. }
  6. Parent.prototype.sayName = function() {
  7.   console.log(this.name);
  8. }
  10. function Child(name, age) {
  11.   Parent.call(this, name); // 构造函数继承
  12.   this.age = age;
  13. }
  14. Child.prototype = new Parent(); // 原型链继承
  15. Child.prototype.constructor = Child;
  17. const child1 = new Child('Tom', 18);
  18. child1.colors.push('blue');
  19. console.log(child1.colors); // ["red", "blue"]
  21. const child2 = new Child('Jerry', 20);
  22. console.log(child2.colors); // ["red"]

模式对比：
| 继承方式 | 优点 | 缺点 |
|————————|—————————————|—————————————|
| 原型链继承 | 实现简单 | 共享引用属性 |
| 构造函数继承 | 可传参、不共享属性 | 无法继承原型方法 |
| 组合继承 | 结合两者优点 | 调用两次父构造函数 |

四、异步编程

1. 实现Promise

需完整实现then的链式调用、状态变更、异步决议等特性。

  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 {
  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.         });
  66.         this.onRejectedCallbacks.push(() => {
  67.           setTimeout(() => {
  68.             try {
  69.               const x = onRejected(this.reason);
  70.               resolvePromise(promise2, x, resolve, reject);
  71.             } catch (e) {
  72.               reject(e);
  73.             }
  74.           }, 0);
  75.         });
  76.       }
  77.     });
  79.     return promise2;
  80.   }
  81. }
  83. // 辅助函数：处理thenable对象和循环引用
  84. function resolvePromise(promise2, x, resolve, reject) {
  85.   if (promise2 === x) return reject(new TypeError('Chaining cycle detected'));
  86.   let called = false;
  87.   if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  88.     try {
  89.       const then = x.then;
  90.       if (typeof then === 'function') {
  91.         then.call(
  92.           x,
  93.           y => {
  94.             if (called) return;
  95.             called = true;
  96.             resolvePromise(promise2, y, resolve, reject);
  97.           },
  98.           r => {
  99.             if (called) return;
  100.             called = true;
  101.             reject(r);
  102.           }
  103.         );
  104.       } else {
  105.         resolve(x);
  106.       }
  107.     } catch (e) {
  108.       if (called) return;
  109.       called = true;
  110.       reject(e);
  111.     }
  112.   } else {
  113.     resolve(x);
  114.   }
  115. }

实现要点：

  • 三种状态管理
  • 异步执行回调
  • 链式调用支持
  • 循环引用检测

2. 实现Async/Await

基于Generator函数实现简易版Async/Await。

  1. function asyncToGenerator(generatorFn) {
  2.   return function(...args) {
  3.     const gen = generatorFn.apply(this, args);
  4.     return new Promise((resolve, reject) => {
  5.       function step(key, arg) {
  6.         let info;
  7.         try {
  8.           info = gen[key](arg);
  9.         } catch (error) {
  10.           return reject(error);
  11.         }
  12.         const { value, done } = info;
  13.         if (done) {
  14.           return resolve(value);
  15.         }
  16.         Promise.resolve(value).then(
  17.           v => step('next', v),
  18.           e => step('throw', e)
  19.         );
  20.       }
  21.       step('next');
  22.     });
  23.   }
  24. }
  26. // 使用示例
  27. const asyncFunc = asyncToGenerator(function* () {
  28.   const a = yield 1;
  29.   const b = yield a + 2;
  30.   return b + 3;
  31. });
  33. asyncFunc().then(console.log); // 6

工作原理：

  1. 将Generator函数包装为Promise
  2. 通过step函数控制执行流程
  3. 自动处理yield表达式的异步决议

五、算法与数据结构

1. 实现扁平化数组

需处理多级嵌套和类型判断。

  1. function flatten(arr) {
  2.   let result = [];
  3.   for (let item of arr) {
  4.     if (Array.isArray(item)) {
  5.       result = result.concat(flatten(item));
  6.     } else {
  7.       result.push(item);
  8.     }
  9.   }
  10.   return result;
  11. }
  13. // 优化版（支持深度参数）
  14. function flattenDeep(arr, depth = 1) {
  15.   return depth > 0 
  16.     ? arr.reduce((prev, cur) => 
  17.         prev.concat(Array.isArray(cur) ? flattenDeep(cur, depth - 1) : cur), 
  18.       [])
  19.     : arr.slice();
  20. }

应用场景：

  • 处理API返回的嵌套数据
  • 数据预处理

2. 实现LRU缓存

需结合Map数据结构和双向链表实现高效操作。

  1. class LRUCache {
  2.   constructor(capacity) {
  3.     this.capacity = capacity;
  4.     this.cache = new Map();
  5.   }
  7.   get(key) {
  8.     if (this.cache.has(key)) {
  9.       const value = this.cache.get(key);
  10.       this.cache.delete(key);
  11.       this.cache.set(key, value); // 重新插入实现最近使用
  12.       return value;
  13.     }
  14.     return -1;
  15.   }
  17.   put(key, value) {
  18.     if (this.cache.has(key)) {
  19.       this.cache.delete(key);
  20.     } else if (this.cache.size >= this.capacity) {
  21.       const oldestKey = this.cache.keys().next().value;
  22.       this.cache.delete(oldestKey);
  23.     }
  24.     this.cache.set(key, value);
  25.   }
  26. }

性能分析：

  • get和put操作时间复杂度均为O(1)
  • 利用Map保持插入顺序的特性

六、备考建议

  1. 系统梳理知识体系：按数据类型、函数、异步、算法等维度分类整理
  2. 刻意练习：每天手写3-5道典型题，注重代码规范和边界处理
  3. 理解原理：不仅要会写，更要明白为什么这样实现
  4. 模拟面试：找同伴进行模拟面试，训练表达能力和临场反应
  5. 查看源码：研究Lodash、Axios等库的实现，学习最佳实践

通过系统准备和针对性练习，开发者可以显著提升手写JS题的解题能力，在面试中展现出扎实的基本功和良好的编码素养。记住，面试官考察的不仅是代码的正确性，更是解决问题的思路和工程化思维。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数
活动
咨询