前端面試題

前端面試題總結，持續更新

1. cookies sessionStorage和localstorage區別

   瀏覽器的緩存機制提供了能夠將用戶數據存儲在客戶端上的方式，能夠利用cookie,session等跟服務端進行數據交互。
   相同點：都是存儲在客戶端
   不一樣點：
   
   WebStorage的優勢：
   （1）存儲空間更大：cookie爲4KB，而WebStorage是5MB；
   （2）節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據能夠直接獲取，也不會像cookie同樣美詞請求都會傳送到服務器，因此減小了客戶端和服務器端的交互，節省了網絡流量；
   （3）對於那種只須要在用戶瀏覽一組頁面期間保存而關閉瀏覽器後就能夠丟棄的數據，sessionStorage會很是方便；
   （4）快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器自己的緩存。獲取數據時能夠從本地獲取會比從服務器端獲取快得多，因此速度更快；
   （5）安全性：WebStorage不會隨着HTTP header發送到服務器端，因此安全性相對於cookie來講比較高一些，不會擔憂截獲，可是仍然存在僞造問題；
   （6）WebStorage提供了一些方法，數據操做比cookie方便；

   setItem (key, value) ——  保存數據，以鍵值對的方式儲存信息。
   getItem (key) ——  獲取數據，將鍵值傳入，便可獲取到對應的value值。
   removeItem (key) ——  刪除單個數據，根據鍵值移除對應的信息。
   clear () ——  刪除全部的數據
   key (index) —— 獲取某個索引的key

2. 數組去重

// 新建一新數組，遍歷傳入數組，值不在新數組就push進該新數組中
    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(異步javascript xml) 可以刷新局部網頁數據而不是從新加載整個網頁。
```
//步驟一:建立異步對象
var ajax = new XMLHttpRequest();
//步驟二:設置請求的url參數,參數一是請求的類型,參數二是請求的url,能夠帶參數,動態的傳遞參數starName到服務端
ajax.open('get', 'getStar.php?starName=' + name);
//步驟三:發送請求
ajax.send();
//步驟四:註冊事件 onreadystatechange 狀態改變就會調用
ajax.onreadystatechange = function () {
    if (ajax.readyState == 4 && ajax.status == 200) {
        //步驟五 若是可以進到這個判斷 說明 數據 完美的回來了,而且請求的頁面是存在的
        console.log(ajax.responseText);//輸入相應的內容
    }
}
```

4.簡單說說xml與json的區別：

JSON相對於XML來說，數據的體積小，傳遞的速度更快些。
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。
XML對數據描述性比較好。
JSON的速度要遠遠快於XML

5.js數據類型：

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

6.http 和 https 有何區別？
http是HTTP協議運行在TCP之上。全部傳輸的內容都是明文，客戶端和服務器端都沒法驗證對方的身份。
https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。全部傳輸的內容都通過加密，加密採用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密。此外客戶端能夠驗證服務器端的身份，若是配置了客戶端驗證，服務器方也能夠驗證客戶端的身份

7.bootstrap實現響應式佈局原理：百分比佈局+媒體查詢

8.請解釋JSONP的工做原理：JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標籤能夠加載並執行其餘域的javascript，因而咱們能夠經過script標記來動態加載其餘域的資源。例如我要從域A的頁面pageA加載域B的數據，那麼在域B的頁面pageB中我以JavaScript的形式聲明pageA須要的數據，而後在 pageA中用script標籤把pageB加載進來，那麼pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數，pageB加載完以後會執行pageA中定義的函數，所須要的數據會以參數的形式傳遞給該函數。JSONP易於實現，可是也會存在一些安全隱患，若是第三方的腳本隨意地執行，那麼它就能夠篡改頁面內容，截獲敏感數據。可是在受信任的雙方傳遞數據，JSONP是很是合適的選擇。

9.談談你對閉包的理解：使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。閉包有三個特性，第一 函數嵌套函數，第二 函數內部可使用外部的參數和變量，第三 參數和變量不會被垃圾回收機制回收

10.get請求與post請求區別：

get:
get是從服務器上獲取數據，post是向服務器傳送數據；
get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，通常被默認爲不受限制。但理論上，IIS4中最大量爲80KB，IIS5中爲100KB；
get安全性很是低，post安全性較高。可是執行效率卻比Post方法好；
get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中能夠看到；
在作數據查詢時，建議用Get方式；

post:
    post是經過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一塊兒傳送到ACTION屬性所指的URL地址，用戶看不到這個過程；
    因此：包含機密信息的話，建議用Post數據提交方式；而在作數據添加、修改或刪除時，建議用Post方式。

---

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

跨域問題是瀏覽器爲了實施的同源策略致使的，同源策略限制了來自不一樣源的document,腳本。同源意思就是兩個url的域名、協議、端口要徹底相同。解決方法：script標籤jsonp跨域、nginx反向代理、node.js中間件代理跨域、後端在頭部信息設置安全域名、後端在服務器上設置cors。

// jsonp原理:動態引入script標籤，經過script標籤引入一個js，這個js文件載入後會執行咱們在url參數中指定的參數，而且把咱們須要的json數據做爲參數傳入
 functioncreateJs(sUrl){
    var oScript =document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src= sUrl;
    document.getElementsByTagName('head')[0].appendChild(oScript);
}

12.如何對一個數組去重？

// 方法一：es6中Set+Array.from方法,目前主流的瀏覽器，Chrome,Firfox,Opera，Safari，包括微軟的Edge,都是支持的，惟獨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方法轉爲數組
var newArr = Array.from(new Set(arr));
console.log(newArr)  // [1, 3, 9, null, "1"]

// 方法二:遍歷，將值添加到新數組，用indexOf()判斷值是否存在，已存在就不添加，達到去重效果。
//ps:這個方法不能分辨NaN,會出現兩個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"]

// 方法三：將數組的值添加只一個對象的屬性名裏，而且給屬性賦值，對象不能添加相同的屬性名，以這個爲依據能夠實現去重，而後用objec.keys(obj)，返回改對象可枚舉屬性組成的數組，即去重後的數組。
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.翻轉一個字符串：

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

第三更（vue篇）