1. 程式人生 > >15-撩課大前端-面試寶典-第十五篇

15-撩課大前端-面試寶典-第十五篇

1.請描述一下 cookies,sessionStorage 和 localStorage 的區別?

  cookie是網站為了標示使用者身份而儲存在使用者本地終端(Client Side)上的資料(通常經過加密)。
  cookie資料始終在同源的http請求中攜帶(即使不需要),記會在瀏覽器和伺服器間來回傳遞。
  sessionStorage和localStorage不會自動把資料發給伺服器,僅在本地儲存。

  儲存大小:
  	cookie資料大小不能超過4k。
  	sessionStorage和localStorage 雖然也有儲存大小的限制,但比cookie大得多,可以達到5M或更大。

  有期時間:
  	localStorage    儲存持久資料,瀏覽器關閉後資料不丟失除非主動刪除資料;
  	sessionStorage  資料在當前瀏覽器視窗關閉後自動刪除。
  	cookie          設定的cookie過期時間之前一直有效,即使視窗或瀏覽器關閉

2.請解釋一下CSS3的Flexbox(彈性盒佈局模型),以及適用場景?

 一個用於頁面佈局的全新CSS3功能,Flexbox可以把列表放在同一個方向(從上到下排列,從左到右),並讓列表能延伸到佔用可用的空間。
   較為複雜的佈局還可以通過巢狀一個伸縮容器(flex container)來實現。
   採用Flex佈局的元素,稱為Flex容器(flex container),簡稱"容器"。
   它的所有子元素自動成為容器成員,稱為Flex專案(flex item),簡稱"專案"。
   常規佈局是基於塊和內聯流方向,而Flex佈局是基於flex-flow流可以很方便的用來做局中,能對不同螢幕大小自適應。
   在佈局上有了比以前更加靈活的空間。

3.為什麼要初始化CSS樣式?

因為瀏覽器的相容問題,不同瀏覽器對有些標籤的預設值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

  當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。

  最簡單的初始化方法: * {padding: 0; margin: 0;} (強烈不建議)

  淘寶的樣式初始化程式碼:
  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }

3.如何實現陣列的隨機排序?

  方法一:
  	var arr = [1,2,3,4,5,6,7,8,9,10];
  	function randSort1(arr){
  		for(var i = 0,len = arr.length;i < len; i++ ){
  			var rand = parseInt(Math.random()*len);
  			var temp = arr[rand];
  			arr[rand] = arr[i];
  			arr[i] = temp;
  		}
  		return arr;
  	}
  	console.log(randSort1(arr));
  	
  方法二:
  	var arr = [1,2,3,4,5,6,7,8,9,10];
  	function randSort2(arr){
  		var mixedArray = [];
  		while(arr.length > 0){
  			var randomIndex = parseInt(Math.random()*arr.length);
  			mixedArray.push(arr[randomIndex]);
  			arr.splice(randomIndex, 1);
  		}
  		return mixedArray;
  	}
  	console.log(randSort2(arr));

  方法三:
  	var arr = [1,2,3,4,5,6,7,8,9,10];
  	arr.sort(function(){
  		return Math.random() - 0.5;
  	})
  	console.log(arr);

4.javascript 程式碼中的"use strict";是什麼意思 ? 使用它區別是什麼?

 use strict是一種ECMAscript 5 新增的(嚴格)執行模式,這種模式使得 Javascript 在更嚴格的條件下執行,

 使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為。
 預設支援的糟糕特性都會被禁用,比如不能用with,也不能在意外的情況下給全域性變數賦值;
 全域性變數的顯示宣告,函式必須宣告在頂層,不允許在非函式程式碼塊內宣告函式,arguments.callee也不允許使用;
 消除程式碼執行的一些不安全之處,保證程式碼執行的安全,限制函式中的arguments修改,嚴格模式下的eval函式的行為和非嚴格模式的也不相同;

 提高編譯器效率,增加執行速度;
 為未來新版本的Javascript標準化做鋪墊。

5.http狀態碼有那些?分別代表是什麼意思?

100-199 用於指定客戶端應相應的某些動作。 
200-299 用於表示請求成功。 
300-399 用於已經移動的檔案並且常被包含在定位頭資訊中指定新的地址資訊。 
400-499 用於指出客戶端的錯誤。400    1、語義有誤,當前請求無法被伺服器理解。401   當前請求需要使用者驗證 403  伺服器已經理解請求,但是拒絕執行它。
500-599 用於支援伺服器錯誤。 503 – 服務不可用