Web前端JavaScript面试题及详细答案（实战版）

Web前端JavaScript面试题及详细答案（实战版）适用场景：前端初级、中级岗位面试/笔试自测/岗前复习题型说明：包含基础概念、核心原理、异步编程、DOM操作、代码纠错、场景问答题，全部为企业高频面试考点，答案贴合实际开发，通俗易懂、无书面化空话。一、基础概念选择题（15题）1.以下不属于JavaScript基本数据类型的是（）A.StringB.NumberC.ArrayD.Undefined2.typeofnull的返回结果是（）A.nullB.undefinedC.objectD.boolean3.以下关于let、var、const说法错误的是（）A.var存在变量提升，无块级作用域B.let、const有块级作用域，不存在变量提升C.const声明的变量绝对不能修改D.let、const存在暂时性死区4.下列代码输出结果正确的是（）console.log(1+'2'+3)A.6B.123C.15D.335.能够正确判断变量a是否为数组的方法是（）A.typeofa==='array'B.ainstanceofArrayC.a.isArray()D.typeof(a)==Array6.以下哪种循环可以遍历对象自身可枚举属性（）A.for(leti=0;i<len;i++)B.for...inC.for...ofD.while7.JavaScript中严格模式的开启方式正确的是（）A.usestrictB.'usestrict'C.strictmodeD.enablestrict8.以下关于闭包的描述，正确的是（）A.闭包会释放内存，优化性能B.内层函数访问外层函数变量，且外层函数执行结束后变量不销毁C.闭包无法保存局部变量D.闭包只能在全局作用域使用9.===和==的核心区别是（）A.无区别B.==只对比值，===同时对比值和数据类型C.===只对比值，==对比类型D.==优先级更高10.下列不属于原型链特点的是（）A.所有对象都有__proto__属性B.函数有prototype原型对象C.原型链查找是自上而下查找D.原型链最终指向null11.阻止事件冒泡的标准方法是（）A.event.stop()B.event.stopPropagation()C.event.preventDefault()D.event.cancel()12.阻止浏览器默认行为（如a标签跳转、表单提交）的方法是（）A.stopPropagation()B.preventDefault()C.stopImmediatePropagation()D.returntrue13.Promise的三种状态不包括（）A.pendingB.resolveC.fulfilledD.rejected14.以下函数执行后，不会产生宏任务的是（）A.setTimeoutB.setIntervalC.Promise.thenD.AJAX15.ES6中箭头函数的特点说法错误的是（）A.没有自己的thisB.不能作为构造函数C.可以使用argumentsD.不能绑定this二、代码输出判断题（10题，写出最终结果）1.console.log(undefined==null,undefined===null)2.console.log([]==0,[]===0)3.vara=10;functionfn(){console.log(a);vara=20;}fn()4.letb=30;functionfn(){console.log(b);letb=40;}fn()5.console.log(1&&2||0)6.constobj={name:'张三'};='李四';console.log(obj)7.console.log([1,2,3]+[4,5,6])8.setTimeout(()=>{console.log(1)});console.log(2)9.console.log(typeofundefined,typeofNaN)10.letarr=[1,2,3];arr.length=0;console.log(arr)三、核心简答题（8题，企业高频考点）1.简述JS的变量提升机制，以及var、let、const在提升上的区别？2.什么是闭包？闭包的优缺点及实际开发应用场景？3.简述JS的执行上下文、作用域、作用域链的区别与联系？4.讲讲原型和原型链，以及原型链的查找规则？5.谈谈JS的宏任务和微任务，以及事件循环执行顺序？6.call、apply、bind的区别和使用场景？7.什么是防抖和节流？分别适用什么业务场景，写出简易实现思路？8.Promise的优缺点是什么？如何解决Promise链式地狱问题？四、编程实操题（2题，面试手写必考）1.手写一个数组去重方法，要求兼容ES5及以上，尽量高效2.手写实现简易防抖函数五、详细参考答案一、选择题答案+解析1.答案：C解析：JS基本数据类型（原始类型）包括：String、Number、Boolean、Undefined、Null、Symbol、BigInt。Array属于引用数据类型（复杂类型）。2.答案：C解析：这是JS经典bug，typeofnull输出为object，原因是早期JS底层存储标记错误，null代表空对象指针。3.答案：C解析：const声明的基本类型变量不可修改，但声明的引用类型（对象、数组），可以修改内部属性和元素，只是不能重新赋值。4.答案：B解析：JS中字符串与数字相加会触发隐式类型转换，数字转为字符串，从左至右执行：1+'2'='12'，'12'+3='123'。5.答案：B解析：typeof无法判断数组，会返回object；正确判断数组方式：Array.isArray()、ainstanceofArray。6.答案：B解析：for...in遍历对象可枚举属性；for...of只能遍历可迭代对象（数组、字符串等），无法直接遍历普通对象。7.答案：B解析：严格模式必须书写字符串形式'usestrict'，可写在全局或函数头部，开启后禁止变量未定义使用、禁止重复参数等。8.答案：B解析：闭包本质是内层函数引用外层函数的局部变量，外层函数执行完毕后，局部变量不会被销毁，可实现变量私有化、数据缓存。缺点是容易造成内存泄漏。9.答案：B解析：==会自动进行隐式类型转换，仅对比数值；===严格相等，不转换类型，必须值和类型完全一致才为true，开发中优先使用===。10.答案：C解析：原型链查找规则是自下而上，先找自身属性，没有则向上查找原型对象，直至Ototype，最后指向null。11.答案：B解析：stopPropagation()阻止事件冒泡；stopImmediatePropagation()阻止冒泡且阻止后续同类事件执行。12.答案：B解析：preventDefault()专门用于阻止浏览器默认行为，比如a标签跳转、表单提交、滚轮默认事件等。13.答案：B解析：Promise三种状态：pending（进行中）、fulfilled（成功）、rejected（失败），状态一旦改变不可逆。resolve是触发成功的方法，不是状态。14.答案：C解析：微任务包含：Promise.then/catch/finally、async/await、queueMicrotask；宏任务包含：setTimeout、setInterval、AJAX、DOM事件。15.答案：C解析：箭头函数没有this、没有arguments、没有prototype，不能作为构造函数实例化，this指向外层作用域this。二、代码输出题答案+解析1.答案：true、false解析：==判定中undefined和null相等，===类型不同，结果为false。2.答案：true、false解析：空数组==0时，数组转空字符串，空字符串转数字0，结果相等；严格对比类型不同，返回false。3.答案：undefined解析：函数内vara发生变量提升，只提升声明，不提升赋值，打印时a已声明未赋值，故输出undefined。4.答案：报错：Cannotaccess'b'beforeinitialization解析：let存在暂时性死区，块级作用域内声明的变量，在声明前无法访问。5.答案：2解析：&&遇假则停，全真取最后值；||遇真则停，全假取最后值。1&&2结果为2，2||0结果为2。6.答案：{name:'李四'}解析：const修饰对象，仅锁定变量地址，不锁定内部属性，可修改对象属性、数组元素。7.答案：1,2,34,5,6解析：数组相加会先转为字符串，两个数组拼接字符串后合并。8.答案：2、1解析：setTimeout是宏任务，同步代码优先执行，同步执行完再执行宏任务。9.答案：undefined、number解析：typeofundefined返回undefined；NaN是Number类型的特殊值，typeofNaN返回number。10.答案：[]解析：直接将数组length置为0，会清空数组所有元素。三、简答题详细答案1.变量提升及三者区别变量提升：JS代码执行前，解析器会先扫描代码，将变量、函数声明提升到当前作用域顶部，再逐行执行代码。区别：①var：存在变量提升，无块级作用域，可重复声明，提升后默认赋值undefined；②let：存在提升但不初始化，存在暂时性死区，有块级作用域，不可重复声明；③const：规则同let，且声明时必须赋值，不可重新赋值。2.闭包概念、优缺点及应用场景概念：一个函数嵌套另一个函数，内层函数访问外层函数的局部变量，外层函数执行结束后，局部变量依然被内层函数保留，不会被GC回收，这个组合就是闭包。优点：实现变量私有化、缓存数据、延长变量生命周期、避免全局变量污染。缺点：变量长期占用内存，无法自动释放，容易造成内存泄漏，滥用会导致页面性能下降。应用场景：防抖节流函数、定时器缓存变量、模块化封装、柯里化、私有方法封装。3.执行上下文、作用域、作用域链①作用域：代码变量的可访问范围，分为全局、函数、块级作用域，静态存在，书写代码时就已确定；②执行上下文：代码运行时的执行环境，包含变量、this、作用域链等，动态创建，函数调用时生成，执行完毕销毁；③作用域链：多个层级作用域嵌套形成的链式结构，用于变量查找，内层可访问外层变量，外层无法访问内层。4.原型与原型链及查找规则①每个函数都有prototype（显式原型），存储公共属性和方法，供实例共享；②每个实例对象都有__proto__（隐式原型），指向构造函数的prototype；③原型链：对象的__proto__层层向上指向对应的原型对象，最终指向Ototype，最后指向null，形成的链式结构就是原型链。查找规则：访问对象属性/方法时，先查找自身，自身没有则沿原型链向上查找，直到顶层null，找不到则返回undefined。5.宏任务微任务与事件循环JS是单线程语言，为解决同步阻塞问题，通过事件循环调度异步任务，任务分为宏任务、微任务。微任务：优先级更高，执行时机更早，包含Promise.then、async/await、queueMicrotask；宏任务：优先级较低，包含setTimeout、setInterval、AJAX、DOM渲染。执行顺序：先执行所有同步代码→清空所有微任务队列→执行一个宏任务→再次清空微任务，循环往复。6.call、apply、bind区别与场景三者作用一致：修改函数内部this指向。①call(thisArg,参数1,参数2...)：立即执行函数，参数逐个传递；适合参数数量少、固定的场景；②apply(thisArg,[参数数组])：立即执行函数，参数以数组形式传递；适合参数不固定、数组传参场景；③bind(thisArg)：不会立即执行，返回一个修改this后的新函数；适合事件绑定、定时器回调等需要延迟执行的场景。7.防抖、节流概念、场景及实现思路防抖：频繁触发事件时，只在最后一次触发后延迟结束执行一次；核心是清空定时器重置计时。适用场景：搜索框输入联想、窗口resize、表单输入验证。节流：频繁触发事件时，固定时间内只执行一次，限制执行频率。适用场景：滚动监听、鼠标移动、按钮频繁点击、页面拖拽。实现思路：防抖通过定时器清除重置；节流通过时间戳或定时器锁限制执行间隔。8.Promise优缺点及链式地狱解决方案优点：解决传统回调函数嵌套过深的回调地狱问题，代码扁平化，状态可控，支持链式调用；缺点：无法取消任务、错误需要手动捕获、多个并行