面試小記 - 簡書

一個div為margin-bottom:10px,一個div為margin-top:5px,為什么2個div之間的間距是10px而不是15px签舞？
這種情況瀏覽器會自動進行margin重疊，只顯示較大的margin值。
如何實現(xiàn)三列布局：兩邊寬固定柬焕，中間寬自適應(yīng)荐吵？

<!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%;
            /*負值實現(xiàn)反方向移動，即向左移動填充padding-left*/
            left: -200px;
        }
        .middle{
            background-color: blue;
            /*單獨占滿一行*/
            width: 100%;
            height: 1600px;
        }
        .right{
            background-color: red;
            width: 300px;
            /*負邊距讓左右盒子移到和中間盒子同行*/
            margin-left: -300px;
            /*負值實現(xiàn)反方向移動荆烈，即向右移動填充padding-right*/
            right: -300px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 中間的div必須寫在最前面,優(yōu)先加載 -->
    <div class="middle">中間彈性區(qū)</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實現(xiàn)三欄布局</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;
            /*項目占據(jù)主軸的空間*/
            flex-basis: 200px;
        }
        .right{
            background-color: rgba(255,0,0,0.7);
            /*項目占據(jù)主軸的空間*/
            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>絕對定位實現(xiàn)三欄布局</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必須寫在最前面,優(yōu)先加載 -->
    <div class="middle">中間彈性區(qū)</div>
    <div class="left">左邊欄</div>
    <div class="right">右邊欄</div>
</div>
</body>
</html>

請描述以下cookies、localStorage區(qū)別潭兽？
cookie 是網(wǎng)站為了標(biāo)識用戶信息而存儲在本地（client side）上的數(shù)據(jù)倦始，一般會加密
cookie數(shù)據(jù)始終在同源請求中傳遞，即在瀏覽器和服務(wù)器之間來回傳遞
localstorage 不會把數(shù)據(jù)發(fā)到服務(wù)器山卦，僅在本地保存
存儲大小鞋邑，cookie的大小不能超過4k，數(shù)量可以有50個
localstorage 的大小一般在5M以上账蓉，比cookie大的多
有效時間不同
localstorage 存儲持久數(shù)據(jù)枚碗，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)
cookie 設(shè)置的cookie過期之前一直有效，即使窗口或者瀏覽器關(guān)閉
如何判斷一個變量是否為數(shù)組類型铸本？
var isArray = value instanceof Array;
若value為數(shù)組肮雨，則返回true。instanceof 假定只有一個全局執(zhí)行環(huán)境箱玷，此種方法適用于一個網(wǎng)頁或者一個全局作用域怨规。
Array.isArray(value)
Object.prototype.toString.call(vaule) == “[object Array]”
如何理解變量提升并舉個例子說明陌宿？
在變量的作用域內(nèi)，不管變量在何處聲明波丰，都會被提升到作用域的頂部壳坪，但是變量初始化的順序不變。（注意掰烟，變量提升只將聲明部分提升爽蝴，賦值部分不改變位置）

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

不會報錯，按照變量提升的原則纫骑，在代碼執(zhí)行前蝎亚，js編譯器會將變量提升到該作用域的最頂端聲明，然后再按順序執(zhí)行其他的代碼先馆。

什么是事件委托颖对？
給父元素綁定事件，用來監(jiān)聽子元素的冒泡事件磨隘，并找到是哪個子元素的事件缤底。
事件委托的好處？
事件委托技術(shù)可以避免對每個字元素添加事件監(jiān)聽器番捂，減少操作DOM節(jié)點的次數(shù)个唧，從而減少瀏覽器的重繪和重排，提高代碼的性能设预。
使用事件委托徙歼，只有父元素與DOM存在交互，其他的操作都是在JS虛擬內(nèi)存中完成的鳖枕，這樣就大大提高了性能魄梯。
你如何應(yīng)用過事件委托？
在ul上監(jiān)聽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后面的參數(shù)？
例：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={};      //創(chuàng)建空對象params
    if(search!=""){     //如果search不是空字符串
          search.slice(1).split("&").forEach(   //search去開頭?稀蟋，按&切割為數(shù)組，forEach
            function(val){
                var arr=val.split("=");     //將當(dāng)前元素值按=切割呐赡，保存在arr中
                params[arr[0]]=arr[1];      //向params中添加一個元素,屬性名為arr[0],值為arr[1]
            }
          );
   }
    return params;      //返回params
})();
console.dir(params);

用javascript寫一個數(shù)組去掉重復(fù)元素的程序退客？

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;
}