前几天遇到的笔试题

1. 按顺序写出打印结果

(function(){
        console.log("1_script start");

        Promise.resolve().then(function(){
            console.log("2_promise1");
        }).then(function(){
            console.log("3_promise2");
        });

        var avar;
        avar += [2018];
        console.log("4_avar : "+avar);  //"undefined2018"

        var aarray = [1,2,3];
        aarray.length = 0;
        console.log("5_aarray[1] : "+aarray[1]);  //undefined

        console.log("6_typeof foo : "+typeof foo);  //'function'
        console.log("7_typeof bar : "+typeof bar);  //'undefined'
        var foo = 'hello',
        bar = function(){
            return "world";
        };
        function foo(){
            return "hello"
        }

        var funcs = [];
        for (let i = 0; i < 4; i++) {
            funcs.push( () => i);
        }
        console.log("8_funcs[2]() : "+funcs[2]()); //2

        (function(){
            var i = 2018;
            console.log("9_funcs[2]() : "+funcs[2]()); //2
        })();

        setTimeout(function(){
            console.log("10_setTimeout");
        },0);
        console.log("11_script end")

    })();

运行结果：

"1_script start"
"4_avar" : "undefined2018"
"5_aarray[1]" : "undefined"
"6_typeof foo" : "function"
"7_typeof bar" : "undefined"
"8_funcs[2]()" : 2
"9_funcs[2]()" : 2
"11_script end"
"2_promise1"
"3_promise2"
"10_setTimeout"

2. 顶部底部固定高度，中间部分铺满屏幕剩余高度，中间盒子里又左盒子固定宽度，右盒子自适应宽度且距左盒子总是20px

html：

<body>
<div class="top">顶部，高度40px</div>
<div class="mainBox">
    <div class="leftBox">左盒子，固定宽度200px，高度自适应铺满屏幕剩余高度</div>
    <div class="rightBox">右盒子，距离左盒子20px，高度自适应宽度自适应铺满屏幕剩余高度</div>
</div>
<div class="bottom">底部，高度40px</div>
</body>

css：

*{
            margin:0;
            padding:0;
        }
        .top {
            width: 100%;
            height: 40px;
            background: #000;
            color:#fff;
            position:absolute;
            top:0;
            /*以上设置是重点必须的*/
            text-align:center;
            line-height:40px;
        }
        .bottom{
            width:100%;
            height:40px;
            background:#000;
            color:#fff;
            position:absolute;
            bottom:0;
            /*以上设置是重点必须的*/
            text-align:center;
            line-height:40px;
        }
        .mainBox{
            width:100%;
            position:absolute;
            top:40px;
            bottom:40px;
            /*以上设置是重点必须的*/
        }
        .mainBox .leftBox{
            height:100%;
            width:200px;
            float:left;
            margin-bottom:40px;
            overflow: auto;
            /*以上设置是重点必须的*/
            border:6px solid green;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align:center;
            line-height:40px;
        }
        .mainBox .rightBox{
            height:100%;
            margin-left:220px;
            /*以上设置是重点必须的*/
            border:6px solid crimson;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            overflow: auto;
            text-align:center;
            line-height:40px;
        }

1. 判断一个对象是否属于某个类

//假设 var obj = new foo();   
obj instanceof foo
obj.contructor.name == "foo"
obj.__proto__ == foo.prototype

4. new操作符具体干了写什么（真是服了这个题目）

function foo(){};
var obj = new foo();

//1. 创建了一个空对象
var obj = new Object();

//2. 设置原型链
obj.__proto__ = foo.prototype;

//3. 让foo中的this指向obj,执行foo的函数体
var res = foo.call(obj);

//4. 判断foo的返回值类型
if(typeof res == 'object'){
    foo = res;
}else{
    foo = obj;
}

5. display: inline-block什么时候会显示间隙

html：

<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>

css：

<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>

水平方向和垂直方向都有间隙
解决方法：
水平：

 - 为box（父元素）添加 font-size: 0;
 - 子元素标签不换行（不推荐）

垂直：

• 为子元素添加：vertical-align:bottom;
• 在子元素中添加任意文字

6. 结果不会打印”timeout”

var timer = setTimeout(function(){
        console.log("timeout");
    });
    clearTimeout(timer)

7. 运算

var a = 0,b = 2;
    //b++ , 在这一行中b的值是不变的
    //++b，b的值为+1后的值
    a = b+++5*++b，b的值为; 
    console.log(a)  //22

var a = 1, b = "2", c;
    c = a+b;
    console.log(c)  //"12"

//数字转为响应的字母
//大写
String.fromCharCode(64 + parseInt(2))  //B
//小写
String.fromCharCode(96 + parseInt(1));  //a