2026JavaScript高频面试题及详细答案（实战版）

2026最新JavaScript高频面试题及详细答案（实战版）一、JS基础核心面试题1.说说var、let、const的区别？这是前端基础必考题，核心区别集中在变量提升、作用域、重复声明、值修改四个点：1.作用域不同：var是函数作用域，let、const是块级作用域（{}、if、for内部独立作用域）；2.变量提升不同：var存在变量提升，声明前置、赋值后置，未初始化值为undefined；let、const有暂时性死区，变量提升但不能在声明前使用，会直接报错；3.重复声明：var允许重复声明同一变量；let、const禁止重复声明；4.值修改：var、let声明的变量可重新赋值；const声明的是常量，基本数据类型不可修改，引用数据类型（对象、数组）可修改内部属性，不可直接重新赋值；5.全局挂载：var声明的全局变量会挂载到window；let、const不会。实战总结：开发中完全弃用var，变量用let，常量用const，规范且避免作用域污染、变量泄露问题。2.JS数据类型有哪些？如何区分基本类型和引用类型？JS一共8种数据类型，分为基本类型和引用类型：基本类型（7种）：String、Number、Boolean、Undefined、Null、Symbol、BigInt引用类型（1种）：Object（包含普通对象、数组、函数、正则、日期等）核心区别：1.存储位置：基本类型值存在栈内存，引用类型栈内存存地址，堆内存存真实数据；2.赋值机制：基本类型赋值是值拷贝，新旧变量互不影响；引用类型赋值是地址拷贝，新旧变量指向同一堆数据，修改会互相影响；3.比较规则：基本类型比较值，引用类型比较内存地址。3.typeof和instanceof的区别？各自的缺陷？typeof：用来检测基本数据类型，返回字符串类型的结果。缺陷：typeofnull会返回'object'（历史bug）；无法精准区分数组、普通对象、正则等所有引用类型，统一返回'object'。instanceof：用来检测引用类型的构造函数原型是否出现在实例的原型链上，适合判断对象具体类型。缺陷：无法检测基本类型；原型链可手动修改，判断结果可能不准；跨窗口、跨框架判断会失效。精准类型判断方案：Ototype.toString.call()，可精准区分所有数据类型。4.null和undefined的区别？1.含义不同：undefined代表变量已声明但未赋值、属性不存在、函数无返回值；null代表手动设置的空对象，代表主动置空；2.类型不同：undefined类型为undefined；null类型为object；3.转换数值不同：undefined转数字为NaN；null转数字为0；4.使用场景：未知变量状态、缺省参数是undefined；主动清空对象、释放引用、初始化对象变量用null。二、ES6+高频面试题1.箭头函数和普通函数的区别？箭头函数有哪些局限性？1.this指向不同：普通函数this由调用方式决定（默认全局、对象调用指向对象、new指向实例、bind/call/apply手动绑定）；箭头函数没有自己的this，继承外层作用域的this；2.无arguments：箭头函数不支持arguments对象，只能用剩余参数...args接收参数；3.不能作为构造函数：无法使用new调用，没有prototype原型；4.无this、super、new.target：所有相关特性均继承外层；5.简写规则：单行return可省略大括号和return，单参数可省略括号。使用禁忌：定时器、DOM事件回调、对象方法、原型方法不要用箭头函数，会导致this指向错乱。2.解构赋值的特性及常见坑？解构赋值是快速提取数组、对象属性的语法糖，支持默认值、嵌套解构。核心规则：1.默认值生效条件：严格等于undefined，null、0、''都不会触发默认值；2.对象解构按属性名匹配，数组解构按位置匹配；3.支持重命名、嵌套解构、剩余运算符。常见坑：1.直接解构整体为空对象/空数组，未设置默认值会报错；2.默认值不生效导致变量为undefined；3.剩余运算符必须放在解构最后一位。3.Set、Map的作用及应用场景？Set：无序、唯一的类数组集合，元素不可重复。常用场景：数组去重、存储唯一值、判断元素是否存在、交集/并集/差集计算。Map：键值对集合，键可以是任意类型（对象、数组、基本类型），有序、可迭代。常用场景：复杂数据做键存储、缓存数据、频繁增删查的键值对场景、替代普通对象存储动态键名数据。区别：对象键只能是字符串/Symbol，Map键无限制；对象无序，Map按插入顺序排序。三、作用域、闭包、原型链核心题1.什么是作用域？JS有哪些作用域？作用域是变量、函数的可访问范围，决定了代码中变量的查找和使用权限，JS执行前会先确定作用域，不会随执行流程改变。主流作用域分为3种：1.全局作用域：整个页面、所有代码都可访问，全局变量挂载在window；2.函数作用域：仅函数内部可访问，函数执行完毕后内部变量销毁；3.块级作用域：ES6新增，{}、if、for、while代码块内部生效，解决了var作用域泛滥问题。2.什么是闭包？闭包的作用、优缺点及使用场景定义：内层函数引用了外层函数的变量，外层函数执行结束后，内层函数依然可以访问外层变量，这种组合就是闭包。简单说：函数嵌套+内部引用外部变量+外部函数执行完毕。核心作用：1.保留函数私有变量，实现变量私有化；2.延长变量生命周期，变量不会随函数执行结束销毁；3.实现模块化、防抖节流、柯里化、数据缓存。优点：保护私有变量、避免全局污染、实现状态持久化。缺点：变量常驻内存，容易造成内存堆积，使用不当会引发内存泄漏，需要手动置空释放。实战场景：防抖节流函数、定时器封装、私有方法、循环绑定事件、数据缓存。3.原型和原型链的理解？new操作符做了什么？原型：每个函数都有prototype显式原型，每个实例对象都有__proto__隐式原型，实例的__proto__指向构造函数的prototype。原型链：对象查找属性/方法时，先在自身查找，找不到就顺着__proto__向上查找，直到Ototype，最终指向null，这条查找链路就是原型链。new操作符执行流程：1.创建一个空的新对象；2.将新对象的__proto__指向构造函数的prototype；3.改变构造函数内部this指向，绑定到新对象并执行构造函数；4.如果构造函数返回引用类型，返回该值；否则返回新建的实例对象。四、异步JS、事件循环、宏微任务1.JS为什么是单线程？什么是事件循环？JS最初是为浏览器交互设计的，为了避免DOM操作冲突（多线程同时修改DOM会造成混乱），所以设计为单线程。单线程意味着同一时间只能执行一段代码，为了解决同步阻塞问题，JS引入异步机制和事件循环。事件循环机制：同步代码直接执行，异步代码进入对应队列，同步执行完毕后，不断从任务队列取出任务执行，循环往复，就是事件循环。2.宏任务和微任务的区别？执行顺序是什么？微任务（优先级高）：Promise.then/catch/finally、async/await、queueMicrotask、MutationObserver宏任务（优先级低）：setTimeout、setInterval、setImmediate、DOM渲染、AJAX请求完整执行顺序：1.执行所有同步代码；2.清空所有微任务队列；3.执行一轮宏任务；4.重复2、3步骤，形成事件循环。面试核心考点：每执行完一个宏任务，都会清空当前所有微任务，再执行下一个宏任务，不是所有宏任务执行完再执行微任务。3.Promise的理解？三种状态及特点Promise是解决异步回调地狱的方案，是异步编程的规范，让异步代码扁平化、可链式调用。三种状态：1.pending（等待中）：初始状态，未完成未失败；2.fulfilled（成功）：执行成功，状态不可逆；3.rejected（失败）：执行失败，状态不可逆。核心特点：状态一旦改变就永久固定，不会二次变更；支持链式调用；可以统一捕获异步错误。常用方法：then、catch、finally、all、race、allSettled、any。4.async/await的原理及优缺点？async/await是Promise的语法糖，本质还是基于Promise实现，让异步代码看起来像同步代码，可读性极高。规则：async修饰函数，返回值自动包装为Promise；await只能在async函数内使用，会阻塞后续代码，等待Promise状态变更后继续执行。优点：代码简洁、层级扁平、调试方便、可读性远优于回调和原生Promise。缺点：默认串行执行，多个无依赖异步请求会浪费时间，需要用Promise.all并行优化；错误需要try/catch捕获。五、JS进阶手写源码（面试必考）1.手写防抖函数核心逻辑：触发事件后延迟执行，期间再次触发会重置延迟时间，多用于输入框搜索、窗口resize。javascript

functiondebounce(fn,delay=300){

lettimer=null;

returnfunction(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},delay);

}

}2.手写节流函数核心逻辑：固定时间内只执行一次，限制执行频率，多用于滚动、拖拽、点击频繁触发场景。javascript

functionthrottle(fn,interval=300){

letflag=true;

returnfunction(...args){

if(!flag)return;

flag=false;

setTimeout(()=>{

fn.apply(this,args);

flag=true;

},interval);

}

}3.手写深拷贝（简易完整版）解决浅拷贝只拷贝地址、嵌套对象修改互相影响的问题，处理对象、数组、规避循环引用。javascript

functiondeepClone(obj,map=newWeakMap()){

if(obj===null||typeofobj!=='object')returnobj;

if(map.has(obj))returnmap.get(obj);//处理循环引用

letres=Array.isArray(obj)?[]:{};

map.set(obj,res);

for(letkeyinobj){

if(obj.hasOwnProperty(key)){

res[key]=deepClone(obj[key],map);

}

}

returnres;

}4.手写call/apply/bind手写calljavascript

Ftotype.myCall=function(context,...args){

context=context||window;

context.fn=this;

constresult=context.fn(...args);

deletecontext.fn;

returnresult;

}手写applyjavascript

Ftotype.myApply=function(context,args=[]){

context=context||window;

context.fn=this;

constresult=context.fn(...args);

deletecontext.fn;

returnresult;

}手写bindjavascript

Ftotype.myBind=function(context,...args1){

constfn=this;

returnfunction(...args2){

returnfn.apply(context,[...args1,...args2]);

}

}六、JS性能与常见bug面试题1.什么