JS 高频面试题及详细答案（实战接地气版）

JS高频面试题及详细答案（实战接地气版）一、JS基础核心（必问）1.JS的数据类型有哪些？怎么区分？一共8种数据类型，分为基本类型和引用类型。基本类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt引用类型（1种）：Object（包含普通对象、数组、函数、正则、日期等）区分方式：基本类型：值存在栈内存，赋值是值拷贝，互相不影响引用类型：值存在堆内存，栈里存的是地址，赋值是地址拷贝，修改会互相影响补充踩坑：typeofnull会返回object，这是JS历史bug，判断null只能直接===null。2.typeof和instanceof的区别？各自适用场景？typeof：检测数据类型，返回字符串优点：简单快捷；缺点：区分不了数组、对象、null，统一返回objectinstanceof：检测构造函数的prototype是否出现在实例的原型链上优点：能区分数组、正则、自定义对象；缺点：不能检测基本类型，原型链可篡改，结果不准最全判断方式：Ototype.toString.call()，可以精准判断所有类型。3.讲讲栈内存和堆内存的区别栈内存：自动分配、自动释放，空间小速度快。存放基本类型值、变量地址。函数执行完，栈变量直接销毁。堆内存：手动引用、垃圾回收释放，空间大速度慢。存放引用类型的真实数据。只要有变量引用，堆数据就不会被回收。经典场景：leta={name:1};letb=a;=2;a也会变，因为共用堆地址。4.==和===的区别？==：宽松相等，会隐式类型转换，只对比值===：严格相等，不转换类型，先比类型、再比值，类型不同直接false高频坑点：null==undefined为true，===为false0==''、0==false、''==false都为true开发中优先用===，避免隐式转换带来的诡异bug。5.undefined和null的区别？undefined：声明变量但未赋值、函数无返回值、对象不存在的属性，默认值。代表未定义。null：手动赋值的空值，代表主动置空，一般用来释放对象引用。简单记：undefined是系统默认空，null是程序员手动空。二、变量、作用域与闭包（重中之重）1.var、let、const的区别？var：函数作用域，存在变量提升，可重复声明、可修改，无暂时性死区let：块级作用域，有变量提升但存在暂时性死区，不可重复声明、可修改const：块级作用域，有暂时性死区，不可重复声明、值不可修改（引用类型可改属性）关键考点：暂时性死区块级作用域内，let/const声明前的区域，不能访问变量，会报错。var没有这个限制。开发规范：默认用const，能改的变量用let，禁用var。2.什么是作用域？什么是作用域链？作用域：变量的可访问范围，分为全局、函数、块级作用域。作用域链：内层作用域可以访问外层变量，外层不能访问内层。查找变量时，从当前层逐级向外查找，直到全局作用域，这条查找链路就是作用域链。作用域在定义时确定，和执行位置无关。3.什么是闭包？闭包的优缺点、使用场景通俗定义：内层函数引用了外层函数的变量，外层函数执行结束后，变量没有被销毁，这个内层函数就是闭包。核心本质：函数嵌套+内部引用外部变量+外部函数执行完毕优点：实现变量私有化，防止全局变量污染保留函数执行上下文，缓存变量缺点：变量常驻内存，无法及时销毁，容易造成内存泄漏滥用闭包会导致页面卡顿常用场景：防抖节流、定时器、封装私有方法、循环绑定事件存索引。4.什么是变量提升？函数提升和变量提升的区别？变量提升：JS执行前，会先扫描代码，把var变量、函数声明提升到当前作用域顶部。区别：函数声明：整体提升，提升后可直接调用var变量：只提升声明，初始值为undefinedlet/const有提升，但存在死区，提升前访问报错注意：函数表达式不存在提升。三、this指向、原型与继承（高频难点）1.this的指向规则（最全最简口诀）this永远指向调用它的对象，和定义位置无关普通函数调用：this指向window（严格模式undefined）对象方法调用：this指向当前对象构造函数调用：this指向new出来的实例定时器/事件回调：默认指向window箭头函数：没有自己的this，继承外层作用域的this高频坑：箭头函数不能作为构造函数、没有arguments、不能绑定this。2.call、apply、bind的区别？三者都是用来改变函数this指向。call：立即执行，参数逐个传递（fn.call(this,1,2)）apply：立即执行，参数数组传递（fn.apply(this,[1,2])）bind：不立即执行，返回新函数，参数逐个传递，可延迟调用场景：参数确定少用call，参数数组多用apply，需要回调缓存this用bind。3.原型、原型链是什么？原型（prototype）：每个函数都有prototype属性，是实例的公共原型对象，存放公共方法。原型链（__proto__）：每个实例对象都有__proto__，指向构造函数的prototype，逐级向上查找的链条就是原型链。查找规则：访问对象属性/方法，先找自身，没有就去原型找，再没有找原型的原型，直到Ototype，最终为null。4.new关键字做了什么？创建一个空的新对象将新对象的__proto__指向构造函数的prototype改变构造函数内部this指向，绑定到新对象执行构造函数代码，给新对象赋值属性如果构造函数无返回值/返回基本类型，返回新对象；如果返回引用类型，直接返回该对象四、异步JS、事件循环（面试核心难点）1.JS为什么是单线程？JS最初是为浏览器交互设计的，主要操作DOM、处理事件。如果多线程，多个线程同时修改同一个DOM，会出现冲突，所以设计为单线程。为了不阻塞代码，引入异步、事件循环机制。2.同步、异步的区别？同步：代码从上到下依次执行，上一句执行完才执行下一句，阻塞代码。异步：代码执行不等待，先跳过异步任务，执行同步代码，等同步执行完再回头执行异步，不阻塞主线程。常见异步：定时器、AJAX、Promise、async/await、DOM事件。3.宏任务和微任务的区别？执行顺序？微任务（优先级高）：Promise.then/catch/finally、async/await、queueMicrotask宏任务（优先级低）：setTimeout、setInterval、AJAX、DOM渲染、script整体代码完整执行顺序（必考）：先执行所有同步代码清空所有微任务队列执行一次宏任务重复以上步骤，无限循环（事件循环）口诀：同步先跑，微任务清空，再跑宏任务4.Promise是什么？三种状态？Promise是解决异步回调地狱的方案，是一个异步容器，存放未来才会结束的异步操作。三种状态（不可逆）：pending等待：初始状态fulfilled成功：执行resolve，状态锁定rejected失败：执行reject，状态锁定特点：状态一旦改变，就不会再变；支持链式调用。5.async/await的作用和原理？async/await是Promise的语法糖，让异步代码写成同步写法，彻底解决回调地狱。async修饰函数，返回值自动包装成Promiseawait只能在async函数内使用，阻塞当前代码，等待Promise执行完毕错误处理：await报错需要用try/catch捕获。6.什么是回调地狱？怎么解决？多层异步回调嵌套，代码层层缩进、可读性极差、无法复用、难以维护，就是回调地狱。解决方案：Promise链式调用async/await同步化写法（最优解）Promise.all并发处理多个异步五、ES6+高频考点1.箭头函数的特点？优缺点？特点：简洁简写，单行可省略return和{}，对象返回需加括号无自己的this，继承外层this无arguments、无prototype、不能new适用场景：定时器回调、数组遍历回调、简单逻辑函数不适用场景：对象方法、构造函数、需要arguments的场景2.解构赋值的常用用法和坑点快速从数组、对象中取值，简化代码。常用：默认值、重命名、嵌套解构、剩余参数坑点：默认值只有值为undefined时才生效，null、0、''都不触发默认值。3.扩展运算符...的作用数组展开、合并数组对象展开、合并对象、浅拷贝剩余参数收集剩余值注意：扩展运算符是浅拷贝，深层引用类型不会拷贝。4.Set和Map的作用？Set：数据不重复，常用于数组去重、判断元素是否存在Map：键可以是任意类型（对象、数组），键值对高效存储，适合复杂数据映射，遍历更灵活。六、手写代码高频题（面试必考）1.手写数组去重javascript

//最简ES6去重

functionunique(arr){

return[...newSet(arr)]

}

2.手写防抖函数触发事件后，延迟n秒执行，期间再次触发重置计时，多用于搜索输入、窗口resize。javascript

functiondebounce(fn,delay=300){

lettimer=null

returnfunction(...args){

if(timer)clearTimeout(timer)

timer=setTimeout(()=>{

fn.apply(this,args)

},delay)

}

}

3.手写节流函数固定时间内只执行一次，多用于滚动、拖拽、点击防重。javascript

functionthrottle(fn,interval=300){

letflag=true

returnfunction(...args){

if(!flag)return

flag=false

fn.apply(this,args)

setTimeout(()=>{

flag=true

},interval)

}

}

4.手写浅拷贝、深拷贝浅拷贝：只拷贝一层，深层引用共用javascript

//对象浅拷贝

letobj2={...obj1}

//数组浅拷贝

letarr2=[...arr1]

简易深拷贝（面试够用）javascript

functiondeepClone(obj){

returnJSON.parse(JSON.stringify(obj))

}

缺点：无法拷贝函数、undefined、正则、循环引用。复杂场景用递归手写。七、JS常见坑点与性能问题1.什么是内存泄漏？常见场景？本该被回收的内存没有被回收，长期占用内存，导致页面卡顿、崩溃。常见场景：全局变量过多、未手动