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