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：相对于标签的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 = false

    function cycle(o) {
        const keys = Object.keys(o)
        for (const key of keys) {
            const temp = o[key]
            if (typeof temp === 'object' && temp !== null) {
                if (arr.indexOf(temp) >= 0) {
                    flag = true
                    return
                }
                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: '/xxx',
    component: xxx,
    beforeEnter: (to, from, next) => {
      
    }
  }
]

组件内路由钩子

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

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