大搜车知乎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