20个大厂js面试题

以下是20个涵盖不同难度和知识点的JavaScript大厂面试题，包含核心概念、异步、框架、性能等方向：

一、基础与核心概念

1. 解释JavaScript中的事件循环（Event Loop）机制，并说明宏任务与微任务的区别。
2. 什么是闭包？举例说明闭包的实用场景和可能的内存泄漏问题。
3. 解释this关键字的绑定规则，并说明call、apply、bind的区别。
4. 如何实现JavaScript的深拷贝？考虑循环引用和多种数据类型（如Date、RegExp）。
5. ES6中let、const与var的区别，以及暂时性死区（TDZ）是什么？

二、异步与性能

6. 实现一个支持并发数限制的异步任务调度器（如最多同时执行3个任务）。

   // 示例：new Scheduler(3).addTask(1, '1')...

7. 如何实现Promise.all、Promise.race、Promise.allSettled的polyfill？
8. 解释JavaScript内存管理，什么是内存泄漏？常见场景有哪些？
9. 描述前端性能优化中与JavaScript相关的方案（从加载、执行到垃圾回收）。
10. 什么是防抖和节流？手写实现并说明适用场景。

三、框架与工程化

11. React/Vue中的虚拟DOM是什么？为什么能提升性能？Diff算法大致原理？
12. React Hooks的原理是什么？如何模拟componentDidMount和componentWillUnmount？
13. Vue3的响应式系统原理（Proxy vs Object.defineProperty），并说明依赖收集与触发更新过程。
14. Webpack的Tree Shaking是如何工作的？ES Module和CommonJS模块对摇树的影响？
15. 如何实现一个基于Proxy的简单数据双向绑定（类似Vue3的reactive）？

四、算法与设计

16. 手写：实现一个函数，将嵌套对象扁平化（支持无限嵌套）。

// 输入：{a: {b: {c: 1}}, d: 2}，输出：{'a.b.c': 1, 'd': 2}

17. 实现一个LRU缓存类，要求get和put操作时间复杂度为O(1)。
18. 如何判断两个对象是否“深度相等”（包括嵌套对象、数组、特殊类型）？
19. 设计一个任务队列，支持异步任务按顺序执行，且可中途插入优先级任务。
20. 实现一个函数，解析URL的查询参数（考虑重复key、特殊字符、哈希部分）。

五、扩展与开放题（备选）

• 如何监控前端的异常（错误捕获方案）？SourceMap如何配合使用？
• 从输入URL到页面展示，JavaScript在哪些阶段发挥作用？
• 描述前端微前端架构的实现思路及JS隔离方案。

提示：

• 大厂面试常考察原理深度（如手写源码）、场景应用（如性能优化）、系统设计（如调度器）。
• 准备时建议结合ES6+、浏览器原理、框架源码（如React Fiber、Vue3响应式）深入理解。
• 实际面试中可能要求在线编码或白板画图解释事件循环、Diff算法等。

可以根据目标公司（如阿里偏重Node/中台、腾讯重性能、字节考算法）调整侧重点。

我来为您提供这些面试题的详细答案和解析。由于篇幅限制，我会给出关键要点和代码示例，部分题目提供完整实现。

一、基础与核心概念

1.事件循环机制

// 执行顺序示例console.log('1');// 同步setTimeout(()=>console.log('2'),0);// 宏任务Promise.resolve().then(()=>{console.log('3');// 微任务setTimeout(()=>console.log('4'),0);// 宏任务});console.log('5');// 同步// 输出顺序：1 5 3 2 4

核心要点：

• 调用栈：同步代码执行
• 微任务队列：Promise.then、MutationObserver、queueMicrotask
• 宏任务队列：setTimeout、setInterval、I/O、UI渲染
• 执行顺序：同步代码 → 微任务队列清空 → 宏任务一个 → 微任务…

2.闭包

// 实用场景1：模块模式/私有变量functioncreateCounter(){letcount=0;// 私有变量return{increment(){count++;returncount;},decrement(){count--;returncount;},getCount(){returncount;}};}// 实用场景2：防抖节流functiondebounce(fn,delay){lettimer=null;// 闭包保存timerreturnfunction(...args){clearTimeout(timer);timer=setTimeout(()=>fn.apply(this,args),delay);};}// 内存泄漏风险functionleak(){constbigData=newArray(1000000).fill('*');returnfunction(){// 即使不再使用，bigData仍被引用console.log('leak');};}// 解决：合理使用后手动解除引用

3.this绑定

// 绑定规则优先级：new > 显式绑定 > 隐式绑定 > 默认绑定constobj={name:'obj'};functionshowName(){console.log(this.name);}// 1. 默认绑定（非严格模式：window，严格模式：undefined）showName();// 2. 隐式绑定obj.show=showName;obj.show();// 'obj'// 3. 显式绑定showName.call(obj);// 立即执行，参数逐个传递showName.apply(obj,[]);// 立即执行，参数数组传递constboundFn=showName.bind(obj);// 返回新函数boundFn();// 4. new绑定functionPerson(name){this.name=name;}constp=newPerson('new');// this指向新创建的对象

4.深拷贝实现

functiondeepClone(obj,hash=newWeakMap()){// 基础类型和函数直接返回if(obj===null||typeofobj!=='object')returnobj;// 循环引用检测if(hash.has(obj))returnhash.get(obj);// 特殊对象处理if(objinstanceofDate)returnnewDate(obj);if(objinstanceofRegExp)returnnewRegExp(obj);if(objinstanceofMap)returnnewMap(Array.from(obj,([k,v])=>[deepClone(k),deepClone(v)]));if(objinstanceofSet)returnnewSet(Array.from(obj,v=>deepClone(v)));// 获取原型constproto=Object.getPrototypeOf(obj);constclonedObj=proto?Object.create(proto):{};// 缓存hash.set(obj,clonedObj);// 复制属性（包括Symbol键）constallKeys=[...Object.getOwnPropertyNames(obj),...Object.getOwnPropertySymbols(obj)];for(constkeyofallKeys){constdescriptor=Object.getOwnPropertyDescriptor(obj,key);if(descriptor){if(descriptor.value&&typeofdescriptor.value==='object'){clonedObj[key]=deepClone(descriptor.value,hash);}else{Object.defineProperty(clonedObj,key,descriptor);}}}returnclonedObj;}

5.let/const/var区别

// 1. 作用域{vara=1;// 函数作用域letb=2;// 块级作用域constc=3;// 块级作用域}console.log(a);// 1console.log(b);// ReferenceErrorconsole.log(c);// ReferenceError// 2. 变量提升console.log(d);// undefined（变量提升）vard=1;console.log(e);// ReferenceError（暂时性死区）lete=2;// 3. 重复声明varf=1;varf=2;// ✅ 允许letg=1;letg=2;// ❌ SyntaxError// 4. const常量（必须初始化，不可重新赋值）consth=1;h=2;// ❌ TypeError// const对象属性可修改constobj={x:1};obj.x=2;// ✅obj={};// ❌

二、异步与性能

6.并发任务调度器

classScheduler{constructor(maxCount){this.maxCount=maxCount;this.running=0;this.queue=[];}addTask(delay,value){returnnewPromise(resolve=>{consttask=()=>{returnnewPromise(res=>{setTimeout(()=>{console.log(value);res();},delay);}).then(()=>{resolve(value);this.running--;this.runNext();});};this.queue.push(task);this.runNext();});}runNext(){if(this.running<this.maxCount&&this.queue.length){consttask=this.queue.shift();this.running++;task();}}}// 使用constscheduler=newScheduler(2);scheduler.addTask(1000,'1').then(()=>console.log('任务1完成'));scheduler.addTask(500,'2').then(()=>console.log('任务2完成'));scheduler.addTask(300,'3').then(()=>console.log('任务3完成'));

7.Promise方法实现

// Promise.allPromise.myAll=function(promises){returnnewPromise((resolve,reject)=>{constresults=[];letcount=0;promises.forEach((promise,index)=>{Promise.resolve(promise).then(value=>{results[index]=value;count++;if(count===promises.length){resolve(results);}}).catch(reject);});if(promises.length===0)resolve([]);});};// Promise.racePromise.myRace=function(promises){returnnewPromise((resolve,reject)=>{promises.forEach(promise=>{Promise.resolve(promise).then(resolve).catch(reject);});});};// Promise.allSettledPromise.myAllSettled=function(promises){returnPromise.all(promises.map(p=>Promise.resolve(p).then(value=>({status:'fulfilled',value}),reason=>({status:'rejected',reason}))));};

8.内存泄漏场景

// 1. 意外全局变量functionleak1(){leak='全局变量';// 忘记var/let/constthis.leak2='this指向window';}// 2. 定时器未清除functionleak2(){constdata=newArray(1000000);setInterval(()=>{console.log(data.length);// data一直被引用},1000);}// 3. 闭包滥用functionleak3(){constdata='data';returnfunction(){console.log(data);// 闭包长期持有data};}// 4. DOM引用未释放letelements={button:document.getElementById('button')};// 即使button从DOM移除，elements.button仍持有引用// 5. 事件监听未移除functionleak5(){constelement=document.createElement('div');element.addEventListener('click',()=>{});element.remove();// 监听器仍在内存中}

9.JavaScript性能优化

// 1. 代码层面// 避免全局查找functionslow(){for(leti=0;i<array.length;i++){}// 每次读取length}functionfast(){constlen=array.length;for(leti=0;i<len;i++){}}// 2. 事件委托// ❌ 每个li绑定事件document.querySelectorAll('li').forEach(li=>{li.addEventListener('click',handler);});// ✅ 委托到父元素document.querySelector('ul').addEventListener('click',e=>{if(e.target.tagName==='LI')handler(e);});// 3. 防抖节流functionthrottle(fn,delay){letlastTime=0;returnfunction(...args){constnow=Date.now();if(now-lastTime>=delay){fn.apply(this,args);lastTime=now;}};}// 4. 虚拟列表// 只渲染可见区域的列表项classVirtualList{constructor(container,itemCount,itemHeight,renderItem){this.container=container;this.itemCount=itemCount;this.itemHeight=itemHeight;this.renderItem=renderItem;this.visibleCount=Math.ceil(container.clientHeight/itemHeight);this.startIndex=0;this.render();container.addEventListener('scroll',this.handleScroll.bind(this));}render(){// 只渲染可见项}}

10.防抖与节流

// 防抖：频繁触发只执行最后一次functiondebounce(fn,delay,immediate=false){lettimer=null;letisInvoked=false;returnfunction(...args){constcontext=this;if(immediate&&!isInvoked){fn.apply(context,args);isInvoked=true;}clearTimeout(timer);timer=setTimeout(()=>{if(!immediate){fn.apply(context,args);}isInvoked=false;},delay);};}// 节流：频繁触发按固定频率执行functionthrottle(fn,delay,options={}){const{leading=true,trailing=true}=options;lettimer=null;letlastTime=0;returnfunction(...args){constcontext=this;constnow=Date.now();if(!lastTime&&!leading)lastTime=now;constremaining=delay-(now-lastTime);if(remaining<=0||remaining>delay){if(timer){clearTimeout(timer);timer=null;}fn.apply(context,args);lastTime=now;}elseif(!timer&&trailing){timer=setTimeout(()=>{fn.apply(context,args);lastTime=leading?Date.now():0;timer=null;},remaining);}};}// 使用场景// 防抖：搜索框输入、窗口resize// 节流：滚动事件、按钮频繁点击

三、框架与工程化

11.虚拟DOM与Diff算法

// 简化的Diff实现functiondiff(oldVNode,newVNode){// 1. 节点类型不同，直接替换if(oldVNode.type!==newVNode.type){return{type:'REPLACE',newNode:newVNode};}// 2. 文本节点更新if(typeofoldVNode==='string'&&typeofnewVNode==='string'){if(oldVNode!==newVNode){return{type:'TEXT',content:newVNode};}returnnull;}// 3. 属性更新constpropsPatches=diffProps(oldVNode.props,newVNode.props);// 4. 子节点Diff（Key优化）constchildrenPatches=diffChildren(oldVNode.children,newVNode.children);// 5. 列表Diff策略// - 相同位置节点比较// - Key相同的节点移动// - 新增/删除节点}// React的Fiber架构核心// 1. 将递归更新改为可中断的链表遍历// 2. 时间切片：将任务分成小片段执行// 3. 双缓存：current树和workInProgress树

12.React Hooks原理

// 简化的useState实现lethookIndex=0;lethookState=[];functionuseState(initialState){constcurrentIndex=hookIndex;if(hookState[currentIndex]===undefined){hookState[currentIndex]=typeofinitialState==='function'?initialState():initialState;}constsetState=(newState)=>{hookState[currentIndex]=typeofnewState==='function'?newState(hookState[currentIndex]):newState;// 触发重新渲染scheduleRerender();};hookIndex++;return[hookState[currentIndex],setState];}// useEffect模拟生命周期functionuseEffect(effect,deps){constcurrentIndex=hookIndex;constprevDeps=hookState[currentIndex];consthasChanged=!prevDeps||deps.some((dep,i)=>!Object.is(dep,prevDeps[i]));if(hasChanged){// 清理上一次的effectif(prevDeps&&prevDeps.cleanup){prevDeps.cleanup();}// 执行新的effectconstcleanup=effect();hookState[currentIndex]=deps;hookState[currentIndex].cleanup=cleanup;}hookIndex++;}// 模拟生命周期useEffect(()=>{// componentDidMountconsole.log('组件挂载');return()=>{// componentWillUnmountconsole.log('组件卸载');};},[]);// 空依赖数组

13.Vue3响应式原理

// 简化的reactive实现functionreactive(target){returnnewProxy(target,{get(obj,key,receiver){// 依赖收集track(obj,key);constres=Reflect.get(obj,key,receiver);// 深层响应式if(res&&typeofres==='object'){returnreactive(res);}returnres;},set(obj,key,value,receiver){constoldValue=obj[key];constresult=Reflect.set(obj,key,value,receiver);if(oldValue!==value){// 触发更新trigger(obj,key);}returnresult;}});}// 依赖收集与触发consttargetMap=newWeakMap();letactiveEffect=null;functiontrack(target,key){if(!activeEffect)return;letdepsMap=targetMap.get(target);if(!depsMap){depsMap=newMap();targetMap.set(target,depsMap);}letdep=depsMap.get(key);if(!dep){dep=newSet();depsMap.set(key,dep);}dep.add(activeEffect);}functiontrigger(target,key){constdepsMap=targetMap.get(target);if(!depsMap)return;constdep=depsMap.get(key);if(dep){dep.forEach(effect=>effect());}}// 副作用函数functioneffect(fn){activeEffect=fn;fn();activeEffect=null;}

14.Webpack Tree Shaking

// ES Module（支持静态分析）exportconsta=1;exportconstb=2;// 未使用时会被摇掉exportfunctionc(){};// CommonJS（动态导出，不支持Tree Shaking）module.exports={a:1,b:2};// Webpack配置优化module.exports={mode:'production',// 自动开启Tree Shakingoptimization:{usedExports:true,// 标记已使用导出sideEffects:true,// package.json中配置minimize:true// 删除未使用代码}};// package.json配置{"sideEffects":["*.css",// 保留CSS文件"*.scss","polyfill.js"]}

15.Proxy双向绑定

functioncreateReactive(data,callback){returnnewProxy(data,{get(target,key){returntarget[key];},set(target,key,value){constoldValue=target[key];target[key]=value;// 触发更新callback(key,oldValue,value);returntrue;}});}// 实现双向绑定classMiniVue{constructor(options){this.$options=options;this.$data=options.data();this.observe(this.$data);this.compile(options.el);}observe(data){this.$data=createReactive(data,(key,oldVal,newVal)=>{// 更新视图this.updateView(key);});}compile(el){constelement=document.querySelector(el);constnodes=element.childNodes;nodes.forEach(node=>{if(node.nodeType===1){// 元素节点constattrs=node.attributes;Array.from(attrs).forEach(attr=>{if(attr.name.startsWith('v-model')){constkey=attr.value;node.value=this.$data[key];node.addEventListener('input',e=>{this.$data[key]=e.target.value;});}});}if(node.nodeType===3){// 文本节点consttext=node.textContent;constreg=/\{\{(.+?)\}\}/g;if(reg.test(text)){constkey=RegExp.$1.trim();node.textContent=this.$data[key];// 创建观察者this.updateView=(changedKey)=>{if(changedKey===key){node.textContent=this.$data[key];}};}}});}}

四、算法与设计

16.对象扁平化

functionflattenObject(obj,prefix='',res={}){if(obj===null||typeofobj!=='object'){res[prefix]=obj;returnres;}if(Array.isArray(obj)){for(leti=0;i<obj.length;i++){constkey=prefix?`${prefix}[${i}]`:`[${i}]`;flattenObject(obj[i],key,res);}}else{for(constkeyinobj){if(obj.hasOwnProperty(key)){constnewKey=prefix?`${prefix}.${key}`:key;flattenObject(obj[key],newKey,res);}}}returnres;}// 示例constobj={a:{b:{c:1},d:[2,{e:3}]},f:4};console.log(flattenObject(obj));// 输出: { 'a.b.c': 1, 'a.d[0]': 2, 'a.d[1].e': 3, f: 4 }

17.LRU缓存

classLRUCache{constructor(capacity){this.capacity=capacity;this.cache=newMap();// 保持插入顺序}get(key){if(!this.cache.has(key))return-1;constvalue=this.cache.get(key);// 移动到最新位置this.cache.delete(key);this.cache.set(key,value);returnvalue;}put(key,value){if(this.cache.has(key)){this.cache.delete(key);}elseif(this.cache.size>=this.capacity){// 删除最久未使用的（Map第一个）constoldestKey=this.cache.keys().next().value;this.cache.delete(oldestKey);}this.cache.set(key,value);}// 进阶版：双向链表 + Map O(1)/* class Node { constructor(key, value) { this.key = key; this.value = value; this.prev = null; this.next = null; } } */}// 使用constlru=newLRUCache(2);lru.put(1,1);lru.put(2,2);console.log(lru.get(1));// 1lru.put(3,3);// 移除key 2console.log(lru.get(2));// -1

18.深度相等比较

functiondeepEqual(a,b,map=newWeakMap()){// 1. 同一引用if(a===b)returntrue;// 2. 类型不同if(typeofa!==typeofb)returnfalse;// 3. null检查if(a===null||b===null)returna===b;// 4. 循环引用检测if(map.has(a)&&map.get(a)===b)returntrue;map.set(a,b);// 5. 数组比较if(Array.isArray(a)&&Array.isArray(b)){if(a.length!==b.length)returnfalse;returna.every((item,i)=>deepEqual(item,b[i],map));}// 6. 对象比较if(typeofa==='object'){constkeysA=Object.keys(a);constkeysB=Object.keys(b);if(keysA.length!==keysB.length)returnfalse;returnkeysA.every(key=>{if(!keysB.includes(key))returnfalse;returndeepEqual(a[key],b[key],map);});}// 7. 特殊类型if(ainstanceofDate&&binstanceofDate){returna.getTime()===b.getTime();}if(ainstanceofRegExp&&binstanceofRegExp){returna.toString()===b.toString();}// 8. 基本类型returna===b;}

19.任务队列设计

classTaskQueue{constructor(){this.queue=[];this.priorityQueue=[];this.isProcessing=false;}// 添加普通任务enqueue(task){returnnewPromise((resolve,reject)=>{this.queue.push({task,resolve,reject});this.process();});}// 添加优先级任务enqueuePriority(task){returnnewPromise((resolve,reject)=>{this.priorityQueue.push({task,resolve,reject});this.process();});}asyncprocess(){if(this.isProcessing)return;this.isProcessing=true;while(this.priorityQueue.length>0||this.queue.length>0){// 优先执行优先级队列constqueueItem=this.priorityQueue.length>0?this.priorityQueue.shift():this.queue.shift();try{constresult=awaitqueueItem.task();queueItem.resolve(result);}catch(error){queueItem.reject(error);}}this.isProcessing=false;}}// 使用consttaskQueue=newTaskQueue();// 添加普通任务taskQueue.enqueue(()=>fetch('/api/data1')).then(console.log);// 添加优先级任务（插队）taskQueue.enqueuePriority(()=>fetch('/api/important')).then(console.log);

20.URL参数解析

functionparseUrl(url){constresult={};// 提取查询字符串constqueryStr=url.split('?')[1];if(!queryStr)returnresult;// 移除哈希部分constcleanQueryStr=queryStr.split('#')[0];// 分割参数constpairs=cleanQueryStr.split('&');pairs.forEach(pair=>{const[key,value]=pair.split('=');if(!key)return;constdecodedKey=decodeURIComponent(key);constdecodedValue=value?decodeURIComponent(value):'';// 处理重复keyif(result.hasOwnProperty(decodedKey)){if(Array.isArray(result[decodedKey])){result[decodedKey].push(decodedValue);}else{result[decodedKey]=[result[decodedKey],decodedValue];}}else{result[decodedKey]=decodedValue;}});returnresult;}// 进阶版：支持复杂场景functionparseUrlAdvanced(url){consturlObj=newURL(url,window.location.origin);constparams=newURLSearchParams(urlObj.search);constresult={};for(const[key,value]ofparams){// 处理数组参数if(key.endsWith('[]')){constrealKey=key.slice(0,-2);if(!result[realKey])result[realKey]=[];result[realKey].push(value);}// 处理对象参数（如obj[key]=value）elseif(key.includes('[')&&key.includes(']')){const[mainKey,nestedKey]=parseBracketKey(key);if(!result[mainKey])result[mainKey]={};result[mainKey][nestedKey]=value;}else{result[key]=value;}}returnresult;}

五、扩展问题要点

前端异常监控

// 1. 全局错误捕获window.addEventListener('error',(event)=>{const{message,filename,lineno,colno,error}=event;// 上报错误reportError({type:'JS_ERROR',message,stack:error?.stack,position:`${filename}:${lineno}:${colno}`});});// 2. Promise错误window.addEventListener('unhandledrejection',(event)=>{reportError({type:'PROMISE_ERROR',reason:event.reason});});// 3. 资源加载错误window.addEventListener('error',(event)=>{consttarget=event.target;if(target.tagName){reportError({type:'RESOURCE_ERROR',tagName:target.tagName,src:target.src||target.href});}},true);// 捕获阶段// 4. SourceMap解析// 生产环境上传SourceMap到监控系统// 错误发生时解析行列号还原源代码位置

URL到页面展示流程

1. DNS解析：解析域名获取IP
2. TCP连接：三次握手建立连接
3. HTTP请求：发送请求报文
4. 服务器处理：返回HTML、CSS、JS文件
5. 浏览器解析：
   • HTML解析：构建DOM树
   • CSS解析：构建CSSOM树
   • JavaScript执行：
     • 阻塞DOM解析（遇到script标签）
     • 修改DOM/CSSOM
   • 构建渲染树：DOM + CSSOM
6. 布局与绘制：计算布局，栅格化，合成图层
7. JavaScript优化建议：
   • 脚本放底部或使用async/defer
   • 减少DOM操作，避免重排重绘
   • 使用requestAnimationFrame动画
   • 虚拟列表优化长列表

这个答案集覆盖了每个问题的核心要点，建议结合具体面试需求深入某个方向。实际面试中，面试官可能会追问实现细节或要求现场优化代码。