logo

开发者热搜

面试必杀技：最全手写JS题精讲与实战指南

作者：JC2025.09.19 12:47浏览量：0

简介：本文整理了面试中高频出现的手写JS题目，涵盖基础语法、异步编程、原型链、闭包等核心知识点，提供详细解析与代码实现，助力开发者攻克技术面试难关。

面试中最全的手写JS题：从基础到进阶的实战指南

在前端技术面试中，手写JS代码是检验开发者基础功底的核心环节。无论是初级工程师还是资深开发者，都可能被要求现场实现某些经典算法或语言特性。本文将系统梳理面试中最常出现的手写JS题，涵盖基础语法、异步编程、原型链、闭包等核心知识点，并提供可运行的代码示例与深度解析。

一、基础语法与数据类型操作

1. 深拷贝实现

题目：实现一个函数，能够深度克隆任意JavaScript对象（包括循环引用）。

解析：深拷贝需要处理多种数据类型（Object、Array、Date、RegExp等），并解决循环引用导致的栈溢出问题。

  1. function deepClone(obj, hash = new WeakMap()) {
  2.   // 处理基本类型和null/undefined
  3.   if (obj === null || typeof obj !== 'object') return obj;
  5.   // 处理循环引用
  6.   if (hash.has(obj)) return hash.get(obj);
  8.   // 处理特殊对象类型
  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解决循环引用
  • 区分基本类型与引用类型
  • 特殊对象类型的单独处理
  • Symbol属性的拷贝

2. 类型判断函数

题目：实现一个比typeof更准确的类型判断函数。

解析：typeof无法区分Array、Date等对象类型，需要结合Object.prototype.toString。

  1. function getType(obj) {
  2.   return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
  3. }
  5. // 测试
  6. console.log(getType([])); // "array"
  7. console.log(getType(new Date())); // "date"
  8. console.log(getType(/regex/)); // "regexp"

优势：

  • 统一处理所有类型
  • 避免instanceof的跨窗口问题
  • 代码简洁高效

二、异步编程与事件循环

1. Promise实现

题目：手写一个简化版Promise，支持then方法链式调用。

解析：需要理解Promise的三种状态（pending/fulfilled/rejected）和微任务队列机制。

  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 : v => v;
  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.         });
  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) 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(x, y => {
  92.           if (called) return;
  93.           called = true;
  94.           resolvePromise(promise2, y, resolve, reject);
  95.         }, r => {
  96.           if (called) return;
  97.           called = true;
  98.           reject(r);
  99.         });
  100.       } else {
  101.         resolve(x);
  102.       }
  103.     } catch (e) {
  104.       if (called) return;
  105.       called = true;
  106.       reject(e);
  107.     }
  108.   } else {
  109.     resolve(x);
  110.   }
  111. }

核心机制：

  • 状态机管理
  • 异步调度（setTimeout模拟微任务）
  • 链式调用处理
  • 值穿透与Promise解析

2. Async/Await原理模拟

题目：用Generator函数模拟async/await的实现。

解析：理解async函数本质是Generator函数的语法糖。

  1. function asyncToGenerator(generatorFn) {
  2.   return function() {
  3.     const gen = generatorFn.apply(this, arguments);
  4.     return new Promise((resolve, reject) => {
  5.       function step(key, arg) {
  6.         let record;
  7.         try {
  8.           record = gen[key](arg);
  9.         } catch (err) {
  10.           return reject(err);
  11.         }
  12.         const { value, done } = record;
  13.         if (done) return resolve(value);
  14.         return Promise.resolve(value).then(
  15.           v => step('next', v),
  16.           e => step('throw', e)
  17.         );
  18.       }
  19.       step('next');
  20.     });
  21.   };
  22. }
  24. // 使用示例
  25. const fetchData = asyncToGenerator(function*(){
  26.   const res1 = yield fetch('url1');
  27.   const res2 = yield fetch('url2');
  28.   return res2;
  29. });

三、原型链与继承

1. 实现new操作符

题目：手写一个函数模拟new操作符的行为。

解析：理解构造函数执行过程与原型链关系。

  1. function myNew(constructor, ...args) {
  2.   // 1. 创建新对象并链接到原型
  3.   const obj = Object.create(constructor.prototype);
  5.   // 2. 执行构造函数并绑定this
  6.   const result = constructor.apply(obj, args);
  8.   // 3. 处理返回值
  9.   return result instanceof Object ? result : obj;
  10. }
  12. // 测试
  13. function Person(name) {
  14.   this.name = name;
  15. }
  16. Person.prototype.sayHi = function() {
  17.   console.log(`Hi, ${this.name}`);
  18. };
  20. const p = myNew(Person, 'Tom');
  21. p.sayHi(); // "Hi, Tom"

执行步骤：

  1. 创建空对象并设置proto指向构造函数prototype
  2. 调用构造函数，this指向新对象
  3. 返回新对象（若构造函数返回对象则返回该对象）

2. 继承实现

题目：实现ES5的类继承（组合寄生式继承）。

解析：最完善的继承方式，解决原型链污染和属性共享问题。

  1. function Parent(name) {
  2.   this.name = name;
  3.   this.colors = ['red', 'blue'];
  4. }
  6. Parent.prototype.sayName = function() {
  7.   console.log(this.name);
  8. };
  10. function Child(name, age) {
  11.   // 继承属性
  12.   Parent.call(this, name);
  13.   this.age = age;
  14. }
  16. // 继承方法
  17. Child.prototype = Object.create(Parent.prototype);
  18. Child.prototype.constructor = Child;
  20. Child.prototype.sayAge = function() {
  21.   console.log(this.age);
  22. };
  24. // 测试
  25. const child1 = new Child('Tom', 5);
  26. child1.colors.push('black');
  27. console.log(child1.colors); // ["red", "blue", "black"]
  29. const child2 = new Child('Jerry', 6);
  30. console.log(child2.colors); // ["red", "blue"]

优势：

  • 属性独立（通过Parent.call）
  • 方法共享（通过原型链）
  • 避免直接修改Child.prototype导致的污染

四、性能优化与算法

1. 防抖与节流

题目：实现防抖(debounce)和节流(throttle)函数。

解析：高频事件处理的核心优化手段。

  1. // 防抖：事件触发后等待n秒再执行，若期间再次触发则重新计时
  2. function debounce(fn, delay) {
  3.   let timer = null;
  4.   return function(...args) {
  5.     if (timer) clearTimeout(timer);
  6.     timer = setTimeout(() => {
  7.       fn.apply(this, args);
  8.     }, delay);
  9.   };
  10. }
  12. // 节流：固定时间间隔内最多执行一次
  13. function throttle(fn, delay) {
  14.   let lastTime = 0;
  15.   return function(...args) {
  16.     const now = Date.now();
  17.     if (now - lastTime >= delay) {
  18.       fn.apply(this, args);
  19.       lastTime = now;
  20.     }
  21.   };
  22. }
  24. // 立即执行版节流
  25. function throttleImmediate(fn, delay) {
  26.   let lastTime = 0;
  27.   let timer = null;
  28.   return function(...args) {
  29.     const now = Date.now();
  30.     const remaining = delay - (now - lastTime);
  32.     if (remaining <= 0) {
  33.       if (timer) {
  34.         clearTimeout(timer);
  35.         timer = null;
  36.       }
  37.       lastTime = now;
  38.       fn.apply(this, args);
  39.     } else if (!timer) {
  40.       timer = setTimeout(() => {
  41.         lastTime = Date.now();
  42.         timer = null;
  43.         fn.apply(this, args);
  44.       }, remaining);
  45.     }
  46.   };
  47. }

应用场景：

  • 防抖：搜索框输入、窗口resize
  • 节流：滚动事件、鼠标移动

2. 数组扁平化

题目：实现一个函数将多维数组扁平化为一维数组。

解析：考察递归与数组方法的使用。

  1. // 方法1：递归
  2. function flatten(arr) {
  3.   let result = [];
  4.   for (let item of arr) {
  5.     if (Array.isArray(item)) {
  6.       result = result.concat(flatten(item));
  7.     } else {
  8.       result.push(item);
  9.     }
  10.   }
  11.   return result;
  12. }
  14. // 方法2：reduce + 递归
  15. function flatten(arr) {
  16.   return arr.reduce((acc, val) => {
  17.     return acc.concat(Array.isArray(val) ? flatten(val) : val);
  18.   }, []);
  19. }
  21. // 方法3：ES6展开运算符（仅限一层）
  22. function flatten(arr) {
  23.   while (arr.some(item => Array.isArray(item))) {
  24.     arr = [].concat(...arr);
  25.   }
  26.   return arr;
  27. }
  29. // 方法4：Generator函数实现
  30. function* flattenGenerator(arr) {
  31.   for (let item of arr) {
  32.     if (Array.isArray(item)) {
  33.       yield* flattenGenerator(item);
  34.     } else {
  35.       yield item;
  36.     }
  37.   }
  38. }
  40. // 测试
  41. const arr = [1, [2, [3, [4]], 5]];
  42. console.log(flatten(arr)); // [1, 2, 3, 4, 5]

五、面试准备建议

  1. 系统梳理知识体系：按照语言特性、异步编程、设计模式等维度分类整理
  2. 代码规范训练：注意变量命名、缩进、注释等细节
  3. 边界条件考虑：始终检查null/undefined、循环引用等特殊情况
  4. 性能优化意识：在实现中体现对时间复杂度、空间复杂度的考虑
  5. 沟通表达能力：面试时清晰阐述实现思路和考虑因素

结语

手写JS题考察的是开发者对语言本质的理解程度。本文整理的题目覆盖了前端面试中最核心的知识点，建议读者结合实际项目经验深入理解每个实现背后的原理。在准备面试时，不仅要能够写出正确代码，更要能解释清楚为什么这样实现，以及可能的优化方向。掌握这些基础，将帮助你在技术面试中脱颖而出。

相关文章推荐

发表评论

最热文章

关于作者

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