刷波面试题

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