H5+JS 高频面试题及详细答案（真实面试版）

H5+JS高频面试题及详细答案（真实面试版）一、JavaScript基础面试题（核心必考）1.说说var、let、const的区别？实际开发怎么选？参考答案：三者核心差异集中在变量提升、作用域、重复声明、赋值规则四个点：1）var：函数级作用域，存在变量提升，允许重复声明，可随意修改赋值；2）let：块级作用域（{}内有效），无变量提升（存在暂时性死区），不允许重复声明，可修改值；3）const：块级作用域，无变量提升，不允许重复声明，声明后不能重新赋值（引用类型可修改内部属性，比如对象、数组）。开发规范：优先用const，能不变就不变；需要重新赋值的变量用let；彻底不用var，容易造成变量污染。2.什么是暂时性死区？参考答案：ES6中，块级作用域内用let/const声明的变量，在声明语句执行前，无法被访问、赋值，这段区间就是暂时性死区。和var不一样，let/const不会把变量提升到作用域顶部，只是绑定了当前块级作用域，提前访问会直接报错Cannotaccess'xxx'beforeinitialization。简单说：变量绑定在先，赋值声明在后，中间空白期就是死区。3.JS数据类型有哪些？怎么判断数据类型？参考答案：8种数据类型：基础类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt引用类型（1种）：Object（包含普通对象、数组、函数、正则等）类型判断实战用法：1）typeof：适合判断基础类型（除了null），typeofnull会返回object（历史bug）；无法精准区分数组、普通对象；2）Array.isArray()：专门判断数组；3）Ototype.toString.call()：最精准，能区分所有类型，比如[objectNull]、[objectArray]、[objectFunction]；4）instanceof：判断引用类型实例，适合判断自定义类、内置对象。4.谈谈JS原型和原型链参考答案：1）每个函数都有prototype（显式原型），用来存放公共方法和属性；2）每个实例对象都有__proto__（隐式原型），指向创建它的构造函数的prototype；3）原型链：对象查找属性/方法时，先找自身，自身没有就顺着__proto__往上找，直到Ototype，终点是null，这条查找链路就是原型链。实际作用：实现属性和方法复用，减少内存占用，也是JS实现继承的核心原理。5.this指向问题，说清楚五种绑定规则参考答案：this指向调用时的执行上下文，和定义位置无关，五种规则优先级从高到低：1）new绑定：new构造函数，this指向新创建的实例对象；2）显式绑定：call、apply、bind，this指向手动指定的第一个参数；3）隐式绑定：对象.方法()，this指向调用的对象；4）默认绑定：独立函数调用（无上述规则），浏览器环境this指向window，严格模式下是undefined；5）箭头函数：没有自己的this，继承外层作用域的this，且无法被call/apply/bind修改。6.call、apply、bind的区别和使用场景参考答案：三者都是修改函数this指向，核心区别在传参和执行方式：1）call：立即执行函数，参数逐个传递（thisArg,p1,p2...）；2）apply：立即执行函数，参数数组传递（thisArg,[p1,p2]）；3）bind：不立即执行，返回一个绑定好this的新函数，可延后调用、传参。实战场景：apply适合数组类传参，比如Math.max.apply(null,arr)；bind适合定时器、事件回调绑定this，避免this丢失。7.什么是闭包？闭包的作用和弊端参考答案：闭包：内层函数访问外层函数的变量，且外层函数执行结束后，内层函数依然能保留对外层变量的引用，这种组合就是闭包。作用：1）实现变量私有化，防止全局变量污染；2）保存函数执行上下文，保留变量状态（比如计数器、防抖节流）；3）实现模块化思维（早期ES5无模块时的解决方案）。弊端：变量常驻内存，不会被垃圾回收，容易造成内存占用过高，使用完需手动置空销毁。8.讲讲JS垃圾回收机制参考答案：JS是自动垃圾回收语言，核心是找出不再使用的变量，释放内存，主要两种方式：1）标记清除（主流）：给活动变量打标记，遍历清除无标记的闲置变量；适用绝大多数场景；2）引用计数：统计变量被引用的次数，次数为0就回收；弊端是无法处理循环引用（两个对象互相引用，次数永远不为0）。开发注意：闭包、定时器、事件监听、全局变量容易造成内存泄漏，需要手动清除。二、JS异步与进阶面试题（重点高频）1.同步、异步的区别？为什么JS需要异步？参考答案：JS是单线程语言，同一时间只能做一件事。同步：代码从上到下依次执行，上一行阻塞，下一行就不执行，耗时任务会卡死主线程；异步：耗时任务（定时器、接口请求、文件读写）交给浏览器后台执行，主线程继续往下走，任务完成后再回调执行结果。异步的核心意义：解决单线程阻塞问题，提升页面交互体验。2.宏任务和微任务的区别？事件循环执行顺序参考答案：宏任务：定时器（setTimeout/setInterval）、AJAX请求、UI渲染、script整体代码；微任务：Promise.then/catch/finally、async/await、queueMicrotask、MutationObserver；执行优先级：微任务>宏任务完整事件循环顺序：1）执行同步代码栈；2）清空所有微任务队列；3）执行一个宏任务；4）重复2、3步骤，循环往复。3.Promise的状态、优缺点，三种状态转换参考答案：Promise三种状态：pending（进行中）、fulfilled（成功）、rejected（失败）状态不可逆：只能从pending转为成功/失败，转换后永久固定，不会再改变。优点：解决回调地狱，代码扁平化，可读性强；支持链式调用；缺点：一旦创建就会立即执行，无法中途取消；不捕获错误会静默失败；无法获取中间进度。4.async/await原理及使用注意事项参考答案：async/await是Promise的语法糖，本质还是基于Promise+事件循环。1）async修饰函数，返回值一定是Promise对象；2）await只能在async函数内部使用，会阻塞当前代码，等待Promise执行完成；3）成功直接获取结果，失败会抛出异常，需要用try/catch捕获。注意点：多个无依赖的await会串行执行，效率低，可用Promise.all并行优化。5.什么是回调地狱？怎么解决？参考答案：多层异步回调嵌套，代码层层缩进、层级过深，可读性极差、维护困难、无法统一处理错误，就是回调地狱。解决方案（递进）：1）Promise链式调用，扁平化代码；2）async/await同步化写法（最优方案，企业主流用法）；3）拆分公共异步方法，抽离复用。三、H5新增特性面试题（前端必考）1.说说你常用的H5新特性参考答案：我日常开发常用的H5特性，分模块总结，都是实战落地的：1）语义化标签：header、nav、main、section、article、footer，替代传统div，结构清晰，利于SEO和无障碍访问；2）本地存储：localStorage（永久存储，手动清除）、sessionStorage（会话存储，关闭页面失效），区别于cookie，存储容量更大（5M左右），不随请求携带；3）表单增强：新输入类型email、tel、number、date，属性required、placeholder、autofocus，简化表单校验；4）媒体标签：audio、video，无需插件直接播放音视频；5）画布与图形：Canvas（位图绘图，适合游戏、海报）、SVG（矢量图，适合图标、图形）；6）网络&设备接口：WebSocket（长连接，实时通讯）、Geolocation（地理位置）、FileReader（文件预览上传）。2.localStorage、sessionStorage、Cookie的区别参考答案：1）存储大小：Cookie仅4KB左右，Storage5M左右；2）有效期：Cookie可手动设置过期时间，默认会话失效；localStorage永久存储；sessionStorage页面会话结束失效；3）请求携带：Cookie每次HTTP请求都会自动携带，Storage不会；4）作用域：sessionStorage严格隔离标签页，localStorage、Cookie同域名共享；5）操作方式：Cookie操作繁琐，原生无简洁API；Storage有getItem、setItem简洁方法。实战场景：登录令牌、用户凭证用Cookie；本地缓存列表、配置、缓存数据用localStorage；临时页面状态用sessionStorage。3.H5语义化标签的意义参考答案：1）代码结构清晰，可读性强，多人协作更容易看懂页面结构；2）利于SEO搜索引擎抓取，爬虫能精准识别页面头部、导航、主体、底部内容；3）支持无障碍访问，屏幕阅读器可识别标签语义，适配残障用户；4）替代大量无意义div，精简代码，降低冗余。4.WebSocket和HTTP的区别参考答案：1）HTTP是短连接、单向通信，只能客户端主动请求，服务端响应，请求结束连接断开；2）WebSocket是长连接、双向实时通信，握手成功后连接持续存在，客户端和服务端可随时互相推送数据；3）HTTP基于请求-响应模式，有大量请求头冗余；WebSocket数据传输轻量，开销小；使用场景：聊天系统、实时弹幕、在线投票、实时数据监控用WebSocket；普通页面接口请求、数据查询用HTTP。5.FileReader的作用和常用场景参考答案：FileReader是H5提供的文件读取API，用于在浏览器端读取本地文件内容，无需上传服务器即可预览。常用场景：1）图片本地上传预览，上传前预览图片效果；2）读取txt、excel等文本文件内容，前端解析展示；3）文件转base64格式，用于图片存储、传输。四、手写代码高频面试题（实战必问）1.手写防抖函数参考答案（实战完整版）：javascript

//防抖：频繁触发事件，只在最后一次停止触发后n秒执行一次

functiondebounce(fn,delay=300){

lettimer=null

returnfunction(...args){

//每次触发清空定时器

if(timer)clearTimeout(timer)

timer=setTimeout(()=>{

fn.apply(this,args)

timer=null

},delay)

}

}

//适用场景：搜索框输入、窗口resize、表单输入校验2.手写节流函数参考答案（实战完整版）：javascript

//节流：频繁触发事件，固定时间内只执行一次

functionthrottle(fn,interval=300){

letlastTime=0

returnfunction(...args){

constnow=Date.now()

if(now-lastTime>=interval){

fn.apply(this,args)

lastTime=now

}

}

}

//适用场景：滚动监听、鼠标移动、按钮频繁点击3.手写Promise简易版参考答案（核心原理版）：javascript

classMyPromise{

constructor(executor){

this.status='pending'

this.value=null

this.reason=null

this.onFulfilledCallbacks=[]

this.onRejectedCallbacks=[]

constresolve=(value)=>{

if(this.status==='pending'){

this.status='fulfilled'

this.value=value

this.onFulfilledCallbacks.forEach(fn=>fn())

}

}

constreject=(reason)=>{

if(this.status==='pending'){

this.status='rejected'

this.reason=reason

this.onRejectedCallbacks.forEach(fn=>fn())

}

}

try{

executor(resolve,reject)

}catch(err){

reject(err)

}

}

then(onFulfilled,onRejected){

onFulfilled=typeofonFulfilled==='function'?onFulfilled:val=>val

onRejected=typeofonRejected==='function'?onRejected:err=>{throwerr}

if(this.status==='fulfilled'){

onFulfilled(this.value)

}

if(this.status==='rejected'){

onRejected(this.reason)

}

if(this.status==='pending'){

this.onFulfilledCallbacks.push(()=>onFulfilled(this.value))

this.onRejectedCallbacks.push(()=>onRejected(this.reason))

}

}

}4.数组去重（多种实战方法）参考答案：javascript

//方法1：ES6Set最简写法（日常开发首选）

functionuniqueArr(arr){

return[...newSet(arr)]

}

//方法2：filter+indexOf（兼容低版本）

functionuniqueArr2(arr){

returnarr.filter((item