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;
}
- 判断一个对象是否属于某个类
//假设 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