2022前端面试题汇总（附答案）更新中

JS相关

1.JS中的数据类型

（1）数据类型分为基本数据类型和引用数据类型
基本数据类型：number、null、undefined、string、boolen
引用数据类型：对象Object（基本数据对象，数组，函数等）
（2）基本数据类型与引用数据类型的区别？
基本数据类型存储的是值本身，用栈存储；引用数据类型存储的是地址，用堆存储；当把a的值复制给b时，基本数据类型的数据复制的是值本身，改变b的值的时候，a的值不会跟着改变；引用数据类型的数据复制的是a所在的地址，当改变b的值的时候，a的值也会跟着改变
（3）数据类型的判断
typeof：判断值类型；instanceof：判断引用类型
（3）深复制与浅复制的实现？

function cloneDeep(object){
    if(!object&&typeof object !='object')
        return;
    let newObject = Array.isArray(object) ? [] : {};
    for(x in object){
          newObject[x] = typeof object[x] =='object' ? cloneDeep(object[x]) : object[x];
    }
    return newObject;
}

2.let、var以及const的区别

3.null和undefined的区别

null表示空值，undefined表示声明一个变量的时候，没有给赋值
typeof null 为object
typeof undefined 为undefined

4.数组常用方法

push：尾部添加
shift：头部添加
pop：尾部删除
unshift：头部删除
splice：可以实现增、删、改，color.splice(1,2) （删除color中的1、2两项）；color.splice(1,0,'brown','pink') （在color键值为1的元素前插入两个值）；color.splice(1,2,'brown','pink') （在color中替换1、2元素）
concat：会将新数组的成员,添加到原数组的尾部,然后返回一个新数组,原数组是不会改变
slice：创建新数组，原数组不变
forEach与map的区别：forEach没有返回值，会改变原数组；map有返回值，生成新的数组，不改变原数组；

CSS相关

1.水平垂直居中

（1）绝对定位

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)

transform可以进行移动transform和旋转rotate，transform的两个参数分别指在水平方向和垂直方向上的位移。
（2）margin:auto;

position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

特别注意的一点是需要设置此居中元素的width和height，否则margin:auto不会生效。
（3）flex布局

display:flex;
align-items:center;
justify-content:center;

2.清除浮动（高度塌陷问题的解决）

使用场景：子元素浮动后，父容器高度塌陷
（1）子元素后添加标签

<div style="clear:both;"></div>

（2）父元素添加样式overflow:hidden 或者 overflow:auto;
（3）父元素也设置浮动

3.BFC块级上下文

可以把BFC理解为一个封闭的盒子，内部元素不会影响到外部
（1）如何生成BFC？
1) 根元素Html
2) float:left或right
3) overflow:hidden,auto,scoll
4) display:inline-block;
5) position:fixed,absolute
（2）BFC的规则
1）同一个BFC的两个相邻的标签的margin会发生重叠（取margin较大的值）
2）BFC的区域内浮动的标签区域不会重叠
3）计算BFC高度的时候，浮动子元素也参与计算
这就是给父级添加浮动，可以清除浮动的原理，因为计算父级元素的时候，浮动的子元素也参与了计算。
（2）BFC解决的问题
1）外边距重叠
2）清除浮动

4.position

1)position:absolute;绝对定位，相对于最近一级定位不为static的父元素进行定位，通过left、right、top、bottom来定位
2）position:relative;相对定位，相对于自身进行定位，通过left、right、top、bottom来定位
3）position:fixed;固定定位，固定在浏览器视口的固定位置
4）position:static;默认文档流

5.重绘和重排

重绘：不会改变页面布局的重新构建，如更改颜色，dispaly:none，引起重绘
重排：引起页面的重新构建，visible:hidden引起重排