面试题

怎么判断一个变量是null

先看一下 typeof 所能检测的值

 console.log('""',typeof '') // string
 console.log('new String()',typeof new String()) //object
 console.log('1',typeof 1) //number
 console.log('true',typeof true) //boolean
 console.log('[]',typeof []) //object
 console.log('{}',typeof {}) //object
 console.log('function a(){}',typeof function(){}) //function
 console.log('class a{}',typeof class a{}) //function
 console.log('null',typeof null) //object
 console.log('undefined',typeof undefined) //undefined
 console.log('NaN',typeof NaN) number
 

再看一下转化为布尔类型后为false的情况

Boolean('') //false
Boolean(0) //false
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false

最简单的方式就是使用===

null === null //true
null === undefined //false

第二种方法就是判断变量转化为布尔值为false，并且不是空字符串，不是数字0，不是undefined，不是NaN

    function isNull(value){
        if(!value && typeof(value)!=='undefined' && value!=0 && value===value){//只有NaN和自己不相等
            return true;
        }else{
            return false;
        }
    }

原型链方法

重写array的tostring方法

Array.prototype.toString=function(){
    var str='';
    this.forEach((item,index)=>{
        if(index==0){
            str = item+''
        }else{
            str = str+','+item
        }
    })
    return str
}

一个知道宽高的div让他水平垂直居中

<div class="con">
    <div class="item"></div>
</div>

*{
    padding: 0;
    margin: 0;
}
.con{
    width: 200px;
    height: 200px;
    background-color: red;
}
.item{
    height: 100px;
    width: 100px;
    background-color: blueviolet;
}

1.使用flex布局

.con{
    display: flex;
    justify-content:center;
    align-items: center;
} 

2.使用定位配合transform

.con{
    position: relative;
}
.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

3.使用定位配合margin

 .con{
    position: relative;
}
.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

4.使用定位并且四个方向都设置为0

.con{
    position: relative;
}
.item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

5.使用table-call

 .con{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.item{
    display: inline-block;
}