前端面試題2019.02.28

一、用 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)

二、如何獲取瀏覽器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;
　　}

三、比較 typeof 與 instanceof ?

相同點：都經常使用來判斷一個變量是否爲空，或者是什麼類型的。

不一樣點：tyoeof返回字符串用來講明變量的數據類型，instanceof 返回布爾值，用來判斷變量是否屬於某個對象的實例。

四、如何理解閉包？

通常指能夠訪問另外一個函數做用域變量的的函數。當一個變量想要反覆調用，又想避免全局污染的狀況下，會使用到閉包。缺點是所佔用的空間不容易被釋放，須要手動清除。

五、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/

六、瀏覽器的內核分別是什麼？

IE內核：Trident

Firefox內核：Gecko

Safari內核：Webkit

Opera內核：Presto=>Blink

Chrome內核：Blink 

七、瀏覽器本地存儲？

Cookie、LocalStorag、SessinStorage。

LocalStorage讀取數據須要在 協議、主機名和端口相同的狀況下，而SessionStorage在知足上面的條件時還要求在同一窗口（標籤頁）。

Cookie默認關閉窗口清除數據，可經過SetCookie設置存儲時間。

LocalStorage永久存儲，可設置保存時間。

SessionStorage 會話級存儲，關閉頁面自動銷燬。至關於Cookie的默認。

Cookie是數據會在蔑稱發送HTTP請求的時候，同時發送給服務器。 而LocalStorag、SessinStorage 則不會。

八、你瞭解的Web攻擊技術？

（1）、xss跨站攻擊技術：主要是攻擊者往網頁裏嵌入惡意腳本，或者經過改變html元素屬性來實現攻擊，主要緣由在於開發者對用戶的變量直接使用致使進入html中會被直接編譯成js，一般的get請求經過url來傳參，能夠在url中傳入惡意腳本，從而獲取信息，解決方法：特殊字符過濾。

（2）、sql注入攻擊：主要是就是經過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令，好比select * from test where username="wuxu" or 1=1，這樣會使用戶跳過密碼直接登陸，具體解決方案：一、特殊字符過濾，不要用拼接字符串的方法來湊sql語句。二、對sql語句進行預編譯，好比java的preparedstatement。三、關閉錯誤信息，攻擊者可能會經過不斷的嘗試來獲得數據庫的一些信息，因此關閉錯誤信息變得重要起來。四、客戶端對數據進行加密，使原來傳進來的參數由於加密而被過濾掉。五、控制數據庫的權限，好比只能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來傳遞。

九、iframe的優缺點？

優勢：（1）、可以完整展現嵌入網頁。（2）、頁面和程序分類（3）、一個iframe可屢次調用，代碼複用性高。（4）、加載第三方內容如：圖標、廣告等可以使用 iframe 解決。

缺點：（1）、兼容性差，在移動端沒法徹底顯示。（2）、結構混亂，多個框架會出現滾動條，用戶體驗差。（3）、會產生多個頁面，不利於管理。（4）、會增長服務器的 http 請求。

十、編寫一個方法，去掉一個數組的重複元素。

function unique(arr){
 //Set數據結構，它相似於數組，其成員的值都是惟一的
 return Array.from(new Set(arr)); // 利用Array.from將Set結構轉換成數組
}