摘要：前端面試題總結(jié)，持續(xù)更新和區(qū)別瀏覽器的緩存機(jī)制提供了可以將用戶數(shù)據(jù)存儲在客戶端上的方式，可以利用等跟服務(wù)端進(jìn)行數(shù)據(jù)交互。

cookies sessionStorage和localstorage區(qū)別

瀏覽器的緩存機(jī)制提供了可以將用戶數(shù)據(jù)存儲在客戶端上的方式，可以利用cookie,session等跟服務(wù)端進(jìn)行數(shù)據(jù)交互。
相同點(diǎn)：都是存儲在客戶端
不同點(diǎn)：

WebStorage的優(yōu)點(diǎn)：
（1）存儲空間更大：cookie為4KB，而WebStorage是5MB；
（2）節(jié)省網(wǎng)絡(luò)流量：WebStorage不會傳送到服務(wù)器，存儲在本地的數(shù)據(jù)可以直接獲取，也不會像cookie一樣美詞請求都會傳送到服務(wù)器，所以減少了客戶端和服務(wù)器端的交互，節(jié)省了網(wǎng)絡(luò)流量；
（3）對于那種只需要在用戶瀏覽一組頁面期間保存而關(guān)閉瀏覽器后就可以丟棄的數(shù)據(jù)，sessionStorage會非常方便；
（4）快速顯示：有的數(shù)據(jù)存儲在WebStorage上，再加上瀏覽器本身的緩存。獲取數(shù)據(jù)時可以從本地獲取會比從服務(wù)器端獲取快得多，所以速度更快；
（5）安全性：WebStorage不會隨著HTTP header發(fā)送到服務(wù)器端，所以安全性相對于cookie來說比較高一些，不會擔(dān)心截獲，但是仍然存在偽造問題；
（6）WebStorage提供了一些方法，數(shù)據(jù)操作比cookie方便；

setItem (key, value) ——  保存數(shù)據(jù)，以鍵值對的方式儲存信息。
getItem (key) ——  獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對應(yīng)的value值。
removeItem (key) ——  刪除單個數(shù)據(jù)，根據(jù)鍵值移除對應(yīng)的信息。
clear () ——  刪除所有的數(shù)據(jù)
key (index) —— 獲取某個索引的key

數(shù)組去重

    // 新建一新數(shù)組，遍歷傳入數(shù)組，值不在新數(shù)組就push進(jìn)該新數(shù)組中
    function uniq(arr) {
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (newArr.indexOf(arr[i]) == -1) {
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    var aa = [1, 2, 2, 4, 9, 6, 7, 5, 2, 3, 5, 6, 5];
    console.log(uniq(aa));  // [1, 2, 4, 9, 6, 7, 5, 3];
    

3.ajax步驟

ajax(異步j(luò)avascript xml) 能夠刷新局部網(wǎng)頁數(shù)據(jù)而不是重新加載整個網(wǎng)頁。
```
//步驟一:創(chuàng)建異步對象
var ajax = new XMLHttpRequest();
//步驟二:設(shè)置請求的url參數(shù),參數(shù)一是請求的類型,參數(shù)二是請求的url,可以帶參數(shù),動態(tài)的傳遞參數(shù)starName到服務(wù)端
ajax.open("get", "getStar.php?starName=" + name);
//步驟三:發(fā)送請求
ajax.send();
//步驟四:注冊事件 onreadystatechange 狀態(tài)改變就會調(diào)用
ajax.onreadystatechange = function () {
    if (ajax.readyState == 4 && ajax.status == 200) {
        //步驟五 如果能夠進(jìn)到這個判斷 說明 數(shù)據(jù) 完美的回來了,并且請求的頁面是存在的
        console.log(ajax.responseText);//輸入相應(yīng)的內(nèi)容
    }
}
```

4.簡單說說xml與json的區(qū)別：

JSON相對于XML來講，數(shù)據(jù)的體積小，傳遞的速度更快些。
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互。
XML對數(shù)據(jù)描述性比較好。
JSON的速度要遠(yuǎn)遠(yuǎn)快于XML

5.js數(shù)據(jù)類型：

五種基本類型---Undefined、Null、Boolean、Number和String。Object、Array和Function則屬于引用類型。

6.http 和 https 有何區(qū)別？
http是HTTP協(xié)議運(yùn)行在TCP之上。所有傳輸?shù)膬?nèi)容都是明文，客戶端和服務(wù)器端都無法驗(yàn)證對方的身份。
https是HTTP運(yùn)行在SSL/TLS之上，SSL/TLS運(yùn)行在TCP之上。所有傳輸?shù)膬?nèi)容都經(jīng)過加密，加密采用對稱加密，但對稱加密的密鑰用服務(wù)器方的證書進(jìn)行了非對稱加密。此外客戶端可以驗(yàn)證服務(wù)器端的身份，如果配置了客戶端驗(yàn)證，服務(wù)器方也可以驗(yàn)證客戶端的身份

7.bootstrap實(shí)現(xiàn)響應(yīng)式布局原理：百分比布局+媒體查詢

8.請解釋JSONP的工作原理：JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標(biāo)簽可以加載并執(zhí)行其他域的javascript，于是我們可以通過script標(biāo)記來動態(tài)加載其他域的資源。例如我要從域A的頁面pageA加載域B的數(shù)據(jù)，那么在域B的頁面pageB中我以JavaScript的形式聲明pageA需要的數(shù)據(jù)，然后在 pageA中用script標(biāo)簽把pageB加載進(jìn)來，那么pageB中的腳本就會得以執(zhí)行。JSONP在此基礎(chǔ)上加入了回調(diào)函數(shù)，pageB加載完之后會執(zhí)行pageA中定義的函數(shù)，所需要的數(shù)據(jù)會以參數(shù)的形式傳遞給該函數(shù)。JSONP易于實(shí)現(xiàn)，但是也會存在一些安全隱患，如果第三方的腳本隨意地執(zhí)行，那么它就可以篡改頁面內(nèi)容，截獲敏感數(shù)據(jù)。但是在受信任的雙方傳遞數(shù)據(jù)，JSONP是非常合適的選擇。

9.談?wù)勀銓﹂]包的理解：使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量污染，缺點(diǎn)是閉包會常駐內(nèi)存，會增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。閉包有三個特性，第一 函數(shù)嵌套函數(shù)，第二 函數(shù)內(nèi)部可以使用外部的參數(shù)和變量，第三 參數(shù)和變量不會被垃圾回收機(jī)制回收

10.get請求與post請求區(qū)別：

get:
get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)；
get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB；
get安全性非常低，post安全性較高。但是執(zhí)行效率卻比Post方法好；
get是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個字段一一對應(yīng)，在URL中可以看到；
在做數(shù)據(jù)查詢時，建議用Get方式；

post:
    post是通過HTTP post機(jī)制，將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址，用戶看不到這個過程；
    所以：包含機(jī)密信息的話，建議用Post數(shù)據(jù)提交方式；而在做數(shù)據(jù)添加、修改或刪除時，建議用Post方式。
    

第二更
11.什么情況下會碰到跨域問題，有哪些解決方法？

跨域問題是瀏覽器為了實(shí)施的同源策略導(dǎo)致的，同源策略限制了來自不同源的document,腳本。同源意思就是兩個url的域名、協(xié)議、端口要完全相同。解決方法：script標(biāo)簽jsonp跨域、nginx反向代理、node.js中間件代理跨域、后端在頭部信息設(shè)置安全域名、后端在服務(wù)器上設(shè)置cors。

// jsonp原理:動態(tài)引入script標(biāo)簽，通過script標(biāo)簽引入一個js，這個js文件載入后會執(zhí)行我們在url參數(shù)中指定的參數(shù)，并且把我們需要的json數(shù)據(jù)作為參數(shù)傳入
 functioncreateJs(sUrl){
    var oScript =document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src= sUrl;
    document.getElementsByTagName("head")[0].appendChild(oScript);
}

12.如何對一個數(shù)組去重？

// 方法一：es6中Set+Array.from方法,目前主流的瀏覽器，Chrome,Firfox,Opera，Safari，包括微軟的Edge,都是支持的，唯獨(dú)IE系列不支持
var arr = ["1", "2", "3", 1, NaN, NaN, undefined, undefined, null, null, "a", "b", "b"];
console.log(new Set(arr));  // Set(9)?{"1", "2", "3", 1, NaN, undefined, null, "a", "b"]
// 這里看到返回的是一個對象，通過Array.from方法轉(zhuǎn)為數(shù)組
var newArr = Array.from(new Set(arr));
console.log(newArr)  // [1, 3, 9, null, "1"]

// 方法二:遍歷，將值添加到新數(shù)組，用indexOf()判斷值是否存在，已存在就不添加，達(dá)到去重效果。
//ps:這個方法不能分辨NaN,會出現(xiàn)兩個NaN。
var arr = ["1", "2", "3", 1, NaN, NaN, undefined, undefined, null, null, "a", "b", "b"];
var unique = arr => {
    let newA = [];
    arr.forEach(item=> {
        if(newA.indexOf(item)==-1) {
            newA.push(item)
        }
    })
    return newA;
}
console.log(unique(arr))  // ["1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"]

// 方法三：將數(shù)組的值添加只一個對象的屬性名里，并且給屬性賦值，對象不能添加相同的屬性名，以這個為依據(jù)可以實(shí)現(xiàn)去重，然后用objec.keys(obj)，返回改對象可枚舉屬性組成的數(shù)組，即去重后的數(shù)組。
var arr = ["1", "2", "3", 1, NaN, NaN, undefined, undefined, null, null, "a", "b", "b"];
var unique = arr => {
    var obj = {};
    arr.forEach(item => {
        obj[item] = 0;
    })
    return Object.keys(obj);
}
console.log(unique(arr))  // ["1", "2", "3", "NaN", "undefined", "null", "a", "b"]

13.翻轉(zhuǎn)一個字符串：

let a = "99151512";
console.log([...a]) // ["9", "9", "1", "5", "1", "5", "1", "2"]  字符串的解構(gòu)賦值
let b = [...a].reverse().join("")
console.log(b) // 21515199

第三更（vue篇）