2022前端面试题附答案.

1、HTML5的新特性？

1、语义化标签，比如header、footer、nav、aside、article、section
2、音视频，比如audio、video
3、画布canvas、矢量图svg
3、画布，canvas的api有getContext、fillStyle、fillRect等
4、本地存储localStorage、sessionStorage
5、web worker

2、语义化的好处？

1、代码分块清晰，便于维护
2、页面结构清晰，便于浏览器。搜索引擎解析
3、利于搜索引擎的爬取，利于SEO

3、canvas的常用api有哪些？

getContext：返回一个指定canvas的绘画环境对象
beginPath：开始绘制
moveTo：移动画笔位置
lineTo：用来画线段
stroke：用来实施绘制的操作
lineStyle：设置线段的样式
closePath：结束绘制

4、web worker有什么作用？应用场景有哪些？

开启一个子线程，且子线程的操作不受线程的影响

大数据处理
耗费时间较长的操作

5、浏览器本地缓存localStorage与sessionStorage的区别？

生命周期不同：前者一直存在浏览器，除非用户手动清除，后者生命周期结束于浏览器或者tab页的关闭

CSS3

1、有哪些新特性呢？

flex、animation、transform、border-radius、box-shadow、opacity

2、背景毛玻璃的效果如何实现呢？

filter：blur()

3、position有哪几种呢？

static：默认
relative：相对于自身
absolute：相对于最近的一个非static的祖先级元素进行定位
fixed：相对于屏幕窗口进行定位
sticky：用来实现吸顶效果

4、如何自己实现跟position：sticky的效果？

使用getBoundingClientRect或者IntersectionObserver计算指定元素位置，到达一定距离更改指定元素定位为fixed，从而实现sticky的效果

5、重绘回流是什么呢？

文章链接

6、怎么降低重绘回流的次数呢？

文章链接

7、flex布局如何更改主轴方向？

设置flex-direction样式属性

8、flex布局如何允许换行呢？

设置flex-wrap样式属性

9、flex布局实现水平垂直据居中？

设置justify-content和align-items都为center

10、flex：1的原理是什么呢？

flex-grow 、flex-shrink 、flex-basis这三个样式的合集，全写状态为flex:0 1 auto，简写为flex: 1

11、rem与em的区别是什么呢？

rem：相对于<html>标签的font-size去决定大小，例如html标签font-size为14px，则2rem === 28px
em：相对于自身的font-size去决定大小，自身没有font-size则继承祖先级元素的font-size

JavaScript

1、原型链是什么呢？有什么作用吗

原型链：原型链是一条对象隐式原型不断往上指向的一条指向链，尽头是Object的隐式原型，也就是null
作用：构造函数原型上的东西可以让实例们共享，从而节省了空间

2、闭包是什么？有什么优缺点

闭包是一个能让函数外部访问到函数内部的一个函数

优点是：延长函数内部变量的寿命，使函数外部能访问到函数内部
缺点是：滥用闭包导致内存溢出，页面卡顿

3、JavaScript总共有几种数据类型？

字符串、布尔值、数值、undefined、null、object、symbol、bigInt

4、JavaScript判断类型的方式是什么？

typeof：只能判断字符串、布尔值、数值、undefined、function、object、symbol、bigInt，不能区分判断数组、null、对象
A instanceof B：判断A是否为B的实例对象，从而判断A是否为B类型
Object.prototype.toString.call()：可以判断所有的数据类型

6、JavaScript不同类型的存储方式有何区别？

普遍认为

基础数据类型存于栈内存
引用数据类型存于堆内存我认为
所有数据都存于堆内存，栈内存只存指针

7、你说字符串存储在栈内存，那如果字符串很长。超过了栈内存最大容量呢？

所以说我觉得所有数据都存于堆内存，毕竟栈内存容量有限。

8、call、apply、bind的区别？

call于apply的区别在于传参，前者直接传参，后者传一个数组
bind传参后不立即执行，而是会返回一个函数，这个函数可以继续传参，且执行（bind函数可以分两次传参）

9、bind返回的函数能作为构造函数吗？

不能哦，会报错的

10、赋值、深拷贝与浅拷贝有什么不同？

赋值：赋值指针指向，还是用的同一个内存空间
浅拷贝：只拷贝第一层
深拷贝：所有层都会进行拷贝

11、怎么判断一个对象有环引用呢？

定义一个空数组，且对于目标对象进行递归，每次都判断递归项是否为对象，是的话放进数组，且每次判断属性值是否在数组里，在的话说明环引用了

function cycleDetector(obj) {const arr = [obj]let flag = falsefunction cycle(o) {const keys = Object.keys(o)for (const key of keys) {const temp = o[key]if (typeof temp === &apos;object&apos; && temp !== null) {if (arr.indexOf(temp) &gt;= 0) {flag = truereturn}arr.push(temp)cycle(temp)}}}cycle(obj)return flag
}

ES6

1、let、const的暂时性死区问题？

在一个作用域里如果存在let、const定义的一个变量之前使用该变量，则报错“cannot access xx before initialization”

2、Promise的then为什么可以链式调用？

Promise的then方法返回一个新的Promise对象，保证了then方法可以进行链式调用

3、async/await的用法？

async/await的作用是：以同步的方式执行异步操作，实现排队效果
async：async函数执行返回一个Promise
await：await后接Promise则会等待Promise返回结果，接普通函数执行则会接收返回结果
await只能在async中使用，但是浏览器调试中await可单独使用

4、Class的静态属性、继承？

静态属性：static关键字定义的变量属性，只能通过Class构造函数的属性的方式去访问
继承：使用 Child extends Father {}，且配合super对象，完成继承

Vue

1、Vue与React的区别在哪？

比较的是Vue2 相同点：

1.都使用了虚拟dom
2.组件化开发
3.都是单向数据流(父子组件之间，不建议子修改父传下来的数据)
4.都支持服务端渲染不同点：
1.React的JSX，Vue的template
2.数据变化，React手动(setState)，Vue自动(初始化已响应式处理，Object.defineProperty，Proxy)
3.React单向绑定，Vue双向绑定
4.React的Redux、mobx，Vue的Vuex、pinia

2、computed与watch的区别？

computed：多对一，多个值的变化决定一个目标值的变化
watch：一对多，一个值的变化，引起多个目标值的变化

3、Vue的生命周期介绍一下？

4、Vue的实例加载完成在哪个生命周期呢？

beforeCreated

5、Vue的真实dom挂载完成在哪个生命周期呢？

mounted

6、数据更改如何获取最新DOM

nextTick

7、路由有几种模式，有何区别？

hash模式：监听url中hash的变化来实现不同页面的展示，链接带#
history模式：url中不带#，利用HTML5的history.pushState方法进行不刷新跳转页面，但需要后端配合404时的重定向
abstract：使用在非浏览器的环境，例如node环境

8、路由有哪些钩子函数？

全局钩子

beforeEach：跳转路由前
- to：将要跳转进入的路由对象
- from：将要离开的路由对象
- next：一个方法，执行则完成跳转
afterEach：跳转路由后
- to：将要跳转进入的路由对象

路由独享钩子

routes: [{path: &apos;/xxx&apos;,component: xxx,beforeEnter: (to, from, next) =&gt; {}}
]

组件内路由钩子

beforeRouteEnter(to, from, next)：跳转路由渲染组件时触发
beforeRouteUpdate(to, from, next)：跳转路由且组件被复用时触发
beforeRouteLeave(to, from, next)：跳转路由且离开组件时出触发

如果对你有帮助请给小编一个点赞加评论