前端面試題

seal_de 發布于2019-08-30 15:56 / 951人閱讀

摘要：前端面試題總結，持續更新和區別瀏覽器的緩存機制提供了可以將用戶數據存儲在客戶端上的方式，可以利用等跟服務端進行數據交互。

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

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

數組去重

    // 新建一新數組，遍歷傳入數組，值不在新數組就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篇）

GPU云服務器云服務器面試題棧面試題筆試面試題面試題內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117551.html

你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

ninefive 2019-08-21 16:18 評論0 收藏0
你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

darkbaby123 2019-07-30 14:38 評論0 收藏0
前端開發面試題鏈接

摘要：手冊網超級有用的前端基礎技術面試問題收集前端面試題目及答案匯總史上最全前端面試題含答案常見前端面試題及答案經典面試題及答案精選總結前端面試過程中最容易出現的問題前端面試題整理騰訊前端面試經驗前端基礎面試題部分最新前端面試題攻略前端面試前端入手冊網：http://www.shouce.ren/post/index 超級有用的前端基礎技術面試問題收集：http://www.codec...

h9911 2019-08-02 16:11 評論0 收藏0
前端開發面試題鏈接

摘要：手冊網超級有用的前端基礎技術面試問題收集前端面試題目及答案匯總史上最全前端面試題含答案常見前端面試題及答案經典面試題及答案精選總結前端面試過程中最容易出現的問題前端面試題整理騰訊前端面試經驗前端基礎面試題部分最新前端面試題攻略前端面試前端入手冊網：http://www.shouce.ren/post/index 超級有用的前端基礎技術面試問題收集：http://www.codec...

snifes 2019-08-23 16:48 評論0 收藏0
前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
20W字囊括上百個前端面試題的項目開源了

摘要：字囊括上百個前端面試題的項目開源了這個項目是什么項目內容這個項目目前在上剛剛開源主要內容如下前端面試題主要整理了高頻且有一定難度的前端面試題對這些面試題進行解讀前端原理詳解針對一些有一定難度面試題涉及的知識點進行詳解比如涉及的編譯原理響應式 20W字囊括上百個前端面試題的項目開源了這個項目是什么? 項目內容這個項目目前在GitHub上剛剛開源,主要內容如下: 前端面試題: 主要整...

Euphoria 2019-08-26 10:49 評論0 收藏0