面试小记 - 简书

一个div为margin-bottom:10px,一个div为margin-top:5px,为什么2个div之间的间距是10px而不是15px？
这种情况浏览器会自动进行margin重叠，只显示较大的margin值。
如何实现三列布局：两边宽固定，中间宽自适应？

<!DOCTYPE html>
<html>
<head>
    <title>圣杯布局</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container{
            /*为左右盒子留出位置*/
            padding: 0 300px 0 200px;
        }
        .left,.middle,.right{
            min-height: 130px;
            float: left;
            position: relative;
        }
        .left{
            background: green;
            width: 200px;
            /*负边距让左右盒子移到和中间盒子同行，-100%表示左移一行的大小*/
            margin-left: -100%;
            /*负值实现反方向移动，即向左移动填充padding-left*/
            left: -200px;
        }
        .middle{
            background-color: blue;
            /*单独占满一行*/
            width: 100%;
            height: 1600px;
        }
        .right{
            background-color: red;
            width: 300px;
            /*负边距让左右盒子移到和中间盒子同行*/
            margin-left: -300px;
            /*负值实现反方向移动，即向右移动填充padding-right*/
            right: -300px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 中间的div必须写在最前面,优先加载 -->
    <div class="middle">中间弹性区</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>双飞翼布局</title>
    <meta charset="utf-8">
    <style type="text/css">
        .left,.middle,.right{
            min-height: 130px;
            float: left;
        }
        .left{
            background-color: red;
            width: 200px;
            margin-left: -100%;
        }
        .middle{
            background-color: gray;
            width: 100%;
        }
        .right{
            background-color: darkblue;
            width: 300px;
            margin-left: -300px;
        }
        .content{
            margin: 0 300px 0 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="middle">
    <div class="content">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>flex实现三栏布局</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container{
            min-height: 130px;
            display: flex;
        }
        .middle{
            background-color: rgba(0,0,255,0.7);
            /*flex-grow 默认为0 放大比例，填充空白，*/
            flex-grow:1;
        }
        .left{
            background-color: rgba(0,255,0,0.7);
            /*order默认为0，越小越靠前*/
            order: -1;
            /*项目占据主轴的空间*/
            flex-basis: 200px;
        }
        .right{
            background-color: rgba(255,0,0,0.7);
            /*项目占据主轴的空间*/
            flex-basis: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>绝对定位实现三栏布局</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container{
            position: relative;
        }
        .middle,.left,.right{
            top: 0;
            height: 130px;
 
        }
        .middle{
            background-color: red;
            height: 500px;
            margin: 0 300px 0 200px;
        }
        .left{
            background-color: blue;
            width: 200px;
            position: absolute;
            left: 0;
        }
        .right{
            background-color: green;
            width: 300px;
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 中间的div必须写在最前面,优先加载 -->
    <div class="middle">中间弹性区</div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
</body>
</html>

请描述以下cookies、localStorage区别？
cookie 是网站为了标识用户信息而存储在本地（client side）上的数据，一般会加密
cookie数据始终在同源请求中传递，即在浏览器和服务器之间来回传递
localstorage 不会把数据发到服务器，仅在本地保存
存储大小，cookie的大小不能超过4k，数量可以有50个
localstorage 的大小一般在5M以上，比cookie大的多
有效时间不同
localstorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
cookie 设置的cookie过期之前一直有效，即使窗口或者浏览器关闭
如何判断一个变量是否为数组类型？
var isArray = value instanceof Array;
若value为数组，则返回true。instanceof 假定只有一个全局执行环境，此种方法适用于一个网页或者一个全局作用域。
Array.isArray(value)
Object.prototype.toString.call(vaule) == “[object Array]”
如何理解变量提升并举个例子说明？
在变量的作用域内，不管变量在何处声明，都会被提升到作用域的顶部，但是变量初始化的顺序不变。（注意，变量提升只将声明部分提升，赋值部分不改变位置）

function test() {
    a=1;
    b=2;
    c=3;
    var a,b,c;
    console.log(a);
    console.log(b);
    console.log(c);
}

不会报错，按照变量提升的原则，在代码执行前，js编译器会将变量提升到该作用域的最顶端声明，然后再按顺序执行其他的代码。

什么是事件委托？
给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。
事件委托的好处？
事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。
使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。
你如何应用过事件委托？
在ul上监听li
写一个基于原型链继承的例子？

function A(){
　　this.name="zhangsan";
}
A.prototype.getName=function(){
 　　return this.name;
}
function B(){
　　this.age=20;
}
B.prototype=new A();
//子类型有时候需要重写超类型中的某个方法，或者需要添加母类型中不存在的某个方法。但不管怎样，给原型添加方法的代码一定要放在替换原型的语句之后。
B.prototype.getAge=function(){
　　return this.age;
}
var x=new B();
console.log(x.getName());
console.log(x.getAge());

如何提取url后面的参数？
例：www.baidu.com?company=sendi&job=front-end&skill=react
返回:{company:'sendi',job:'frontend',skill:'react'}

var params=(function(){
    var search=location.search; //获取location的search属性，保存在search中
    var params={};      //创建空对象params
    if(search!=""){     //如果search不是空字符串
          search.slice(1).split("&").forEach(   //search去开头?，按&切割为数组，forEach
            function(val){
                var arr=val.split("=");     //将当前元素值按=切割，保存在arr中
                params[arr[0]]=arr[1];      //向params中添加一个元素,属性名为arr[0],值为arr[1]
            }
          );
   }
    return params;      //返回params
})();
console.dir(params);

用javascript写一个数组去掉重复元素的程序？

function unique(arr){
 var a = [];
 for(var i = 0, i < arr.length; i++) {
  for(var j = i + 1; j < arr.length; j++)
   if (arr[i] === arr[j]) j = ++i;
   a.push(arr[i]);
 }
 return a;
}