2019-08-23

百度

1、console.log(["1", "3", "10"].map(parseInt))输出什么 答案：[ 1, NaN, 2 ] 解答：

["1", "3", "10"].map((i, index) => {
    parseInt(i, index)
}) 

parseInt("1",0)  →  按十进制
parseInt("3",1)  →  NaN
parseInt("10",2)  → 二进制  → 2

2、

var length = 10;
function fn(){
     console.log(this.length)
}
var obj = {
     length: 5,
     method: function(fn) {
          fn();//  10
          arguments[0]()//2
    }
}
obj.method(fn,length)

3、css题

<div class="outer"><div class="inner"></div></div>
.outer{
    width: 100px;
    height: 100px;
}
.inner{
    width: 50px;
    height: 50px;
    padding-top: 40%;
}

问padding-top的是多少px？ 解答：40px; 因为子级的padding-top百分比是相对父级宽度width来计算的

4、数组合并

5、cookie、localStorage、sessionStorage区别

【相同点】客户端保存数据，数据类型为字符串 【区别】 1、生命周期： 1）cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。 2）localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。 3）sessionStorage仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。 2、网络流量：cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，所以，webstorage更加节约网络流量。 3、大小限制：cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M 4、安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。 5、使用方便性上：WebStorage提供了一些方法，数据操作比cookie方便； setItem (key, value) —— 保存数据，以键值对的方式储存信息。 getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。removeItem (key) —— 删除单个数据，根据键值移除对应的信息。 clear () —— 删除所有的数据 key (index) —— 获取某个索引的key

6、浏览器渲染方式

1）解析HTML生成DOM树。 2）解析CSS生成CSSOM规则树。 3）将DOM树与CSSOM规则树合并在一起生成渲染树。 4）遍历渲染树开始布局，计算每个节点的位置大小信息。 5）将渲染树每个节点绘制到屏幕。 参考：https://juejin.im/post/5a8e242c5188257a6b060000

7、301、302、304区别

3xx都是重定向

• 301 Moved Permanently：永久重定向
• 302 Found：临时重定向
• 304 Not Modified：意思是访问成功（和200状态码一样），但是网页没有变化，该HTTP状态码对网站SEO优化非常有用。如果搜索引擎蜘蛛遇到304状态码，那么就会认为这个网页没有改动过，不会再分析其内容。 304虽然被划分在3xx类别中，但是和重定向没有关系。

8、实现深拷贝 JSON序列化方法实现：

JSON.parse(JSON.stringify(obj))

递归实现：

function DeepClone(originObj) {
    // 先判断obj是数组还是对象
    let newObj;
    if(originObj instanceof Array ) {
        newObj = []
    } else if (originObj instanceof Object) {
        newObj = {}
    }
    for (let key in originObj) {
        // 判断子元素类型
        if (typeof(originObj[key]) === "object") {
            // 如果子元素为object 递归一下
            newObj[key] = DeepClone(originObj[key])
        } else {
            newObj[key] = originObj[key]
        }
    }
    return newObj
}

9、防抖节流 10、rem