2020年前端面試題及答案

阿新 • • 發佈：2020-08-26

前端面試彙總（2020年）

一

大綱

1、前言

2、前端工程化

3、前端設計模式

4、前端安全性問題

5、前端跨域問題

6、前端資料加密

7、前端http相關問題

8、*前端基礎知識點面試題

9、前端技術棧問題

前言

由於新冠肺炎疫情，現在成天呆在家裡，加上也要準備面試，就在家裡看面試題，看著網上一堆面試題，決定收集常見題目彙總一下。關於面試大綱，我認為每個人都是千差萬別的。因為面試官都是對簡歷所寫的專案經驗進行深挖或者對你所掌握的基本技能進行考察。

前端工程化

什麼是"前端工程化"？

前端工程化是使用軟體工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規範化、標準化，其主要目的為了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重複工作時間

，而前端工程本質上是軟體工程的一種，因此我們應該從軟體工程的角度來研究前端工程。

如何做"前端工程化"？

前端工程化就是為了讓前端開發能夠“自成體系”，個人認為主要應該從模組化、元件化、規範化、自動化四個方面思考。

前端設計模式

前端常見的設計模式主要有以下幾種，具體設計模式檢視這篇文章。
1. 單例模式
2. 工廠模式
3. 策略模式
4. 代理模式
5. 觀察者模式
6. 模組模式
7. 建構函式模式
8. 混合模式

前端安全性問題

這個是老的話題，有的在初中級前端面試中可能不會提到。但是在高階面試的時候，你要說出前端安全性問題防禦，及前端常見安全性問題的攻擊原理是什麼。

xss跨站指令碼攻擊原理？如何進行？防禦手段？

如何進行：如何XSS是指惡意攻擊者利用網站沒有對使用者提交資料進行轉義處理或者過濾不足的缺點，進而新增一些程式碼，嵌入到web頁面中去。使別的使用者訪問都會執行相應的嵌入程式碼。從而盜取使用者資料、利用使用者身份進行某種動作或者對訪問者進行病毒侵害的一種攻擊方式。

主要原理：過於信任客戶端提交的資料！

防禦手段：不信任任何客戶端提交的資料，只要是客戶端提交的資料就應該先進行相應的過濾處理然後方可進行下一步的操作。

CSRF跨站請求偽造原理？如何進行？防禦手段？

如何進行：當你在某網頁登入之後，在沒有關閉網頁的情況下，收到別人的連結。例如:http://127.0.0.1/dvwa/vulnerabilities/csrf/?password_new=1&password_conf=1&Change=Change#

點選連結，會利用瀏覽器的cookie把密碼改掉。

主要原理：在沒有關閉相關網頁的情況下，點選其他人發來的CSRF連結，利用客戶端的cookie直接向伺服器傳送請求。

防禦手段：

檢測Referer

Anti-CSRFtoken機制

業務上要求使用者輸入原始密碼（簡單粗暴），攻擊者在不知道原始密碼的情況下，無論如何都無法進行CSRF攻擊。

Sql指令碼注入原理？如何進行？防禦手段？

如何進行：利用現有應用程式，將（惡意）的SQL命令注入到後臺資料庫引擎執行的能力，它可以通過在Web表單中輸入（惡意）SQL語句得到一個存在安全漏洞的網站上的資料庫，而不是按照設計者意圖去執行SQL語句。

主要原理：通過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字串，最終達到欺騙伺服器執行惡意的SQL命令

防禦手段：

使用預編譯，繫結變數（推薦）。

檢查資料型別。

過濾特殊字元和語句。

頁面不錯誤回顯。

web上傳漏洞原理？如何進行？防禦手段？

如何進行：使用者上傳了一個可執行的指令碼檔案，並通過此指令碼檔案獲得了執行伺服器端命令的能力。

主要原理：當檔案上傳時沒有對檔案的格式和上傳使用者做驗證，導致任意使用者可以上傳任意檔案，那麼這就是一個上傳漏洞。

防禦手段：

1. 最有效的，將檔案上傳目錄直接設定為不可執行，對於Linux而言，撤銷其目錄的'x'許可權；實際中很多大型網站的上傳應用都會放置在獨立的儲存上作為靜態檔案處理，一是方便使用快取加速降低能耗，二是杜絕了指令碼執行的可能性；
2. 檔案型別檢查：強烈推薦白名單方式，結合MIME Type、字尾檢查等方式；此外對於圖片的處理可以使用壓縮函式或resize函式，處理圖片的同時破壞其包含的HTML程式碼；
3. 使用隨機數改寫檔名和檔案路徑，使得使用者不能輕易訪問自己上傳的檔案；
4. 單獨設定檔案伺服器的域名；

前端跨越問題

什麼是跨域？

由瀏覽器同源策略限制的一類請求場景，當不同地址，不同埠，不同級別，不同協議就會構成跨域。

什麼是同源策略？

所謂同源是指"協議+域名+埠"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。

它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。

如何解決跨域？能說1，2，7，8就行。

1、通過jsonp跨域

2、CORS

3、 document.domain + iframe跨域

4、 location.hash + iframe

5、 window.name + iframe跨域

6、 postMessage跨域

7、 nginx代理跨域

8、 nodejs中介軟體代理跨域

9、 WebSocket協議跨域

前端資料加密問題

一般如何處理使用者敏感資訊？

前端一般使用md5、base64加密、sha1加密，想要了解詳情請自行百度。

前端http相關問題

HTTP常用狀態碼及其含義？

1xx：指示資訊--表示請求已接收，繼續處理

100 Continue 初始的請求已經接受，客戶應當繼續傳送請求的其餘部分。（HTTP 1.1新）

101 Switching Protocols 伺服器將遵從客戶的請求轉換到另外一種協議（HTTP 1.1新）

2xx：成功--表示請求已被成功接收、理解、接受

200 OK 一切正常，對GET和POST請求的應答文件跟在後面。

201 Created 伺服器已經建立了文件，Location頭給出了它的URL。

202 Accepted 已經接受請求，但處理尚未完成。

203 Non-Authoritative Information 文件已經正常地返回，但一些應答頭可能不正確，因為使用的是文件的拷貝（HTTP 1.1新）。

204 No Content 沒有新文件，瀏覽器應該繼續顯示原來的文件。如果使用者定期地重新整理頁面，而Servlet可以確定使用者文件足夠新，這個狀態程式碼是很有用的。

205 Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容（HTTP 1.1新）。

206 Partial Content 客戶傳送了一個帶有Range頭的GET請求，伺服器完成了它（HTTP 1.1新）。

3xx：重定向--要完成請求必須進行更進一步的操作

300 Multiple Choices 客戶請求的文件可以在多個位置找到，這些位置已經在返回的文件內列出。如果伺服器要提出優先選擇，則應該在Location應答頭指明。

301 Moved Permanently 客戶請求的文件在其他地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。

302 Found 類似於301，但新的URL應該被視為臨時性的替代，而不是永久性的。注意，在HTTP1.0中對應的狀態資訊是“Moved Temporatily”。出現該狀態程式碼時，瀏覽器能夠自動訪問新的URL，因此它是一個很有用的狀態程式碼。注意這個狀態程式碼有時候可以和301替換使用。例如，如果瀏覽器錯誤地請求http://host/~user（缺少了後面的斜槓），有的伺服器返回301，有的則返回302。嚴格地說，我們只能假定只有當原來的請求是GET時瀏覽器才會自動重定向。請參見307。

303 See Other 類似於301/302，不同之處在於，如果原來的請求是POST，Location頭指定的重定向目標文件應該通過GET提取（HTTP 1.1新）。

304 Not Modified 客戶端有緩衝的文件併發出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文件）。伺服器告訴客戶，原來緩衝的文件還可以繼續使用。

305 Use Proxy 客戶請求的文件應該通過Location頭所指明的代理伺服器提取（HTTP 1.1新）。

307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即使原來的請求是POST，即使它實際上只能在POST請求的應答是303時才能重定向。由於這個原因，HTTP 1.1新增了307，以便更加清除地區分幾個狀態程式碼：當出現303應答時，瀏覽器可以跟隨重定向的GET和POST請求；如果是307應答，則瀏覽器只能跟隨對GET請求的重定向。（HTTP 1.1新）

4xx：客戶端錯誤--請求有語法錯誤或請求無法實現

400 Bad Request 請求出現語法錯誤。

401 Unauthorized 客戶試圖未經授權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示使用者名稱字/密碼對話方塊，然後在填寫合適的Authorization頭後再次發出請求。

403 Forbidden 資源不可用。伺服器理解客戶的請求，但拒絕處理它。通常由於伺服器上檔案或目錄的許可權設定導致。

404 Not Found 無法找到指定位置的資源。這也是一個常用的應答。

405 Method Not Allowed 請求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）對指定的資源不適用。（HTTP 1.1新）

406 Not Acceptable 指定的資源已經找到，但它的MIME型別和客戶在Accpet頭中所指定的不相容（HTTP 1.1新）。

407 Proxy Authentication Required 類似於401，表示客戶必須先經過代理伺服器的授權。（HTTP 1.1新）

408 Request Timeout 在伺服器許可的等待時間內，客戶一直沒有發出任何請求。客戶可以在以後重複同一請求。（HTTP 1.1新）

409 Conflict 通常和PUT請求有關。由於請求和資源的當前狀態相沖突，因此請求不能成功。（HTTP 1.1新）

410 Gone 所請求的文件已經不再可用，而且伺服器不知道應該重定向到哪一個地址。它和404的不同在於，返回407表示文件永久地離開了指定的位置，而404表示由於未知的原因文件不可用。（HTTP 1.1新）

411 Length Required 伺服器不能處理請求，除非客戶傳送一個Content-Length頭。（HTTP 1.1新）

412 Precondition Failed 請求頭中指定的一些前提條件失敗（HTTP 1.1新）。

413 Request Entity Too Large 目標文件的大小超過伺服器當前願意處理的大小。如果伺服器認為自己能夠稍後再處理該請求，則應該提供一個Retry-After頭（HTTP 1.1新）。

414 Request URI Too Long URI太長（HTTP 1.1新）。

416 Requested Range Not Satisfiable 伺服器不能滿足客戶在請求中指定的Range頭。（HTTP 1.1新）

5xx：伺服器端錯誤--伺服器未能實現合法的請求

500 Internal Server Error 伺服器遇到了意料不到的情況，不能完成客戶的請求。

501 Not Implemented 伺服器不支援實現請求所需要的功能。例如，客戶發出了一個伺服器不支援的PUT請求。

502 Bad Gateway 伺服器作為閘道器或者代理時，為了完成請求訪問下一個伺服器，但該伺服器返回了非法的應答。

503 Service Unavailable 伺服器由於維護或者負載過重未能應答。例如，Servlet可能在資料庫連線池已滿的情況下返回503。伺服器返回503時可以提供一個Retry-After頭。

504 Gateway Timeout 由作為代理或閘道器的伺服器使用，表示不能及時地從遠端伺服器獲得應答。（HTTP 1.1新）505 HTTP Version Not Supported 伺服器不支援請求中所指明的HTTP版本。（HTTP 1.1新）

websocket和輪詢及長輪詢區別

輪詢如下：

客戶端：啦啦啦，有沒有新資訊(Request)服務端：沒有（Response）客戶端：啦啦啦，有沒有新資訊(Request)服務端：沒有。。（Response）客戶端：啦啦啦，有沒有新資訊(Request)服務端：你好煩啊，沒有啊。。（Response）客戶端：啦啦啦，有沒有新訊息（Request）服務端：好啦好啦，有啦給你。（Response）客戶端：啦啦啦，有沒有新訊息（Request）服務端：。。。。。沒。。。。沒。。。沒有（Response） ---- loop

長輪詢如下：

客戶端：啦啦啦，有沒有新資訊，沒有的話就等有了才返回給我吧（Request）服務端：額。。 等待到有訊息的時候。。來 給你（Response）客戶端：啦啦啦，有沒有新資訊，沒有的話就等有了才返回給我吧（Request） -loop

websocket如下：

websocket解決了HTTP的這幾個難題。首先，被動性，當伺服器完成協議升級後（HTTP->Websocket），服務端就可以主動推送資訊給客戶端啦。

所以上面的情景可以做如下修改。

客戶端：啦啦啦，我要建立Websocket協議，需要的服務：chat，Websocket協議版本：17（HTTP Request）服務端：ok，確認，已升級為Websocket協議（HTTP Protocols Switched）客戶端：麻煩你有資訊的時候推送給我噢。。服務端：ok，有的時候會告訴你的。服務端：balabalabalabala服務端：balabalabalabala服務端：哈哈哈哈哈啊哈哈哈哈服務端：笑死我了哈哈哈哈哈哈哈

Http和Https的區別？

1、https協議需要到ca申請證書，一般免費證書較少，因而需要一定費用。

2、http是超文字傳輸協議，資訊是明文傳輸，https則是具有安全性的ssl加密傳輸協議。

3、http和https使用的是完全不同的連線方式，用的埠也不一樣，前者是80，後者是443。

4、http的連線很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，比http協議安全。

*前端基礎知識點面試題

HTML/5、CSS/3相關

一、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？

新特性：

HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內容標籤（header,nav,footer,aside,article,section）
音訊、視訊API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
sessionStorage 的資料在瀏覽器關閉後自動刪除
表單控制元件，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation

移除元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
h5新標籤相容：
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何區分：
DOCTYPE宣告\新增的結構元素\功能元素

二、CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？CSS3新增偽類有那些？

CSS 選擇符：

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標籤選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul > li）

6.後代選擇器（li a）

7.萬用字元選擇器（ * ）

8.屬性選擇器（a[rel = "external"]）

9.偽類選擇器（a: hover, li:nth-child）

可以繼承的屬性：

可繼承的樣式： font-size font-family color, UL LI DL DD DT;

不可繼承的樣式：border padding margin width height ;

優先順序：

!important > id > class > tag

important 比內聯優先順序高,但內聯比 id 要高

CSS3新增偽類舉例：

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。

p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。

p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。

p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。

:enabled :disabled 控制表單控制元件的禁用狀態。

:checked 單選框或複選框被選中。

三、CSS3有哪些新特性？

更詳細的請見：https://www.cnblogs.com/qianduantuanzhang/p/7793638.html

CSS3實現圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的CSS選擇器多背景 rgba

在CSS3中唯一引入的偽元素是::selection.

媒體查詢，多欄佈局

border-image

四、解釋盒模型寬高值得計算方式，邊界塌陷，負值作用，box-sizing概念？

1. 盒模型：IE 678 下(不新增doctype) 使用ie盒模型，寬度 = 邊框 + padding + 內容寬度； chrom、IE9+、(新增doctype) 使用標準盒模型，寬度 = 內容寬度。
2. box-sizing : 為了解決標準黑子和IE盒子的不同，CSS3增添了盒模型屬性box-sizing，content-box(預設)，border-box 讓元素維持IE傳統盒子模型， inherit 繼承父盒子模型；
3. 邊界塌陷：塊元素的 top 與 bottom 外邊距有時會合並（塌陷）為單個外邊距（合併後最大的外邊距），這樣的現象稱之為外邊距塌陷。
4. 負值作用：負margin會改變浮動元素的顯示位置，即使我的元素寫在DOM的後面，我也能讓它顯示在最前面。

五、BFC（Block Formatting Context）是什麼？應用？

1. BFC 就是 ‘塊級格式上下文’ 的格式，建立了BFC的元素就是一個獨立的盒子，不過只有BLock-level box可以參與建立BFC，它規定了內部的Bloc-level Box 如何佈局，並且與這個獨立盒子裡的佈局不受外部影響，當然它也不會影響到外面的元素。
2. 應用場景：
1. 解決margin疊加的問題
2. 用於佈局（overflow: hidden）,BFC不會與浮動盒子疊加。
3. 用於清除浮動，計算BFC高度。

六、如何實現瀏覽器內多個標籤頁之間的通訊?

呼叫localstorge、cookies等本地儲存方式

七、簡要說一下CSS的元素分類

塊級元素：div,p,h1,form,ul,li;
行內元素 : span,a,label,input,img,strong,em;

八、解釋下浮動和它的工作原理？清除浮動的方法

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標籤清除浮動。

這種方法是在所有浮動標籤後面新增一個空標籤定義css clear:both. 弊端就是增加了無意義標籤。

2.使用after偽物件清除浮動

　該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽物件中設定 height:0，否則該元素會比實際高出若干畫素；

#parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

3.設定overflow為hidden或者auto

4.浮動外部元素

九、CSS隱藏元素的幾種方法（至少說出三種）

Opacity:元素本身依然佔據它自己的位置並對網頁的佈局起作用。它也將響應使用者互動;
Visibility:與 opacity 唯一不同的是它不會響應任何使用者互動。此外，元素在讀屏軟體中也會被隱藏;
Display:display 設為 none 任何對該元素直接打使用者互動操作都不可能生效。此外，讀屏軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;
Position:不會影響佈局，能讓元素保持可以操作;
Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支援。如果要在你的 clip-path 中使用外部的 SVG 檔案，瀏覽器支援度還要低;

十、如何讓一個盒子水平垂直居中

//已知寬高<div class="div1"></div><style>
.div1{
width:400px;
height:400px;
position:absolute;
left:50%;
top:50%
margin:-200px 0 0 -200px; }
</style>//未知寬高<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>
.div1{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border: 1px solid #000;
width: 400px;
height: 400px; } </style></head><body> <div class="div1"></div></body></html>//未知寬高方法二：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>
.div1{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid #000;
width: 400px;
height: 400px; } </style></head><body> <div class="div1"></div></body></html>

JS部分

1、cookie、localStorage、sessionStorage的區別和使用？

cookie：是儲存在本地的資料，有時候也用cookies，通常經過加密，應用最經典的就是判斷註冊使用者是否已經登入過該網站。 localStorage：僅在客戶端儲存（即瀏覽器），不參與和伺服器的通訊；沒有時間限制，即使瀏覽器關閉，資料依然存在；
建立和訪問localStorage：
1）、設定資料：
var forgetData = {phone:vm.phone}; localStorage.setItem("forgetData",JSON.Stringfy(forgetData)); //forgetData是儲存在localStorage裡邊的本地資料；JSON.Stringfy(forgetData)是將資料轉化為字串格式；
獲取資料：
vm.forgetData=JSON.parse(localStorage.getItem("forgetData")); //將字串轉化為JSON化；
2）、設定：localStorage.name = "zhao";
獲取：localStorage.name //zhao localStorage.setItem(key,value);//設定資料 localStorage.getItem(key);//獲取資料 localStorage.removeItem(key);//刪除單個數據 localStorage.clear();//清除所有localStorage的資料
sessionStorage：當用戶的瀏覽器視窗關閉時，資料會被清除；
共同點：都是儲存在瀏覽器端，且同源的。
區別：
cookie資料始終在同源的http請求中攜帶9即使不需要)，即cookie在瀏覽器和伺服器之間來回傳遞；cookie資料還有路徑的概念，可以限制cookie只屬於某個路徑下。儲存大小限制也不同，cookie資料大小不能超過4K，同時因為每次http請求都會攜帶cookie，所以cookie只能儲存很小的資料。
sessionStorage和localStorage不會自動把資料發給伺服器，只在本地儲存，雖然也有大小限制，但是要比cookie大得多，可以達到5M或者更大。
資料有效期不同，sessionStorage僅在當前瀏覽器視窗關閉前有效，不能持久儲存；localStorage：始終有效，瀏覽器視窗關閉也一直儲存；cookie：只在cookie設定的過期時間之前儲存，即使瀏覽器視窗關閉。
作用域不同，sessionStorage在不同瀏覽器視窗的資料不能共享，即使是同一個頁面；localStorage在所有的同源視窗中都是共享的；cookie也是在同源視窗中共享的，

2、如何實現瀏覽器多標籤頁之間的通訊？

  呼叫localStorage、cookie本地儲存方式。

3、JavaScript的typeof返回型別有哪些？

Object（null和Array）、number、undefined、string、Boolean、function

4、型別轉換

強制轉換：parseInt();parseFloat();number();

5、陣列的方法

var list = [1,2,3];list.pop();//刪除陣列的最後一個元素 var list = [1,2];list.unshift(0,1);//頭部新增 var list = [0,1,1,2,3];list.push(4,5);//尾部新增 var list = [1,2,3,4,5];var arr = list.concat(4,[5,6]);//把兩個陣列連線起來 //var arr = [1,2,3,4,5]; //var list = [1,2,3];list.join("-"); //1-2-3list.reverse();//3,2,1list.slice(1);//var list = [2,3];list.slice(1,2);//var list = [2];list.slice(1,-2);//設定了兩個引數，終止下標為負數，當出現負數時，將負數加上陣列長度的值來替換該位置的數。var arr = list.splice(0,1);//刪除 var list = [2,3]; var arr = [1];可以刪除任意數量的項，只需指定2個引數；要刪除的第一項的位置和要刪除的項數。例如splice(0,2);會刪除當前陣列的前兩項list.splice(2,0,4,6);//插入，var list = [1,2,4,6,3]; 可以向指定位置插入任意數量的項，需要3個引數，起始位置、0（要刪除的項數）、要插入的任意數量的項。例如splice(2,0,4,6);會從第二個位置插入4和6；list.splice(2,1,4,6);//替換，var list = [1,2,6,3]; 可以向指定位置插入任意數量的項，同時刪除任意數量的項，需要3個引數，起始位置、要刪除的項數、要插入的任意數量的項。例如splice(2,1,4,6);會從位置 2 開始插入4和6。list.sort();//按照第一個數字大小進行排序;function compare(a,b){
return a-b;//正序；
return b-a;//倒序；}list.sort(compare);

6、ajax請求時get和post的區別？

get：從伺服器上獲取資料，傳送資料量小，安全性低，請求會被快取，快取是針對URL進行快取的，get請求引數直接加在URL地址後面，一種引數組合就會產生一種URL的快取，重複的請求結果是相同的；post：向伺服器傳送資料；傳送資料量大，請求不會被快取，引數封裝在二進位制的資料體中，伺服器也不會記錄引數，相對安全，所以涉及使用者隱私的資料都要用post傳送；

7、ajax請求時，如何解釋json資料？

使用eval方法解析的時候，eval();不會去判斷該字串是否合法，而且json物件裡的js方法也會被執行，這是非常危險的；推薦使用JSON.parse(); JSON.parse();把字串轉化成json。

8、call和apply的區別？

共同點：
都可以用來代替另一個物件呼叫一個方法，將一個函式的物件上下文從初始的上下文改變為由thisObj指定的新物件。
另一種說法，都能夠改變方法的執行上下文（執行環境），將一個物件的方法交給另一個物件來執行，並且是立即執行。
不同點：
apply();//最多隻能有兩個引數--新this物件和一個數組argArray，如果給該方法傳遞多個引數，則把引數都寫進這個數組裡邊，當然，即使只有一個引數，也要寫進數組裡邊。
call();//可以接收多個引數，第一個引數apply()一樣，後面則是一串引數列表。
實際上，apply和call的功能是一樣的，只是傳入的引數列表的形式不同。

9、http常用狀態碼？

  100 Continue 繼續，一般在傳送post請求時，已傳送了http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊  200 OK  正常返回資訊  201 Created 請求成功並且伺服器建立了新的資源  202 Accepted 伺服器已接受請求，但尚未處理  301 Moved Permanently 請求的網頁已永久移動到新位置。  302 Found 臨時性重定向。  303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。  304 Not Modified 自從上次請求後，請求的網頁未修改過。  400 Bad Request 伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。  401 Unauthorized 請求未授權。  403 Forbidden 禁止訪問。  404 Not Found 找不到如何與 URI 相匹配的資源。  500 Internal Server Error 最常見的伺服器端錯誤。  503 Service Unavailable 伺服器端暫時無法處理請求（可能是過載或維護）。

10.你有哪些效能優化的方法？

（詳情請看雅虎14條效能優化原則）。
（1）減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data快取，圖片伺服器。
（2）前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
（3）用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。
（4）當需要設定的樣式很多時設定className而不是直接操作style。
（5）少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。
（6）避免使用CSS Expression（css表示式)又稱Dynamic properties(動態屬性)。
（7）圖片預載入，將樣式表放在頂部，將指令碼放在底部加上時間戳。

11.深拷貝和淺拷貝

基本型別指的是簡單的資料段，引用型別指的是多個值構成的物件； var name = "John"; // 基本型別值
var obj = new Object();
obj.name = "John";
// obj 為引用型別值
在複製變數中，對於基本型別來說，兩者互不影響， var num = 1; var num1 = num; // num1 = 1;
var num1 = 3; // num還是1,不會變
淺拷貝和深拷貝的區別：
對於淺拷貝來說，對於一個數組（陣列是一個物件），只要我們修改了一個拷貝陣列，原陣列也會跟著改變。
因為他們引用的是同一個地址的資料，拷貝的時候並沒有給b陣列創造獨立的記憶體，只是把a陣列指向資料的指標拷貝給了b；
而深拷貝就與其相反，將會給b陣列創造獨立的記憶體，並且將a陣列的內容一一拷貝進來，兩者互不影響。
實現深拷貝：
一：層級拷貝，用遞迴實現；
二：JSON解析 var b = JSON.parse(JSON.stringify(a));

其他

一、怎麼讓Chrome支援小於12px 的文字？

這個我們在做移動端的時候，設計師圖片上的文字假如是10px，我們實現在網頁上之後。往往設計師回來找我們，這個字型能小一些嗎？我設計的是10px？為啥是12px?其實我們都知道，谷歌Chrome最小字型是12px，不管你設定成8px還是10px，在瀏覽器中只會顯示12px，那麼如何解決這個坑爹的問題呢？

我們的做法是：

針對谷歌瀏覽器核心，加webkit字首，用transform:scale()這個屬性進行縮放！

<style>pspan{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style><p><span>haorooms部落格測試10px</span></p>

二、IOS手機瀏覽器字型齒輪

修改-webkit-font-smoothing屬性，結果是：-webkit-font-smoothing:none:無抗鋸齒-webkit-font-smoothing: antialiased | subpixel-antialiased |default:灰度平滑

三、如何修改chrome記住密碼後自動填充表單的黃色背景？

大體可以通過input : -webkit-autofill來進行修改！

input:-webkit-autofill {background-color:#FAFFBD;background-image: none;color:#000;}

四、谷歌瀏覽器執行下面程式碼，並解釋！

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

執行上面程式碼之後，會發現HTML層都被使用不同的顏色添加了一個高亮的邊框。為什麼會這樣呢？

首先我們來看

[].forEach.call()，關於call()和apply()，我前面有文章也寫過，具體可以看http://www.haorooms.com/post/js_constructor_pro

[].forEach.call()等價於Array.prototype.forEach.call()

其次我們來看$$("*")

你可以在你的Chrome瀏覽器控制檯中輸入$$('a')，然後你就能得到一個當前頁面中所有錨元素的列表。

為元素新增顏色

為了讓元素都有一個漂亮的邊框，我們在上面的程式碼中使用了CSS屬性outline。outline屬性位於CSS盒模型之外，因此它並不影響元素的屬性或者元素在佈局中的位置，這對於我們來說非常有用。這個屬性和修改border屬性非常類似，因此下面的程式碼應該不會很難理解：

a.style.outline="1px solid #"+ color

真正有趣的地方在於定義顏色部分：

（~~(Math.random()*(1<<24))).toString(16)

~~的作用相當於parseInt，和我前面講解的“|”功能類似，關於運算子“I”，可以去看看！

通過上面程式碼可以獲取到一個隨機的顏色值！

五、input [type=search] 搜尋框右側小圖示如何美化？

美化效果如下圖：

右側預設的比較難看的按鈕，美化成右側效果。

input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;height:15px;width:15px;border-radius:8px;background:url("images/searchicon.png")no-repeat 00;background-size:15px15px;}

用到的是偽元素::-webkit-search-cancel-button，關於什麼是偽類和為元素，請看：http://www.haorooms.com/post/css_wl_wys

六、iOS safari 如何阻止“橡皮筋效果”？

可以參考一下知乎上的回答https://www.zhihu.com/question/22256539。

但是，我們遇到的問題不是這樣，我是要解決彈跳導致彈出層（position:absolute）的覆蓋層高度小於100%;

針對這個問題，我想到的解決方案如下：

方法一：把position:absolute改成position:fixed，並在彈出層之後，設定body的高度是100%；overflow是hidden。

方法二：

思路是獲取蘋果瀏覽器導航欄的高度。然後滾動的時候，重新獲取其高度。在導航欄高度變小的時候，給彈出層增加高度的百分比！

程式碼如下：

//ios safari 伸縮判斷var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
$(window).scroll(function(){if(agent.indexOf("iPhone")!=-1|| agent.indexOf("iPad")!=-1){var topbarHeightNow=window.outerHeight-window.innerHeight;if(topbarHeightNow<topbarHeight){
globleflag=false//此處寫處理邏輯}else{
globleflag=true//此處寫處理邏輯}}});

七、實現點選文字，文字後面radio選中效果

這個效果是前端很經常用到和遇到的效果了，實現這個效果的方式也很多，很多朋友用js和jquery來實現，但是最簡單的，我們可以直接用lable標籤的 for 屬性來實現。

看下下面例子：

<form><labelfor="male">Male</label><inputtype="radio"name="sex"id="male"/><br/><labelfor="female">Female</label><inputtype="radio"name="sex"id="female"/></form>

label 的for屬性後面跟著input的id,就可以點選label，來觸發input效果了，大家可以試一試！

八、網站中，圖片檔案（jpg，png,gif），如何點選下載？而非點選預覽？

我們平時在網站中的圖片，假如我們要下載，如下寫：

<ahref="haorooms部落格.jpg">下載</a>

我們點選下載按鈕，只會預覽“haorooms部落格.jpg”這張圖片，並不會出現下載框，另存為那種？那麼我們如何做呢？

我們只需要如下寫

<ahref="haorooms部落格.jpg"download>下載</a>

就可以下載了。點選如下進行嘗試吧！下載

不但如次，我們還可以指定檔名稱，如下寫法：

<ahref="haorooms部落格.jpg"download="haoroom前端部落格圖片下載">下載</a>

測試如下：下載

上面就是指定下載的寫法！

九、Math.min()比Math.max()大

Math.min()<Math.max()// falseMath.min()>Math.max()// true

因為Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

前端技術棧問題

vue相關問題？

更多前端技能請關注公眾號”極致簡文“

▼

往期精彩回顧

▼

React元件與生命週期

React函式元件和Class元件以及Hooks

2020年最火爆的Vue.js面試題

Redux使用之我要買個女朋友（入門篇）

2020年前端面試題及答案

前言

前端工程化

如何做"前端工程化"？

前端設計模式

前端安全性問題

xss跨站指令碼攻擊原理？如何進行？防禦手段？

CSRF跨站請求偽造原理？如何進行？防禦手段？

Sql指令碼注入原理？如何進行？防禦手段？

web上傳漏洞原理？如何進行？防禦手段？

前端跨越問題

什麼是跨域？

什麼是同源策略？

如何解決跨域？ 能說1，2，7，8就行。

前端資料加密問題

一般如何處理使用者敏感資訊？

前端http相關問題

HTTP常用狀態碼及其含義？

websocket和輪詢及長輪詢區別

Http和Https的區別？

*前端基礎知識點面試題

HTML/5、CSS/3相關

JS部分

其他

一、怎麼讓Chrome支援小於12px 的文字？

二、IOS手機瀏覽器字型齒輪

三、如何修改chrome記住密碼後自動填充表單的黃色背景？

四、谷歌瀏覽器執行下面程式碼，並解釋！

首先我們來看

其次我們來看$$("*")

為元素新增顏色

五、input [type=search] 搜尋框右側小圖示如何美化？

六、iOS safari 如何阻止“橡皮筋效果”？

七、實現點選文字，文字後面radio選中效果

八、網站中，圖片檔案（jpg，png,gif），如何點選下載？而非點選預覽？

九、Math.min()比Math.max()大

vue相關問題？

相關推薦

如何解決跨域？能說1，2，7，8就行。