2022年常见面试题 (简化)

事件循环—宏任务和微任务

 白话理解： js执行的过程是单线程的，所以存在的问题就是在解析执行代码的时候如果遇到需要等待执行的代码后面的代码就需要等它执行完再执行，所以在js中出现 执行栈 任务队列  游览器环境 事件循环的概念

在这之前需要认识 宏任务和微任务

都属于异步任务  

宏任务是JavaScript中最原始的异步任务，包括setTimeout、setInterVal、AJAX 等

微任务包括promise.then catch finally 等

代码执行都是在执行栈中执行 当遇到异步任务时 会把他添加到环境宿主中（web apis）通过环境宿主来控制他们加入任务队列的顺序 宏任务和微任务分别添加到不同的任务队列等待执行，当执行栈中任务执行完毕 就来到任务队列查看是否有需要执行的代码 有的话就添加回执行栈执行 而查看和添加的过程即可称为事件循环(eventLoop) 

watch和计算属性

watch为vue中的监听属性 监听data或计算属性中的内容 监听属性有简化和完整的写法

简化写法就是 属性名(){} 形参有两个 一个是修改后的值 一个是之前未修改的值

执行时机是在所依赖的数据发生变化的时候调用 监听属性可以为异步任务 

完整写法 属性名{} 一个对象对象有 immediate:true 代表立即监听 一上来就调用

deep:true 代表深度监听 可能所监听的是有深层次的对象 这时在vue中不能识别就需要加该属性

handler(){} 函数 写处理逻辑代码

计算属性 是在依赖原有的属性计算出新的属性 计算属性是调用时机是页面一挂载就调用以及所依赖的数据发生变化的时候调用执行 、

js数据类型和数据类型检测

简单数据类型 ：string boolean number null undefined symbol

引用数据类型：object array function 等

typeof 可用来检查 string boolean number ubdefined symbol  function 返回的就是数据类型 直观 

但是对于null typeof 的结果是object 这样导致无法区分他是不是null 所以可以用全等的方式 变量 === null 返回布尔值就可以判断

instanceof 可以用来判断 object array 判断方式是A instanceof B A对象通过原型链查找是否是B的原型对象 如果是的返回 布尔值

array 也同上 返回的是布尔值 

数组还有其他方法 

array.isArray() 返回布尔值

Array.prototype.toString.call(arr)  返回的是[object Array]

 生命周期，父子组件生命周期

生命周期有8个钩子

父子组件生命周期 执行顺序

创建和挂载阶段 父组件在执行mounted之前到子组件把子组件创建挂载完成 执行完后执行父组件的mouned

更新阶段 父组件在执行完updated之前到子组件执行完更新过程后返回执行父组件的updated

销毁阶段 父组件在执行完destoryed之前到子组件执行完销毁过程后返回执行父组件destoryed

new的过程

先创建一个构造函数 再通过new 一个构造函数的实例对象 而再构造函数里面的this就直线new出来的实例对象 而再构造函数里通过this给new出来的实例对象添加方法和属性

原型链

首先构造函数通过new 可以实例出一个对象 而这个对象身上就有--proto--属性 而通过--proto--就可以找到object的原型对象 而它的--proto--指向null 也意味着原型链已经到头 为终点  我们经常通过原型链来获取自身没有的方法 假设自己的原型对象身上没有改方法 就会通过原型链查找到上一级的原型对象

如何实现三角形

首先设置一个盒子div 给div的宽度和高度设置为0 之后在给盒子的四个边框设为 2px solid transparent 最后指定一个边框设置 2px solid 颜色 

高度为0.5像素

像素的最小单位为1px 所以想要实现0.5 像素 可以给一个盒子高度设为1像素 同时结合css中的transform:scale(0.5) 缩放自身的0.5倍即可实现

盒子阴影 box-shadow

渐变色 liner-gradient  一半有颜色一半没有

重绘与回流

重绘(repaint） 当页面元素结构没有方式变化只是元素的样式 如颜色 字体颜色 发生变化时 就会导致重绘

回流(reflow) 当元素的结构发生变化时会导致自身及父级甚至影响整个页面导致页面重构 产生汇流

回流一定会导致重绘 回流会影响整个页面 至少会发生一次因为在render tree 时就会产生回流

v-model底层原理

数据(data)变化 -> 视图(view)变化同步

视图(view)变化 -> 数据(data)自动同步

v-model 适用与表单类元素 比如 复选框 收集value的值以数组方式接受 

v-model其实是语法糖 他底层实现的原理是

:value='msg' @input='msg = $event' ---父组件

msg 传递给子组件用props接受

:value ='msg' @input=$emit(‘input’，e.target.value)

v-model只能绑定一个属性而且必须是value 

let const  var区别

let const 都有块级作用域 没有变量提升 不允许重复声明

let 声明的变量可以不赋值  可以修改值  不允许重复声明

const 定义常量 声明变量必须赋值 并且不能修改值

var 没有块级作用域 有变量提升 可以重复声明

只要作用域内存在 let、const，它们所声明的变量或常量就自动“绑定”这个区域，不再受到外部作用域的影响
★let、const 存在暂时性死区★ template dead zero 这个区域内外部不能访问

{

var result =2

}

log(result) // 2

{

let result = 2

}

log(result) = result is not defined

let a =3

{

log（a）//报错 临时性死区 

let a =8

}

观察者模式

观察者有两个主体 一个是被观察者（dep） 一个是观察者（watcher） 他们之间是相互联系的 当被观察者的数据发生改变的时候就会通知变化 观察者接受到变化 指向更新的函数 重新解析模板

不好的地方是他们之间的耦合性很高 在vue中用途就是通过观察者模式 加 数据的劫持实现响应式的原理  

举个例子好比房东和租客 房东有什么通知之间在群里发送 租客接受到通知进行相应的调整

组件之间嵌套传值最顶层和最底层怎么传  vue provide ineject(依赖注入)

在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。

vue2

provide

是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。注意：子孙层的provide会掩盖祖父层provide中相同key的属性值

provide: {
      msg: 'hello world!'
    }

inject

一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值，from是在可用的注入内容中搜索用的 key (字符串或 Symbol)，意思就是祖父多层provide提供了很多数据，from属性指定取哪一个key;default指定默认值。

 inject: {
      msg: {
        from: 'msg',
        default: ''
      }
    }

 数组转树形结构

通过递归的方式  普通数组 转为有层级的数组 children  可以通过数据中加id pid

pid为''为父级 子级的pid和父级的id一样则为父级的子级

img标签 alt和title的区别

都是img的属性 alt 代表当图片出错误的时候 会有错误提示图片的信息

title是当鼠标停留在图片上会有文字信息提示

link和@import到底有什么区别？

link是属于html标签 不受兼容性问题影响 link会在页面加载时同时加载 dom可以直接操作link中的样式

@import 属于css ie5以上才能识别  会等到dom加载完毕之后执行 dom不能操作@import

防抖节流

防抖 （debounce）执行事件时，当一段时间内触发该事件会重新开始计时，保证一段时间内时间只会触发一次  常用在搜索框，表单验证 ，按钮提交事件 减少请求次数减少频繁的向服务器发起请求  

语法  利用了定时器 在执行事件时 先判断 timer 如果在规定时间内再次触发则清空定时器 再次计算时间

节流 （throttle）节流是指如果持续触发某个事件，则每隔n秒执行一次。 减少一断时间触发的频率

适用场景

DOM元素的拖拽功能实现
射击游戏类
计算鼠标移动的距离

怎么实现右边固定，左边自适应 (2种以上 bfc,或 flex实现)

第一种 给父盒子设置flex 右边盒子宽度固定 左边盒子设置 flex:1 自适应

第二种 给父盒子清除浮动 右边盒子宽度固定并且右浮动 左边盒子开启bfc（overflow:auto） 实现自适应 

第三种 给父盒子清除浮动 右边盒子宽度固定并且右浮动 左边盒子设置margin-left 实现自适应

你有在请求拦截器里面操作过什么

在进行鉴权的时候；我们每个接口都需要携带token;

直接在config 设置请求头 属性为authorization 值为token 

也可以给后台管理项目中当登录进入首页后常时间不用 可在发起请求时删除token 退出登录

instance.interceptors.request.use((res)=>{})  代码

数组去重方法

第一  利用new Set() [...new Set(arr)]

第二 利用indexOf  利用查找结果如果找不到为返回-1

第三 双重for循环 并结合 spcie() 删除多余的元素

第四  利用includes + for循环 + push  定义一个新数组 对要去重的数组循环 在每次循环 判断 !newArr.includes（arr[i]） 没有重复就把arr[i] push到新数组

router和route的区别

一个项目中只会有一个router路由信息 而router可以对应多个route route就是路径和组件的对应关系 router属性有常用的 push back go forward 所有实例都可以访问到  

而 route 里面有name path fullpath params query 等属性 里面的值是根据不同路由不同显示的

promise的3种状态

promise new出一个实例对象后  promiseState 里有三种状态 pending fullfilled rejected

轮播图的实现过程

大概布局 首先准备一个父盒子 子盒子以ul>li 的 来完成页面的切换 设置样式子绝父相 再给父盒子添加一个overflow;hidden  

逻辑实现 

轮播图自动播放 主要就是对动画的封装 主要是给ul添加style.left 的样式 实现根据传入的距离来移动播放到下一页

而鼠标经过和离开采用web api 中的事件对象 mouseenter mounseleave 实现 停止开始的效果

而小圆点主要是动态生成 利用createElement 和append 来创建 同时记得设置自定义属性 方便后期绑定点击事件能够通过它来实现切换

常见问题 

播放到最后一张后会有空白页面 所以需要给最前面和最后面多复制一张图片 

对轮播图要考虑节流阀  防止一直点击导致图片加载过快 出现一些闪屏问题

实现功能

1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮

2.点击右侧按钮一次,图片往左播放一张.左侧按钮同理

3.图片播放时,下面小圆圈模块跟随一起变化

4.点击小圆圈,可以播放相应图片

5.鼠标不经过轮播图,轮播图也会自动播放图片

6.鼠标经过,轮播图模块自动停止播放

虚拟dom 

虚拟dom 本质是一个js对象 用于描述真实的dom 实现高效更新 其实虚拟dom最大的优势在于可以跨平台跨终端  在不同平台上虚拟dom根据不同平台解析成游览器能够渲染出来的 如 在ios 和 uniapp上呈现不同结构

对于diff算法中 比较规则 是利用广度遍历 同层级比较