面试

手写一个布局，带header以及左右两栏，左栏宽度固定，高度自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
</body>
</html>

　　第一种：

*{
margin：;padding:0;
}
html, body{
height:100%;
}
#left{
200px;
height:100%;
background-color:pink;
float:left
}
#right{
height:100%;
background-color:black;
margin-left:300px;
}

第一种添加margin-left我为了和第一个模块并列 300px为left的宽度
第二种：

*{
margin：;padding:0;
}
html, body{
height:100%;
}
#left{
200px;
height:100%;
background-color:pink;
float:left
}
#right{
height:100%;
background-color:black;
overflow:hidden;
}

　　第二种方法用的BFC（块级格式化上下文）来防止文字环绕的原理来实现的

BFC 是一个相对独立的布局环境，它的内部元素不受外面布局的影响可通过以下方式来创建
1 float值不为none
2 position 不为static relative
3 display 值为 table-cell table-caption inline-block flex inline-flex中其中一个
4 overflow 值不为visible
小结：首先为固定宽度的元素设置（左浮动或者有浮动——根据那边固定来定）；接下来为自适应元素设置（margin-left或者margin-right值——根据固定元素设置的左浮动或者右浮动来定）或者为其设置overflow:hidden。
this作用域：
var name = "Jay Global";
var person = {
name: 'Jay Person',
details: {
name: 'Jay Details',
print: function() {
return this.name;
}
},
print: function() {
return this.name;
}
};
console.log(person.details.print()); // ?
console.log(person.print()); // ?
var name1 = person.print;
var name2 = person.details;
console.log(name1()); // ?
console.log(name2.print()) // ?
VM95:14 Jay Details
VM95:15 Jay Person
VM95:18 Jay Global
VM95:19 Jay Details

　　
要记住，this 关键词是在函数调用时才做绑定的。name1() 前面是什么？什么都没有。因此 this 关键词就将指向全局的 window对象去。 name1中this指向window
name2里面的this指向Jay Details'，因为 print 是 name2 调起的，而 name2 指向 details。
http://caibaojian.com/deep-in-javascript-this.html
数组常用的api及应用场景
some 其中一个满足条件就返回true
every 所有满足条件返回true
forEach是遍历所有数组得到的是返回值
sort是排序 var px = arrSort.sort(function(a,b){ // 从小到大 return a - b; // 从大到小 // return b - a;
map var cz = arr.map(function(item,index){ return ''+item+'' }) console.log(cz)//["1", "2", "3"]
filter 过滤掉不符合的数组元素比如要>3的数组返回的是＞3的数
slice 是截取数组
index 0f 与；last indexof获取的是位置
https://blog.csdn.net/Aries406532/article/details/78426151
轮播图
https://blog.csdn.net/diligentkong/article/details/55209861
虚拟dom
它是直接用js实现dom树组件html结构并不会直接生成dom 而是生成虚拟jsdom结构 react通过这些虚拟的dom实现diff算法找出最小变量再把这些变量写进实际的dom中，这个虚拟的dom以js结构形式存在计算性能比较好，而且减少了实际dom的请求次数性能较大提升。
https://blog.csdn.net/jian_xi/article/details/72841891