一面

1.箭头函数和普通函数的区别

• 箭头函数是匿名函数 不能成为构造函数，不能new
• 箭头函数不绑定this，他会结合上下文去找this
• 箭头函数不绑定arguments，没有原型对象property

2.浅拷贝和深拷贝的区别  b复制a

• 浅拷贝，改变a的时候 b跟着改变
• 深拷贝，改变a的时候b不变

function deepClone(obj){
   var cloneStr=   JSON.stringify(obj)
   var cloneObj2 = JSON.parse(cloneStr);
   return cloneObj2 

}

3.数据类型

数据类型分为

• 基本数据类型    clone的时候，clone的值   存在栈中
• 引用数据类型    clone的时候，clone的是引用地址，指向的统一块地址

4.css的inline元素可以设置margin和padding吗

  可以，但是height不行，解决 display：inline-block

5.左固定，右自适应 5种方法

1.浮动布局

.panel1 {
    width: 300px;
    float: left;
    height: 100%;
    background: aqua; }
.panel2 {
    height: 100%;
    margin: 0 300px 0 300px;
    background: red; }
.panel3 {
    width: 300px;
    float: right;
    height: 100%;
    background: blue; }
左右中

优点 兼容性好  缺点 脱离文档流 不好控制

2.定位布局

 #content{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        #left{
            width: 300px;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
            background-color: red;
        }
        #right{
            width: 300px;
            height: 100%;
            position: absolute;
            top:0;
            right: 0;
            background-color: mistyrose;
        }
        #middle{
            height: 100%;
            margin: 0 300px 0 300px;
            background-color: saddlebrown;
            word-break: break-word;
        }
左右中
优缺点：快速，脱离文档流不好控制

3.flex布局

#content{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
        }
        #left{
            width: 300px;
            height: 100%;
            background-color: red;
        }
        #right{
            width: 300px;
            height: 100%;
            background-color: mistyrose;
        }
        #middle{
            height: 100%;
            flex: 1;
            background-color: saddlebrown;
            word-break: break-word;
        }
左中右
比较完美的

 

4.表格布局

#content{
            width: 100%;
            height: 100%;
            display: table;
        }
        #content div{
            display: table-cell;
        }
        #left{
            width: 300px;
            height: 100%;
            background-color: red;
        }
        #right{
            width: 300px;
            height: 100%;
            background-color: mistyrose;
        }
        #middle{
            height: 100%;
            background-color: saddlebrown;
        }
左中右
表格布局兼容性好 pc中ie8不支持flex    缺点 其中一个高度变高 其他的也会变高

 

5.网格布局

 #content{
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 300px auto 300px;
            grid-template-rows: 100%;
        }
       /* #content div{
            display: table-cell;
        }*/
        #left{
            background-color: red;
        }
        #right{
            background-color: mistyrose;
        }
        #middle{
            background-color: saddlebrown;
        }
左中右

 6.box-sizing有哪些值

1. border-box
2. content-box
3. padding-box

7.如何判断js的数据类型

typeof     instanceof   constructor