大搜車知乎live中的面試題結題方法記錄

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