2022年前端高频面试题及答案解析.docxVIP

2022年前端高频面试题及答案解析

一、HTML/CSS基础

题目：简述BFC的触发条件及实际开发中的应用场景

答案：BFC（块级格式化上下文）是独立渲染区域，内部元素布局不受外部影响。

触发条件：overflow:hidden/auto、display:flex/grid、position:absolute/fixed、float:left/right。

应用场景：①解决浮动元素父容器高度塌陷（给父元素加overflow:hidden）；②隔离相邻元素margin重叠（给其中一个元素套BFC容器）；③实现复杂布局（如两栏自适应，侧边栏浮动+主内容BFC）。

题目：实现一个宽高比16:9的响应式容器，且内部图片自适应填充不拉伸

答案：

.aspect-container{

position:relative;

width:100%;

padding-top:56.25%;/*9/16=56.25%*/

overflow:hidden;

}

.aspect-containerimg{

position:absolute;

top:0;left:0;

width:100%;height:100%;

object-fit:cover;/*填充容器且保持比例*/

}

原理：利用padding-top百分比基于父元素宽度计算，固定宽高比；object-fit:cover避免图片拉伸。

二、JavaScript核心

题目：手写防抖函数并说明应用场景

答案：

functiondebounce(fn,delay=300){

lettimer=null;

returnfunction(...args){

clearTimeout(timer);//重复触发时重置定时器

timer=setTimeout(()={

fn.apply(this,args);//保留this指向和参数

},delay);

};

}

应用场景：搜索框输入联想（避免输入中频繁请求）、窗口resize事件（避免频繁计算布局）。

注意：需处理this指向（如DOM事件回调中指向元素）和参数传递（如事件对象）。

题目：解释闭包的形成条件及实际开发中的利弊

答案：

形成条件：①函数嵌套；②内层函数引用外层函数的变量；③外层函数返回内层函数。

利：①封装私有变量（如letcounter=(()={letn=0;return()=n++})()）；②延长变量生命周期（如防抖节流中的timer）。

弊：①未及时释放会导致内存泄漏（如DOM事件回调中引用外层变量，需解绑时清除）；②调试困难（变量作用域链复杂）。

题目：分析Promise.resolve().then(()=console.log(1)).then(()=console.log(2))与setTimeout(()=console.log(3),0)的执行顺序

答案：执行顺序1→2→3。

原理：Promise.then属于微任务，setTimeout属于宏任务。浏览器事件循环先清空微任务队列，再执行宏任务队列。

扩展：同层级微任务按注册顺序执行，宏任务按延迟时间排序（延迟相同则按注册顺序）。

三、框架实践（Vue3/React）

题目：Vue3中CompositionAPI相比OptionsAPI的优势及使用场景

答案：

优势：①逻辑聚合（如表单处理相关的变量、验证函数可封装为一个hooks，避免OptionsAPI中分散在data/methods）；②逻辑复用（替代mixin，解决命名冲突和数据来源模糊问题）；③更好的TypeScript支持（函数式写法易推导类型）。

使用场景：复杂组件（如数据可视化面板、多步骤表单）、可复用逻辑封装（如接口请求、权限判断）；小型组件仍可使用OptionsAPI简化代码。

题目：React中useEffect的依赖项为空、不传、传变量的区别，举例说明

答案：

依赖项为空[]：仅在组件挂载时执行一次，相当于class组件的componentDidMount（如初始化请求接口）。

不传依赖项：组件每次渲染后都执行，且会清除上一次的副作用（如监听窗口滚动，需在回调中返回解绑函数）。

传变量[count]：仅当count变化时执行（如根据count更新文档标题document.title=count）。

踩坑点：依赖项必须包含所有用到的外部变量，否则会捕获旧值（如漏