Web前端面试JS高频题库（含详细实战答案）

Web前端面试JS高频题库（含详细实战答案）本套题库精选一线公司面试高频JS考题，涵盖基础语法、数据类型、原型作用域、异步、闭包、ES6+、事件、DOM、性能等核心考点，答案贴合实际开发场景，通俗易懂、无书面化空话，适配初中级前端面试。一、JS基础数据类型考题1、JavaScript有哪些数据类型？怎么分类？答案：JS一共8种数据类型，分为基本数据类型（值类型）和引用数据类型（引用类型）两大类。1）基本数据类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt特点：存储在栈内存，赋值是值拷贝，相互独立，修改一个不会影响另一个。2）引用数据类型（1种）：Object，包含普通对象、数组、函数、正则、日期等特点：存储在堆内存，栈内存只存地址，赋值是地址拷贝，多个变量指向同一个堆内存，修改一个会影响所有关联变量。补充：Symbol和BigInt是ES6新增类型，Symbol用来定义唯一不重复的属性名，BigInt用于处理超大整数，避免Number精度丢失问题。2、Null和Undefined的区别？答案：1）含义不同：undefined代表未定义、不存在值；null代表手动置空、空对象。2）产生场景不同：-undefined：变量声明未赋值、函数无返回值、获取对象不存在的属性、函数参数未传参，都会得到undefined。-null：开发者手动给变量赋值为空，主动清空对象、销毁引用时使用。3）类型不同：typeofundefined为undefined；typeofnull为object（历史BUG，无法修复）。4）运算区别：undefined+数字=NaN；null+数字=对应数字（null运算时视为0）。3、typeof和instanceof的区别？各自适用场景？答案：1）typeof：用来判断基本数据类型返回值是字符串，能精准判断：string、number、boolean、undefined、symbol、bigint、function。缺点：判断null会返回object，判断数组、普通对象、正则都会统一返回object，无法细分引用类型。2）instanceof：用来判断引用数据类型的原型关系原理：检测构造函数的prototype是否出现在某个实例对象的原型链上。可以精准判断数组、正则、日期、自定义实例，缺点：无法判断基本类型，且原型链可以手动修改，结果可能不准。实战精准判断类型方案：使用Ototype.toString.call()，可以精准区分所有数据类型。4、==和===的区别？答案：1）==是宽松相等：会先进行隐式类型转换，类型不同先转成相同类型，再比较值。常见规则：数字和字符串比较，字符串转数字；null==undefined为true；0、''、false互相宽松相等。2）===是严格相等：先比较类型，再比较值，类型不同直接返回false，不做任何转换。实战开发中：优先使用===，避免隐式转换带来的诡异BUG，只有判断null/undefined时可以用obj==null。二、变量、作用域与闭包高频题1、var、let、const的区别？答案：1）变量提升：var存在变量提升，声明前访问为undefined；let、const无变量提升，声明前访问会报错（暂时性死区）。2）作用域：var是函数作用域/全局作用域；let、const是块级作用域（{}、if、for内部生效）。3）重复声明：var允许重复声明变量；let、const不允许重复声明。4）赋值修改：var、let可以重复赋值修改；const声明后不能重新赋值，但如果是引用类型（数组、对象），可以修改内部属性/元素。开发规范：优先使用const，确定需要修改变量再用let，禁止使用var。2、什么是暂时性死区？答案：ES6中，用let、const声明的变量，在代码块开始到变量声明语句执行前的区间，属于暂时性死区。在死区内访问该变量会直接报错，不会像var一样返回undefined。核心目的是杜绝变量提升带来的不合理访问，让代码更严谨。3、什么是闭包？闭包的作用、优缺点和使用场景？答案：闭包定义：函数嵌套函数，内层函数调用外层函数的变量/参数，外层函数执行结束后，内层函数依然可以访问外层的变量，这个内层函数就是闭包。简单理解：能够访问函数内部私有变量的函数。核心作用：1）保存私有变量，实现变量私有化，避免全局变量污染；2）让变量的值始终保存在内存中，不会随函数执行结束销毁；3）实现模块化、柯里化、防抖节流等功能。优点：隔离作用域、保护私有数据、延长变量生命周期。缺点：变量常驻内存，容易造成内存泄漏，滥用闭包会导致页面性能变差。常见场景：防抖、节流、定时器回调、循环绑定事件、模块化封装、私有方法。4、什么是作用域链？答案：当访问一个变量时，JS引擎会从当前作用域开始查找，找不到就向上一层父作用域查找，一直查到全局作用域，这个逐级查找的链条就是作用域链。查找规则：就近原则，当前作用域优先，逐级向上，全局找不到则报错。作用域链是闭包能够生效的底层原理。三、原型与原型链面试题1、说说原型、原型对象、原型链的关系？答案：1）prototype（显式原型）：只有函数有，是函数的一个属性，指向原型对象，用来存放所有实例共享的方法和属性。2）__proto__（隐式原型）：所有对象都有，指向创建该对象的构造函数的prototype。3）原型链：对象通过__proto__逐级向上查找原型对象，直到指向null，这条链式结构就是原型链。核心规则：实例访问属性/方法时，先在自身查找，自身没有就沿着原型链向上查找，找到即停止，最终未找到返回undefined。2、constructor属性的作用？答案：每个原型对象都有constructor属性，默认指向对应的构造函数。作用：可以通过实例对象找到创建它的构造函数，也可以用来判断对象的构造类型。手动修改原型时，需要手动修正constructor，避免指向错乱。3、如何实现继承？常用的继承方式优缺点？答案：日常开发最常用：ES6class继承（extends），语法简洁、逻辑清晰，支持静态属性、方法继承，是目前主流方案。原生JS常用继承方式对比：1）原型继承：子类原型指向父类实例，缺点：所有实例共享父类引用属性，会互相干扰，无法传参。2）构造函数继承：借用call/apply继承父类属性，缺点：只能继承实例属性，无法继承原型方法。3）组合继承：结合原型+构造函数继承，解决前两种问题，缺点：父类构造函数会执行两次。4）寄生组合继承：最优原生继承方案，解决组合继承的重复执行问题，ES6extends底层就是该原理。四、异步JS、事件循环核心题1、JS为什么是单线程？什么是同步、异步？答案：JS最初是为浏览器交互设计的，为了避免DOM操作冲突（同时新增、删除节点），所以设计为单线程，同一时间只做一件事。同步：代码从上到下依次执行，上一行执行完才执行下一行，阻塞后续代码。异步：耗时操作（定时器、ajax、DOM事件、Promise）交给浏览器后台执行，不会阻塞主线程，主线程继续执行后续代码，等待耗时操作完成后再回调执行。2、说说浏览器事件循环机制（宏任务、微任务）答案：JS主线程执行完同步代码后，会执行所有微任务，再执行一个宏任务，之后再次清空微任务，循环往复，这就是事件循环。微任务（优先级高）：Promise.then/catch/finally、async/await、queueMicrotask、MutationObserver宏任务（优先级低）：setTimeout、setInterval、AJAX、DOM事件、script整体代码执行顺序总结：同步代码=>全部微任务=>一个宏任务=>循环3、Promise的理解？三种状态、优缺点答案：Promise是ES6解决异步回调地狱的方案，是一个异步容器，保存异步操作的结果。三种状态：1）pending（等待中）：初始状态，异步未完成；2）fulfilled（成功）：异步执行成功，状态不可逆；3）rejected（失败）：异步执行失败，状态不可逆。优点：解决回调地狱，支持链式调用，代码可读性高，可并行处理多个异步（Promise.all）。缺点：一旦执行无法取消，错误需要手动捕获，单纯Promise无法实现暂停、重试。4、async/await的作用？和Promise的关系？答案：async/await是ES7基于Promise的语法糖，让异步代码写法变成同步风格，彻底解决链式调用冗长问题。规则：async修饰的函数，返回值一定是Promise对象；await只能在async函数内部使用，会阻塞当前代码，等待Promise执行完成后再继续执行。错误处理：await异常需要用try/catch捕获，避免程序报错中断。5、回调地狱是什么？怎么解决？答案：多层异步回调嵌套，代码层层缩进、层级太深，可读性极差、难以维护、无法复用，这就是回调地狱。解决方案（由低级到高级）：1）拆分回调函数，简化层级；2）Promise链式调用；3）async/await同步化写法（最优方案）。五、ES6+高频面试题1、箭头函数和普通函数的区别？答案：1）this指向不同：普通函数this由调用方式决定；箭头函数没有自己的this，继承外层作用域的this。2）不能作为构造函数：箭头函数没有prototype，不能new，无法实例化。3）没有arguments：箭头函数不存在arguments类数组对象，只能用剩余参数...rest。4）不能绑定this：call、apply、bind无法改变箭头函数的this指向。5）简洁性：单行箭头函数可省略return和大括号，代码更简洁。实战场景：箭头函数适合定时器、回调函数；不适合对象方法、构造函数、需要this指向调用者的场景。2、解构赋值的理解及使用场景答案：ES6语法，快速从数组、对象中提取值，批量赋值给变量，简化代码。常用场景：1）快速获取接口返回数据、对象属性；2）数组快速交换变量、截取数据；3）函数参数解构，简化传参；4）设置默认值，避免undefined报错。3、扩展运算符...的作用？答案：1）数组展开：复制数组、数组合并、数组转参数；2）对象展开：合并对象、浅拷贝对象、快速修改对象属性；3）剩余参数：收集函数剩余参数，替代arguments。注意：扩展运算符实现的是浅拷贝，多层引用类型数据依然会互相影响。4、Set、Map的作用和场景？答案：1）Set：数据不重复的类数组结构，常用于数组去重、判断元素是否存在、存储唯一值。2）Map：键值对集合，键可以是任意类型（对象、数组、函数），弥补对象key只能是字符串/Symbol的缺陷，适合存储复杂键名数据、高频增删改查数据。六、DOM、事件与BOM面试题1、事件流的三个阶段？事件冒泡和事件捕获区别？答案：事件触发分为三个阶段：捕获阶段=>目标阶段=>冒泡阶段1）事件捕获：从外层父元素向内层目标元素逐级触发（从上到下）；2）事件冒泡：从内层目标元素向外层父元素逐级触发（从下到上），默认事件都是冒泡。addEventListener第三个参数为true是捕获，false是冒泡（默认）。2、事件委托的原理、优点、使用场景？答案：原理：利用事件冒泡机制，给父元素绑定事件，通过事件对象target判断触发事件的子元素，统一处理所有子元素事件。优点：减少DOM事件绑定次数，节省内存；支持动态新增元素绑定事件，无需重复绑定。场景：列表、表格、动态渲染的DOM元素批量绑定点击、移入移出事件。3、如何阻止事件冒泡和默认事件？答案：1）阻止事件冒泡：e.stopPropagation()；2）阻止默认事件（a标签跳转、表单提交、右键菜单等）：e.preventDefault()；3）returnfalse：jQuery中可同时阻止冒泡和默认事件，原生JS只能阻止默认事件。七、深浅拷贝面试题（高频必考）1、什么是浅拷贝、深拷贝？区别是什么？答案：浅拷贝：只拷贝对象/数组的第一层属性，多层引用类型只拷贝地址，修改拷贝后的多层数据，会影响原数据。常用浅拷贝方式：Object.assign()、扩展运算符...、数组slice()、concat()。深拷贝：递归拷贝所有层级属性，完全开辟新的内存空间，修改拷贝后的数据，不会影响原数据。区别核心：是否完全脱离原数据的内存引用，多层数据是否相互影响。2、JS实现深拷贝的方式及优缺点？答案：1）JSON.parse(JSON.stringify())优点：写法简单、零成本；缺点：无法拷贝函数、undefined、正则、Date，会丢失属性，不支持循环引用。2）手写递归深拷贝优点：支持所有数据类型、可处理循环引用、灵活可定制；缺点：代