1、HTML&CSS（分別10分）

1. 一個div，寬度是100px，此時設定padding是20px，新增一個什麼css屬性可以讓div的實際寬度仍然保持在100px，而不是140px？

box-sizing:border-box;

2. 清除浮動的方式，提供儘可能多的方案。

1. 找到父元素新增overflow : hidden

2. 額外標籤 clear : both

3. 偽元素

clearfix :after {

content : "" ;

clear : both ;

height : 0;

line-height : 0;

display : block;

visibility :hidden;

}
 

3. 如何讓兩個div分別以40%和60%的比例排在一行內，提供儘可能多的方案。

//虛擬碼
//方法1
father-box{position: relative;}
son-left-box{position: absolute;width: 40%;}
son-right-box{position: absolute;margin-left: 40%;width:60%}

//方法2
father-box{}
son-left-box{float: left;width: 40%;}
son-right-box{float: right;width:60%;}

//方法3
father-box{display:flex}
son-left-box{width: 40%}
son-right-box{width:60%}

//方法4
display : inline-block 注 ： 中間的空白文字元素
//歡迎補充
 

4. 如何用css實現一個div的一秒內向右平滑移動100px的動畫。

1   transition：1s
2  @keyframes myfirst
    {
    from {margin-left: 0;}
    to {margin-left: 100px;}
    }
    .box{
        animation: myfirst 1s;
        -moz-animation: myfirst 5s; /* Firefox */
        -webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
        -o-animation: myfirst 5s;   /* Opera */
        width: 1rem;
        height: 1rem;
        background: red;
    }
 

5. localStorage，sessionStorage，Cookie的區別和用途。

cookie : 體積小 、每次傳送請求時攜帶。可由服務端設定http-only的cookie,客戶端也可以設定自己的cookie,可設定失效時間，瀏覽器關閉後失效。

localStorage ： 體積大，除非手動清除否則不會消失

sessionStorage ： 體積大，瀏覽器關閉後消失

2.正則題

var string = "我的賬戶餘額：2,235,467.20"; console.log(?); // 請用js計算出我到底有多少錢（輸出Number型別數字，程式碼儘量簡潔，考慮通用情況）

parseFloat(string.match(/d+|./g).join(""))

3.作用域

function person() { return this.name; } var someOne = { name: 'Jenny', age: 18 }; // 此處如何輸出 'Jenny'

person.call(someOne)

4.語法題

有一個合法的 JSON 物件（即不包含函式等值的物件），設計一個函式，取出該物件內所有 key 為 "id" 並且其值不為物件、陣列的值，裝入一個數組並返回。 

 function extractIds(data) { 
// implement 
} 
樣例資料： 
var data = { id: 1, items: [ { id: 2 }, { item: 3, id: [ { id: 4 }, { id: 5 } ]} ] }; 
extractIds(data); // should return [ 1, 2, 4, 5 ]

解題

function getId(data){ 
 let stack = [ data ] ,ret = [];
 while(stack.length > 0){
  let cur = stack.pop();
  for(let key in cur){
      if(cur[key] instanceof Object ){
        stack.push(cur[key]);
      }else{
       if(key === "id") ret.push(cur[key]);
      }
  }
return ret ;
}

5.閉包

下面五段程式碼分別輸出什麼？並且什麼時候輸出什麼？

for (var i = 0; i < 5; i++) {
    console.log(i);
  }
  for (var i = 0; i < 5; i++) {
    setTimeout(function () {
      console.log(i);
    }, 1000 * i);
  }
  for (var i = 0; i < 5; i++) {
    (function (i) {
      setTimeout(function () {
        console.log(i);
      }, i * 1000);
    })(i);
  }
  for (var i = 0; i < 5; i++) {
    (function () {
      setTimeout(function () {
        console.log(i);
      }, i * 1000);
    })(i);
  }
  for (var i = 0; i < 5; i++) {
    setTimeout((function (i) {
      console.log(i);
    })(i), i * 1000);
  }
  // _.pluck(list, propertyName)
  _.pluck = function (obj, key) {
    return _.map(obj, _.property(key));
  };

答案
1. 立即輸出0-4

2. 0-4秒間輸出 5

3. 0-4秒間輸出 0-4

4. 0-4秒間輸出 5

5. 立即輸出 0-4

6、建立一個二進位制相加函式，根據傳入的兩個二進位制數字符串返回一個相加的十進位制的結果。 

/* 
* @param {String} a number a 
* @param {String} b number b
* return {Number} the result 
*/
 function calculate(num1, num2){
 // implement here 
} 
結果樣例：
calculate("10", "10") // => 4 
calculate("10", "0") // => 2 
calculate("101", "10") // => 7