刷波面试题

Q : 一个div，宽度是100px，此时设置padding是20px，添加一个什么css属性可以让div的实际宽度仍然保持在100px，而不是140px？
A : box-sizing : border-box

---

Q : 清除浮动的方式，提供尽可能多的方案。
A :
1. 找到父元素添加overflow : hidden
2. 额外标签 clear : both
3. 伪元素

clearfix :after {
content : "" ;
clear : both ;
height : 0;
line-height : 0;
display : block;
visibility :hidden;
}


---

Q : 如何让两个div分别以40%和60%的比例排在一行内，提供尽可能多的方案。
A : 1. display : inline-block 注 ： 中间的空白文本元素
2. float : left
3. position : absolute
4. 父元素 display : flex

---

Q : 如何用css实现一个div的一秒内向右平滑移动100px的动画 。
A : transition : 1s

---

Q : localStorage，sessionStorage，Cookie的区别和用途。
A : cookie : 体积小 、每次发送请求时携带。可由服务端设置http-only的cookie,客户端也可以设置自己的cookie,可设置失效时间，浏览器关闭后失效。
localStorage ： 体积大，除非手动清除否则不会消失
sessionStorage ： 体积大，浏览器关闭后消失

---

Q :

var string = "我的账户余额：2,235,467.20";
                   console.log(?);

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

---

Q :

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

A : person.call(someOne)

---

Q :
4.语法题 有一个合法的 JSON 对象（即不包含函数等值的对象），设计一个函数，取出该对象内所有 key 为 “id” 并且其值不为对象、数组的值，装入一个数组并返回。

function extractIds(data) {
    // implement
}
样例数据：
var data = {
    id: 1,
    items: [
        { id: 2 },
        { item: 3, id: [
            { id: 4 },
            { id: 5 }
        ]}
    ]
};

A :

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

---

Q : 闭包 下面五段代码分别输出什么？并且什么时候输出什么？

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

A : 1. 立即输出0-4
2. 0-4秒间输出 5
3. 0-4秒间输出 0-4
4. 0-4秒间输出 5
5. 立即输出 0-4