JS程序常见面试题与答案

JS程序常见面试题与答案考试时间：______分钟总分：______分姓名：______一、选择题1.关于JavaScript中var、let和const的区别，下列说法正确的是A.var声明的变量可以重复声明，let声明的变量不可以重复声明，const声明的变量必须初始化且不可修改B.var声明的变量存在变量提升，let和const声明的变量不存在变量提升C.var声明的变量在全局作用域中是全局属性，let和const声明的变量不会挂载到全局对象上D.let和const的作用域与var相同，都是函数作用域2.下列关于JavaScript数据类型的说法，正确的是A.null和undefined是同一个值B.Symbol是基本数据类型，可以用newSymbol()创建C.Object是JavaScript中所有对象类型的基类D.Number类型在存储64位浮点数时，最高位是符号位3.以下代码的输出结果是console.log(typeofnull);A."null"B."undefined"C."object"D."number"4.关于JavaScript中的this指向，下列说法正确的是A.在普通函数中，this始终指向调用该函数的对象B.箭头函数没有自己的this，它的this继承自外层普通函数C.在事件监听中，this指向绑定的DOM元素D.使用call、apply、bind方法可以改变this的指向，但bind后立即执行5.关于JavaScript的原型链，下列说法正确的是A.每个函数都有一个prototype属性，指向构造函数的原型对象B.每个对象都有一个__proto__属性，指向构造函数的原型对象C.原型链的顶端是nullD.可以通过原型链直接修改构造函数的属性6.下列关于事件循环的说法，正确的是A.宏任务和微任务都属于JavaScript主线程的执行栈B.微任务的优先级高于宏任务C.script标签中的代码是同步执行的，属于宏任务D.Promise.then属于微任务，setTimeout属于宏任务7.以下代码的输出结果是console.log(1+"2");console.log(1-"2");console.log(1+true);console.log(1+null);A.12,-1,2,1B."12",-1,2,1C.12,-1,2,NaND."12",-1,NaN,18.下列关于ES6的解构赋值，说法错误的是A.数组解构赋值可以按顺序赋值B.对象解构赋值不需要按顺序C.解构赋值可以给默认值D.数组解构赋值时，可以使用let关键字二、多选题1.下列哪些是JavaScript的基本数据类型A.StringB.BooleanC.ObjectD.NumberE.UndefinedF.Symbol2.下列关于Promise对象的状态说法，正确的是A.Promise只有三种状态：pending、fulfilled、rejectedB.状态一旦改变就不会再变C.如果处于pending状态，可以通过then方法改变状态D.Promise必须有回调函数，否则会报错3.下列哪些是垃圾回收机制中常用的算法A.引用计数B.标记清除C.分代回收D.标记整理4.下列关于call、apply、bind的说法，正确的是A.call和apply可以立即执行函数B.bind方法返回的是一个新函数C.call和apply的第一个参数都是this的指向D.call和apply的第二个参数都是传入的参数列表5.下列哪些方法可以创建一个新的数组副本（深拷贝）A.JSON.parse(JSON.stringify(obj))B.Object.assign({},obj)C.[...arr]D.slice()或concat()三、填空题1.在JavaScript中，NaN与任何值进行比较（包括自身）的结果都是__________。2.__________方法用于向数组的末尾添加一个或多个元素，并返回新的数组长度。3.__________是JavaScript中唯一一个代表“无”的原始值。4.__________方法用于将一个对象转换为JSON字符串。5.__________是JavaScript中用于异步编程的一种解决方案，比回调函数更优雅。6.__________是函数的一种特殊用法，它允许函数拥有多个参数，并将这些参数组合成一个数组传递给函数。7.__________运算符用于将数组或可迭代对象展开为单独的元素。四、简答题1.请简述什么是闭包，并说明闭包的主要用途是什么。2.请简述JavaScript的事件循环机制，包括宏任务和微任务的区别。3.请解释JavaScript中的`==`和`===`的区别。4.请描述JavaScript的原型链是如何工作的。5.请简述`async`和`await`相比于`Promise.then`的优势是什么。五、编程题1.请手写一个防抖函数，要求：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。2.请手写一个深拷贝函数，能够处理对象、数组以及嵌套结构，不使用JSON.parse/stringify。3.请手写一个Promise的实现，要求包含状态管理、then方法链式调用以及resolve和reject的处理。试卷答案一、选择题1.A解析：var允许重复声明且存在变量提升，let/const具有块级作用域且不允许重复声明，const必须初始化且值不可变。B错误在于let/const也有暂时性死区，不存在变量提升；C正确；D错误在于let/const是块级作用域。2.C,D解析：A正确，String是基本类型；B错误，Symbol是基本数据类型，但必须使用Symbol()而不能使用newSymbol()创建；C正确，Object是所有引用类型的基类；D正确，JavaScript的Number类型遵循IEEE754标准，是64位浮点数。3.C解析：这是JavaScript的一个历史遗留Bug。typeofnull的结果一直是"object"，因为最初的设计是用一个32位的值来表示对象的类型，而null的二进制表示恰好是0。4.C解析：A错误，this的指向取决于调用方式（如call/apply/bind、对象方法调用、严格模式等）；B错误，箭头函数没有自己的this，它的this指向外层作用域（通常是window或定义时的父级）；C正确，在事件监听中，this指向绑定的DOM元素；D错误，bind返回一个绑定后的新函数，需要手动调用才能执行。5.A,B,C解析：A正确，函数的prototype指向原型对象；B正确，对象的隐式原型指向构造函数的原型对象；C正确，原型链的顶端是Ototype，其__proto__指向null；D错误，直接修改构造函数的prototype会导致原本继承该原型的其他实例受到影响，破坏继承关系。6.B,C,D解析：A错误，宏任务和微任务不属于执行栈，执行栈只负责执行同步代码；B正确，微任务优先级高于宏任务；C正确，script标签内的代码是同步执行的，属于宏任务；D正确，Promise.then属于微任务，setTimeout属于宏任务。7.B解析：`1+"2"`会进行类型转换，字符串拼接，结果为"12"；`1-"2"`进行减法运算，结果为-1；`1+true`，true转为1，结果为2；`1+null`，null转为0，结果为1。8.D解析：A正确，数组解构可以按顺序赋值；B正确，对象解构赋值不需要按顺序；C正确，可以设置默认值；D错误，解构赋值本身使用的是let或const，而不是var。二、多选题1.A,B,D,E,F解析：JavaScript的基本数据类型包括String、Number、Boolean、Undefined、Null、Symbol和BigInt。Object是引用数据类型。2.A,B解析：Promise只有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。状态一旦改变就不会再变。C错误，pending状态下不能通过then改变状态；D错误，创建Promise对象时如果不传回调函数，会在内部调用resolve/reject，不一定会报错。3.A,B,D解析：引用计数和标记清除（包含标记整理）是主要的垃圾回收算法。分代回收是V8引擎针对浏览器环境优化的特有机制，也属于垃圾回收的一种策略。4.A,B,C解析：A正确，call和apply可以立即执行函数；B正确，bind返回一个新函数；C正确，第一个参数都是this的指向；D错误，call的第二个参数是逗号分隔的列表，apply的第二个参数是数组。5.A,C,D解析：A正确，JSON.parse(JSON.stringify())可以实现深拷贝；B错误，Object.assign只能进行浅拷贝；C正确，...展开运算符可以深拷贝数组；D正确，slice和concat可以实现数组的深拷贝。三、填空题1.false2.push3.undefined4.stringify5.Promise6....args(或rest参数)7....四、简答题1.闭包定义及用途定义：闭包是指有权访问另一个函数作用域中变量的函数。通常是在一个函数内部定义另一个函数，内部函数引用了外部函数的变量，即使外部函数执行完毕，内部函数依然可以访问这些变量。用途：*数据私有化：避免全局变量污染，封装数据。*实现模块模式：结合IIFE（立即执行函数表达式）实现模块化开发。*函数柯里化与偏函数：通过闭包保存参数状态。*防抖与节流：在实现这些工具函数时经常用到。2.事件循环机制JavaScript是单线程语言，通过事件循环处理异步操作。*执行栈：同步代码按顺序在主线程执行。*微任务：包含Promise.then、MutationObserver、process.nextTick（Node环境）等。当执行栈清空后，浏览器会优先执行微任务队列中的任务。*宏任务：包含setTimeout、setInterval、setImmediate、I/O操作等。微任务全部执行完后，浏览器会从宏任务队列中取一个任务执行。*循环：每次宏任务执行完后，都会检查是否有微任务，如果有则执行完所有微任务，再执行下一个宏任务。3.==与===的区别*==(相等运算符)：比较时会进行类型转换。如果两边类型不同，会尝试将它们转换为相同类型再比较（如数字转字符串、字符串转数字、布尔值转数字等）。*===(全等运算符)：不会进行类型转换。如果两边类型不同，直接返回false；只有类型相同且值也相同时才返回true。推荐在开发中优先使用===。4.原型链工作原理*每个函数在创建时都有一个`prototype`属性，指向一个对象（原型对象）。*每个对象都有一个内部属性`__proto__`（或称为隐式原型），指向创建该对象所用的函数的`prototype`。*当访问一个对象的属性时，如果该对象自身没有这个属性，就会沿着`__proto__`指向的链路向上查找。*如果一直找到`Ototype`还没找到，就会返回undefined。*这条由`__proto__`连接起来的链路就是原型链，最顶端是`Ototype`，其`__proto__`为null。5.async/await相比Promise.then的优势*可读性更强：代码看起来像同步代码，没有层层嵌套的回调函数，逻辑更清晰。*错误处理更方便：可以使用标准的try...catch语句块来捕获异步错误，比Promise的catch方法更符合传统编程习惯。*调试更容易：在调试时，异步调用栈的堆栈信息更完整，更容易定位问题。*支持await：可以在await后面直接等待Promise的结果，不需要在then中一层层传递。五、编程题1.防抖函数```javascriptfunctiondebounce(fn,delay){lettimer=null;returnfunction(){constcontext=this;constargs=arguments;if(timer){clearTimeout(timer);}timer=setTimeout(function(){fn.apply(context,args);},delay);};}```2.深拷贝函数```javascriptfunctiondeepClone(obj){//处理基本类型和nullif(obj===null||typeofobj!=='object'){returnobj;}//处理Dateif(objinstanceofDate){returnnewDate(obj);}//处理RegExpif(objinstanceofRegExp){returnnewRegExp(obj);}//处理数组if(Array.isArray(obj)){constnewArr=[];obj.forEach((item,index)=>{newArr[index]=deepClone(item);});returnnewArr;}//处理普通对象constnewObj={};for(constkeyinobj){if(obj.hasOwnProperty(key)){newObj[key]=deepClone(obj[key]);}}returnnewObj;}```3.Promise实现```javascriptclassMyPromise{constructor(executor){this.state='pending';this.value=undefined;this.reason=undefined;this.onResolvedCallbacks=[];this.onRejectedCallbacks=[];constresolve=(value)=>{if(this.state==='pending'){this.state='fulfilled';this.value=value;this.onResolvedCallbacks.forEach(fn=>fn());}};constreject=(reason)=>{if(this.state==='pending'){this.state='rejected';this.reason=reason;this.onRejectedCallbacks.forEach(fn=>fn());}};try{executor(resolve,reject);}catch(e){reject(e);}}then(onFulfilled,onRejected){onFulfilled=typeofonFulfilled==='function'?onFulfilled:val=>val;onRejected=typeofonRejected==='function'?onRejected:err=>{throwerr};constpromise2=newMyPromise((resolve,reject)=>{if(this.state==='fulfilled'){setTimeout(()=>{try{constx=onFulfilled(this.value);resolvePromise(promise2,x,resolve,reject);}catch(e){reject(e);}},0);}if(this.state==='rejected'){setTimeout(()=>{try{constx=onRejected(this.reason);resolvePromise(promise2,x,resolve,reject);}catch(e){reject(e);}},0);}if(this.state==='pending'){this.onResolvedCallbacks.push(()=>{