美文网首页
2022前端面试题汇总(附答案)更新中

2022前端面试题汇总(附答案)更新中

作者: 我和我的前端 | 来源:发表于2022-06-09 11:29 被阅读0次

    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引起重排

    相关文章

      网友评论

          本文标题:2022前端面试题汇总(附答案)更新中

          本文链接:https://www.haomeiwen.com/subject/rbwmmrtx.html