打工人下班后最痛苦的事，莫过于拖着疲惫的身子还要啃前端面试题吧？看着那些密密麻麻的 JS 代码，脑子都快转不动了！别担心，今天咱就用轻松的方式，带你吃透 4 道高频手写题，让你在面试时自信满满，再也不怕面试官的 "灵魂拷问"！

一、数组去重：面试必问的基础题

好多小伙伴一遇到 "手写数组去重" 就犯难，面试官还经常追问不同场景的优化方案。别慌，咱先从最基础的开始，一步步拆解。

// 利用Set数据结构实现数组去重（简单版）
function unique(arr) {
// Set结构天然具备去重特性，将数组转换为Set再转回数组
return [...new Set(arr)];
}
// 考虑NaN和对象的复杂版（面试重点）
function advancedUnique(arr) {
const seen = new Map(); // 使用Map存储已出现的元素，处理对象引用问题
return arr.filter(item => {
// 判断类型为对象时，转为字符串作为键（实际项目需根据需求调整）
const key = typeof item === 'object' ? JSON.stringify(item) : item;
// NaN在Object.is中被视为相等，直接用Map.has判断即可
if (seen.has(key)) {
return false;
}
seen.set(key, true);
return true;
});
}

简单版适合基础类型去重，复杂版则考虑了 NaN 和对象的情况。面试时记得根据面试官的追问，说出不同方案的适用场景和优缺点哦！

二、实现 Promise.all：吃透异步处理核心

Promise.all 是处理异步并发的常用方法，面试官很喜欢让手写实现，考察对 Promise 原理的理解。

// 手写Promise.all，接收一个Promise数组
function myPromiseAll(promises) {
// 检查参数是否为可迭代对象
if (!Array.isArray(promises)) {
throw new TypeError('参数必须是数组');
}
const result = []; // 存储每个Promise的结果
let count = 0; // 记录已完成的Promise数量
return new Promise((resolve, reject) => {
promises.forEach((promise, index) => {
// 将每个元素转为Promise，处理非Promise值
Promise.resolve(promise).then(value => {
result[index] = value; // 按顺序存储结果
count++; // 完成数量加一
// 所有Promise都完成时，resolve结果数组
if (count === promises.length) {
resolve(result);
}
}).catch(reject); // 任何一个Promise reject，直接reject
});
});
}

这里的关键是按顺序存储结果，处理非 Promise 对象，以及错误处理。面试时可以结合实际场景，比如批量请求数据，说明 Promise.all 的优势和适用场景。

三、模拟 new 操作符：理解 JS 构造函数本质

"模拟 new 操作符" 是考察 JS 原型链的经典题目，看似简单，细节却很多。

// 手写new操作符，接收构造函数和参数
function myNew(constructor, ...args) {
// 处理非函数的情况，抛出错误
if (typeof constructor !== 'function') {
throw new TypeError('constructor must be a function');
}
// 创建一个新对象，原型指向构造函数的prototype
const obj = Object.create(constructor.prototype);
// 调用构造函数，绑定this为新对象，获取返回值
const result = constructor.apply(obj, args);
// 判断返回值是否为对象或函数，是则返回，否则返回新创建的对象
return result && (typeof result === 'object' || typeof result === 'function') ? result : obj;
}

这里需要注意创建对象、绑定 this、处理返回值等细节。面试时可以解释 new 操作符做了哪些事：创建对象、连接原型、绑定 this、返回新对象，让面试官知道你对原型链的理解。

四、防抖函数：高频场景优化必备

防抖函数在处理高频事件（如输入框搜索、窗口 Resize）时非常有用，面试官常考不同模式的实现。

// 手写防抖函数，支持立即执行和 trailing 模式
function debounce(func, wait, immediate = false) {
let timeout = null; // 定时器变量
return function(...args) {
const context = this; // 保存上下文
// 清除之前的定时器
if (timeout) {
clearTimeout(timeout);
}
if (immediate) {
// 立即执行模式：在等待时间开始时执行，之后的操作重置等待时间
const callNow = !timeout; // 第一次调用时没有定时器，立即执行
timeout = setTimeout(() => {
timeout = null; // 等待时间结束后，重置定时器
}, wait);
if (callNow) {
func.apply(context, args); // 立即执行函数
}
} else {
// trailing 模式：在最后一次操作等待时间结束后执行
timeout = setTimeout(() => {
func.apply(context, args); // 延迟执行函数
}, wait);
}
};
}

立即执行模式适合需要即时反馈的场景（如搜索联想），trailing 模式适合最后操作完成后执行（如表单提交）。面试时可以结合具体场景，说明如何选择不同的模式。

面试应对范本

1. 数组去重有哪些方法？各有什么优缺点？大白话回答：常用的有 Set 去重、双重循环、indexOf、filter+Map 等。Set 简单高效，但处理不了对象；双重循环直观但效率低；Map 可以处理对象，但需要转换键值。根据数据类型和场景选择合适的方法就行啦！

2. Promise.all 和 Promise.race 的区别是什么？大白话回答：Promise.all 就像等所有人都完成任务才继续，只要有一个失败就失败；Promise.race 则是看谁先完成或失败，先拿到结果就继续。比如批量请求数据用 all，限时请求用 race。

3. new 操作符做了什么？如果构造函数返回对象会怎样？大白话回答：new 会创建一个新对象，把它的原型指向构造函数的 prototype，然后用这个对象调用构造函数。如果构造函数返回了一个对象，new 就会返回这个对象，否则返回创建的新对象。就像你定制了一个对象，工厂做好后，要是有现成的更好的对象，就直接给你那个啦！

手写代码题到底有没有必要？

有人觉得手写代码题能考察真实能力，毕竟实际项目也需要写基础代码；也有人觉得现在框架层出不穷，记住原理就行，没必要手写。你怎么看呢？快来评论区说说你的观点，看看支持哪边的更多！

每天花点时间，跟着咱一起啃面试题，不知不觉就能积累大量知识。觉得有用的小伙伴别忘了点赞关注，后续还有更多高频面试题和实用技巧分享，帮你轻松应对前端面试，早日拿下心仪的 offer！