2018.04.11-面試知識點總結

一下今天面試前端崗位被面試官問到的知識點：

JS:

一、例如www.baidu.com?id=1&test=2&num=3,這樣一個url 要獲取其中參數test的值，怎麼獲取？這樣截取會出現什麼錯誤 

 方法一：正則表達式 match()

1 var keyword = getQueryString("keyword");
2     var id = getQueryString("id");
3     function getQueryString(name) {
4         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
5         var r = window.location.search.substr(1).match(reg);
6         if (r != null) return decodeURIComponent(r[2]); return null;
7     }

方法二：split()截取

 1  function GetRequest() {
 2         var url = location.search; //獲取url中"?"符後的字串
 3         var theRequest = new Object();
 4         if (url.indexOf("?") != -1) {
 5             var str = url.substr(1);
 6             strs = str.split("&");
 7             for(var i = 0; i < strs.length; i ++) {
 8                 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
 9             }
10         }
11         return theRequest;
12     }
13     var Request = GetRequest();
14     alert(Request["keyword"]);
15     alert(Request["id"]);

 

二、數組去重的方法

方法一：

1  var arr = [1,1,2,5,0];
2     var temp = [];
3     for(var i = 0;i < arr.length; i++){
4         if(temp.indexOf(arr[i])){
5             temp.push(arr[i]);
6         }
7     }
8     console.log(temp);輸出結果：

 

方法二：

 

CSS:

pc端：

一、position:absolute和position:relative的區別

absolute絕對定位：

生成絕對定位元素。使元素脫離文檔流，並相對於其包含塊進行定位，包含塊多是文檔中的另外一個元素或者是初始包含塊，

元素原先在正常文檔流中所佔的空間會會被後面元素佔據；

不論是塊級元素仍是行內元素，應用了position:absolute以後，display爲block：

脫離文檔流，容器（父）元素將得不到脫離普通流的子元素高度

relative相對定位：

二、垂直居中的幾絕對定位種方法，外層是vertical-align 裏面的內容真的就能居中嗎？

vertical-align缺點

三、塊級元素和行級元素的區別？

塊級元素具備如下特色：

①老是在新行上開始，佔據一整行；
②高度，行高以及外邊距和內邊距均可控制；
③寬帶始終是與瀏覽器寬度同樣，與內容無關；
④它能夠容納內聯元素和其餘塊元素。

行內元素的特色：

①和其餘元素都在一行上；
②高，行高及外邊距和內邊距部分可改變；
③寬度只與內容有關；
④行內元素只能容納文本或者其餘行內元素。

不能夠設置寬高，其寬度隨着內容增長，高度隨字體大小而改變，內聯元素能夠設置外邊界，可是外邊界不對上下起做用，只能對左右起做用
 

四、兩個div塊級元素都有margin:20px;上下兩個div之間的margin值，

若這兩個div是浮動float的，這是的margin又是多少？

給span元素margin:10px 20px;多個span下，有左右邊距20px 上下無邊距，若爲span元素加float 上下左右都有margin值。

 

 

 

五、get和post的區別

• GET 請求可被緩存
• GET 請求保留在瀏覽器歷史記錄中
• GET 請求可被收藏爲書籤
• GET 請求不該在處理敏感數據時使用
• GET 請求有長度限制
• GET 請求只應當用於取回數據

• POST 請求不會被緩存
• POST 請求不會保留在瀏覽器歷史記錄中
• POST 不能被收藏爲書籤
• POST 請求對數據長度沒有要求

六、jq ajax提交數據，用什麼方法接受返回的內容？

用success error

七、提交表單，顯示loading的層，在何時關閉loading層？

使用complete事件 在此事件中關閉loading層

八、例如ul 裏有不少個li,用jq方法獲取li排第幾個？

 

九、給ul綁定點擊事件，又給li綁定點擊事件，怎麼知道是觸發ul的事件仍是li的事件？

點擊li元素，先觸發li綁定事件，再觸發ul綁定的事件，

十、一個遮罩層，若遮罩層中間包含一個顯示內容div，點擊遮罩層會關閉彈窗，因爲事件冒泡，點擊顯示內容div(包含在遮罩中)，則也會致使彈窗關閉，如何解決這問題？

十一、 委託和on區別？

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品

使用 on() 方法添加的事件處理程序適用於當前及將來的元素（好比由腳本建立的新元素）

移除對IE6/IE7/IE8的支持

jQuery 2.0將支持與jQuery 1.9相同的API，並沒有多大的特性增長，但會移除對IE 6/7/8的支持。正由於支持相同的API1.9和2.0之間是能夠互換的。jQuery 2.0更小，更快捷，不會有IE 6/7/8帶來的問題，若是須要支持IE 6/7/8，就選擇1.9。你能夠經過條件註釋在使用IE 6/7/8時選擇jQuery 1.9。

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

十二、var let聲明的特色 做用域？

1三、一個外層中有一個圖標和文字，若是讓文字和圖標垂直居中？

面試時我回答了第一種,面試官問，margin就目測去寫嗎？

當時想不起來能夠用背景圖。。

 

1四、ES6使用過嗎？箭頭函數的好處？（面試官問好處時說 出現的新寫法新的東西 都要弄明白這樣寫爲何會更好？）

1五、你從哪裏瞭解到前端最新技術？

1六、一個div元素<div style="position:absolute;width:100px;height:100px;"></div>在瀏覽器中會顯示出來嗎？  會

移動端：

一、display:flex特色 好處？

二、line-height在手機上 能讓文字居中嗎？(兼容性)

三、手機上 左邊label如用戶名：右邊是文本框，lable固定值，文本框若是讓其自適應？