前端面試題2019.02.28
1、用 js 寫出幾種去除 string 空格的方法。
（1）、使用js循環
//供使用者調用 function trim(s){ return trimRight(trimLeft(s)); } //去掉左邊的空白 function trimLeft(s){ if(s == null) { return ""; } var whitespace = new String(" \t\n\r"); var str = new String(s); if (whitespace.indexOf(str.charAt(0)) != -1) {var j=0, i = str.length; while (j < i && whitespace.indexOf(str.charAt(j)) != -1){ j++; } str = str.substring(j, i); } return str; } //去掉右邊的空白 function trimRight(s){ if(s == null) return ""; var whitespace = new String(" \t\n\r"); var str = new String(s); if (whitespace.indexOf(str.charAt(str.length-1)) != -1){var i = str.length - 1; while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){ i--; } str = str.substring(0, i+1); } return str; }
（2）使用正則
String.prototype.Trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.LTrim = function()
{
return this.replace(/(^\s*)/g, "");
}
String.prototype.RTrim = function()
{
return this.replace(/(\s*$)/g, "");
}
//去左空格;
function ltrim(s){
return s.replace(/(^\s*)/g, "");
}
//去右空格;
function rtrim(s){
return s.replace(/(\s*$)/g, "");
}
//去左右空格;
function trim(s){
return s.replace(/(^\s*)|(\s*$)/g, "");
}（3）使用JQ
$trim(str)
2、如何獲取瀏覽器URL中查詢字符串中的參數？
function getQuery(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r!=null) return unescape(r[2]); return null; }
3、比較 typeof 與 instanceof ?
相同點：都常用來判斷一個變量是否為空，或者是什麽類型的。
不同點：tyoeof返回字符串用來說明變量的數據類型，instanceof 返回布爾值，用來判斷變量是否屬於某個對象的實例。
4、如何理解閉包？
一般指可以訪問另一個函數作用域變量的的函數。當一個變量想要反復調用，又想避免全局汙染的情況下，會使用到閉包。缺點是所占用的空間不容易被釋放，需要手動清除。
5、JQuery的幾種選擇器分別是？
（1）、基本選擇器
*
#id
element
.class
（2）、層次選擇器
ancestor descendant parent > child prev + next prev ~ siblings
(3)、基本過濾器選擇器
:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated
(4)、內容過濾器選擇器
:contains
:empty
:has
:parent
(5)、可見性過濾器選擇器
(6)、屬性過濾器選擇器
(7)、子元素過濾器選擇器
(8)、表單選擇器
(9)、表單過濾器選擇器
具體可參考 http://api.jquery.com/category/selectors/
6、瀏覽器的內核分別是什麽？
IE內核：Trident
Firefox內核：Gecko
Safari內核：Webkit
Opera內核：Presto=>Blink
Chrome內核：Blink
7、瀏覽器本地存儲？
Cookie、LocalStorag、SessinStorage。
LocalStorage讀取數據需要在 協議、主機名和端口相同的情況下，而SessionStorage在滿足上面的條件時還要求在同一窗口（標簽頁）。
Cookie默認關閉窗口清除數據，可通過SetCookie設置存儲時間。
LocalStorage永久存儲，可設置保存時間。
SessionStorage 會話級存儲，關閉頁面自動銷毀。相當於Cookie的默認。
Cookie是數據會在蔑稱發送HTTP請求的時候，同時發送給服務器。 而LocalStorag、SessinStorage 則不會。
8、你了解的Web攻擊技術？
（1）、xss跨站攻擊技術：主要是攻擊者往網頁裏嵌入惡意腳本，或者通過改變html元素屬性來實現攻擊，主要原因在於開發者對用戶的變量直接使用導致進入html中會被直接編譯成js，通常的get請求通過url來傳參，可以在url中傳入惡意腳本，從而獲取信息，解決方法：特殊字符過濾。
（2）、sql註入攻擊：主要是就是通過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令，比如select * from test where username="wuxu" or 1=1，這樣會使用戶跳過密碼直接登錄，具體解決方案：1、特殊字符過濾，不要用拼接字符串的方法來湊sql語句。2、對sql語句進行預編譯，比如java的preparedstatement。3、關閉錯誤信息，攻擊者可能會通過不斷的嘗試來得到數據庫的一些信息，所以關閉錯誤信息變得重要起來。4、客戶端對數據進行加密，使原來傳進來的參數因為加密而被過濾掉。5、控制數據庫的權限，比如只能select，不能insert，防止攻擊者通過select * from test ；drop tables這種操作。
（3）、遠程目錄包含攻擊，原理就是註入一段用戶能控制的腳本或代碼，並讓服務端執行。比如php中的include($filename)，而此filename由用戶傳入，用戶即可傳入一段惡意腳本，從而對服務其造成傷害，解決方法：當采用文件包含函數的時候，不應動態傳入，而應該有具體的文件名，如果動態傳入，要保證動態變量不被用戶所控制。
（4）、會話劫持：這是一種通過獲取用戶Session ID後，使用該Session ID登錄目標賬號的攻擊方法，此時攻擊者實際上是使用了目標賬戶的有效Session。會話劫持的第一步是取得一個合法的會話標識來偽裝成合法用戶，因此需要保證會話標識不被泄漏，通俗一點就是用戶在登錄時，唯一標示用戶身份的session id被劫持，使得攻擊者可以用這個session id來進行登錄後操作，而攻擊者主要是通過 竊取：使用網絡嗅探，XSS攻擊等方法獲得。而第一種方式網絡嗅探，我們可以通過ssl加密，也就是https來對報文進行加密，從而防止報文被截獲，而第二種方式xss攻擊，方式在第一種已經給出，不再贅述。此外通過設置HttpOnly。通過設置Cookie的HttpOnly為true，可以防止客戶端腳本訪問這個Cookie，從而有效的防止XSS攻擊，還有就是設置token驗證。關閉透明化Session ID。透明化Session ID指當瀏覽器中的Http請求沒有使用Cookie來存放Session ID時，Session ID則使用URL來傳遞。
9、iframe的優缺點？
優點：（1）、能夠完整展示嵌入網頁。（2）、頁面和程序分類（3）、一個iframe可多次調用，代碼復用性高。（4）、加載第三方內容如：圖標、廣告等可使用 iframe 解決。
缺點：（1）、兼容性差，在移動端無法完全顯示。（2）、結構混亂，多個框架會出現滾動條，用戶體驗差。（3）、會產生多個頁面，不利於管理。（4）、會增加服務器的 http 請求。
10、編寫一個方法，去掉一個數組的重復元素。
function unique(arr){ //Set數據結構，它類似於數組，其成員的值都是唯一的 return Array.from(new Set(arr)); // 利用Array.from將Set結構轉換成數組 }
前端面試題2019.02.28