前端面試一

1. var let const三者的區別？

Let,const是es6中新的聲明命令

Var是聲明全局變量，用var聲明的變量，在全局內有效，能夠跨塊級做用域訪問，可是不能跨函數訪問，var聲明的變量可更改，所以在聲明的時候沒必要賦值，但不建議這麼幹。Var聲明的變量存在變量提高現象，即變量能夠在聲明以前使用，值爲undefined。

Let是聲明局部變量的命令，let聲明的變量，只在聲明的塊內有效，不能跨塊訪問，也不能跨函數訪問，let聲明的變量可更改，所以在聲明的時候沒必要賦值，但不建議這麼幹。Let聲明的變量不存在變量提高現象，它所聲明的變量必定要在聲明後使用，不然報錯。Let還存在暫時性死區，也即，在代碼塊內，let變量必定要在聲明後使用，不然就會報錯，let變量聲明前都是let變量的死區。Let變量不容許重複聲明。

Const的用法和let相似，可是const聲明的是常量，不可更改，所以在定義的時候就必需要給其賦值。Const也存在暫時性死區，也在其定義的塊內才取做用。

2. 如何清除浮動？

1.在父元素後面新增一個空標籤，設置css，clear：both；

2.父級div定義 僞類:after 和 zoom

.clearfix:after {
    content: ".";
    display: block;
    height:0;
    clear:both;
    visibility: hidden;
}
.clearfix {
    *zoom:1;
}

3.給父元素設置css，overflow：hidden；

推薦用第二種

3. CSS僞類？

  :focus: 元素得到焦點

:link: 元素未被訪問

:active: 正在活動的元素

:before: 在元素前插入內容

:hover: 鼠標移入元素

:visited: 元素已經被訪問過

:first-child: 選擇第一個匹配的元素

:empty: 內容爲空的元素

:nth-child(n): 選擇元素的第n個子元素

:nth-of-type(n): 選擇元素的第n個與元素相同類的子元素

:last-child： 選擇父元素的最後一個元素

4. Position的屬性？

1.static 默認標準流

2.Fixed 固定定位，相對於窗口

3.Relative 相對定位 相對於標準流

4.Absoluted 絕對定位 和relative配合使用

5. 數組的內置方法？

  1.length 數組的長度

2.indexOf 搜索一個元素的指定位置，不存在返回-1

3.slice 截取數組的部分長度，而後返回新的數組

4.push() 在數組尾部添加若干內容

5.pop() 刪除數組尾部最後一個元素

6.unshift() 向數組頭部添加若干內容

7.shift() 刪除數組的第一個元素

8.sort() 給數組重新排序

9.reverse() 給數組倒序

10.splice() 從指定的索引開始向數組中添加或者刪除元素

11.concat() 把當前的數組和另外一個數組合併爲一個新的數組

12.join() 把當前數組用指定字符串鏈接起來，而後返回新的字符串

6.考察做用域

var a = 'a';
function A() {
    console.log(a);
    var a = 'a';
}
A() ;  //undefined

 

Var聲明的變量存在變量提高現象

函數內部又會從新開闢一塊空間，若是有變量，繼續在函數內變量提高

所以在執行函數的時候，函數內的a變量提高，而後打印在變量的賦值前，所以是undefined

7.setTimeout和setInterval的區別？

   var b = 1;
setTimeout(function () {
    b = 2;

console.log(b)  //2
},0);
console.log(b)  //1

setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式,而setInterval()則能夠在每隔指定的毫秒數循環調用函數或表達式，直到clearInterval把它清除。

Js有一個主js執行進程，這個進程是頁面剛加載的時候頁面按照加載順序執行的js代碼，此外還有一個須要在進程空閒的時候執行的代碼隊列，而定時器的回調函數就是在定時時間到了之後放入這個代碼隊列進行執行，所以定時器的任務和js任務是並行執行的。

因此雖然定時時間是0, 可是打印的b依然是1，由於是在js主執行進程中執行的代碼。

8. localStorage 和 sessionStorage的區別？

localStorage 和 sessionStorage是客戶端存儲數據的兩個對象。

localStorage用於長久保存整個網站的數據，保存的數據沒有過時時間，直到手動去除。

sessionStorage 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁以後將會刪除這些數據。

不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息，相同瀏覽器的不一樣頁面間能夠共享相同的 localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。

9. Cookie 和 webstorage的區別？

webstorage是本地存儲，存儲在客戶端，包括localStorage和sessionStorage，不與服務器端進行通訊，二者的存儲大小均爲5Mb；

cookie生命期爲只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。 存放數據大小爲4K左右 。有個數限制（各瀏覽器不一樣），通常不能超過20個。與服務器端通訊：每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題。但具備極高的擴展性和可用性。同時也存在安全性問題。

 

10. http響應碼，200、400、500分別指什麼？

200：（OK）：請求成功。通常用於GET與POST請求

400：（Bad Requests）：客戶端請求的地址不存在或者包含不支持的參數

500：服務器內部錯誤，沒法完成請求

1XX——信息類（Information），表示收到http請求，正在進行下一步處理，一般是一種瞬間的響應狀態。

2XX——成功類（Successful），表示用戶請求被正確接收、理解和處理

200（OK）：請求成功。通常用於GET與POST請求

201（Created）：已建立。成功請求並建立了新的資源

202（Accepted）：服務器已接受請求，但還沒有處理。正如它可能被拒絕同樣，最終該請求可能會也可能不會被執行。

3XX——重定向類（Redirection），表示沒有請求成功，必須採起進一步的動做

301（Moved Permanently）：資源被永久移動。請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新URI。從此任何新的請求都應使用新的URI

302（Found）：資源臨時移動。資源只是臨時被移動，客戶端應繼續使用原有URI

304：用其餘策略獲取資源

4XX——客戶端錯誤（Client Error），表示客戶端提交的請求包含語法錯誤或不能正確執行

400（Bad Requests）：客戶端請求的地址不存在或者包含不支持的參數

401（Unauthorized）：未受權，或認證失敗。對於須要登陸的網頁，服務器可能返回此響應

403（Forbidden）：沒權限。服務器收到請求，但拒絕提供服務

404（Not Found）：請求的資源不存在。遇到404首先檢查請求url是否正確

5XX——服務端錯誤（Server Error），表示服務器不能正確執行一個正確的請求（客戶端請求的方法及參數是正確的，服務端不能正確執行，如網絡超時、服務僵死，能夠查看服務端日誌再進一步解決）

500（Internal Server Error）：服務器內部錯誤，沒法完成請求

503（Service Unavailable）：因爲超載或系統維護（通常是訪問人數過多），服務器沒法處理客戶端的請求 ，一般這只是暫時狀態