2019春招備戰

阿新 • • 發佈：2018-12-27

2019春招備戰

1. 如何讓IE8及以下支援HTML5？ 答：使用html5shiv.js或respond.js

<!--[if lt IE 9]>
  <script src = "html5shiv.js"></script>
  <script src = "respond.js"></script>
<![endif]-->

2.sessionStorage、localStorage和cookie的區別

共同點：都是儲存在瀏覽器端，且同源的。

不同點：1.cookie資料始終在同源的http請求中攜帶（即使是不需要的），即cookie始終在瀏覽器和伺服器間來回傳遞，而sessionStorage和localStorage不會自動把資料傳送給伺服器，僅在本地儲存。cookie資料還有路徑的概念，可以規定cookie只屬於某個路徑。

　　　　 2.儲存大小限制不同：cookie資料不能超過4KB，sessionStorage和localStorage可以達到5MB。

　　　　 3.資料有效期不同：cookie資料有效期預設瀏覽器會話結束，可以設定過期時間；sessionStorage僅在瀏覽器會話結束之前有效，可手動刪除；localStorage有效期為永久，可手動刪除；

　　　　 4.作用域不同：sessionStorage在不同的瀏覽器視窗中無法共享，即使是同一個頁面；localStorage和cookie在所有同源視窗中是共享的。

3.js和java的區別

出身不同：js是網景公司推出的指令碼語言，java是sun公司推出的程式設計語言；

語言型別不同：js是動態型別語言，java是靜態型別語言；

變數不同：js的變數是弱型別，即變數可以儲存任意型別的資料，直譯器在執行時檢查其資料型別，java的變數是強型別的，宣告時必須規定其資料型別；

程式碼格式不同：js可以裝載到HTML文件裡，其獨立的文件格式為*.js,java的程式碼以字串的形式儲存在獨立的文件中，格式為*.class;

4.css畫圓和三角

畫圓：border-radius:50%(寬高相同時) border-radius:100px(寬高為200px)

畫三角：width:0;height:0;border:100px solid transparent;border-top-color:red;

複合樣式：border-radius:左上右上右下左下;border-radius:左上右上/左下右下;border-radius:左上/右下右上/左下;border-radius:四角一樣; 單位：px/%

分樣式：border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius

css3圓角屬性 IE8及以下不支援

5.post和get區別

get請求一般用於獲取資料，速度快，post請求一般用於更新資料，速度相對慢；
get請求的引數拼接在url後面，不安全，post請求的引數作為HTTP訊息的實體內容傳送到伺服器，相對安全；
get請求的資料大小一般2~8KB，post請求的資料比較大，大小受伺服器的設定限制；
get請求會被瀏覽器快取，post請求預設不被快取。

6.post提交資料方式 Content-type規定http訊息主體以何種方式編碼，伺服器以此對主體進行解析。

application/x-www-form-urlencoded
application/json
multipart/form-data
text/xml

7.sort([callback]) 對陣列進行排序，返回排序後的陣列，會改變原陣列。無參、有參（引數必須為回撥）待手寫函式

無參：按照陣列元素的首字元的unicode碼進行升序 [1,2,5,3,0,1].sort() //[0,1,1,2,3,5] [1,2,5,"b",3,0,1,"a"].sort() //[0, 1, 1, 2, 3, 5, "a", "b"]
有參：arr.sort((a,b) => a-b) 升序 arr.sort((b,a) => b-a) 降序無法對字母進行升序排序 [1,2,1,"b","a"].sort((a,b)=>a-b) //[1, 1, 2, "b", "a"]

8.css隱藏元素的幾種方法及區別

display:none;元素從頁面上徹底消失，不佔據空間，其他元素會佔據它原來的空間，這就導致了瀏覽器的重排和重繪，無法觸發點選事件；
visibility:hidden;元素從頁面上消失，他佔據的空間依然保留著，所以瀏覽器只會重繪不會重排，無法觸發點選事件；
opacity:0;視覺隱藏，透明度設為0，佔據空間，依然存在頁面中，可以觸發點選事件。

9.重排和重繪

瀏覽器渲染是基於流式佈局模型的

重排(迴流/reflow)：瀏覽器渲染介面是根據渲染物件的資訊，計算出渲染物件的幾何資訊（DOM物件的位置和尺寸大小），將其安置在介面上的正確位置，當DOM物件發生改變（大小、佈局、消失）時，重新計算DOM結構，重新佈局介面，引發重排；

觸發重排的條件：

頁面初始化
元素尺寸改變——外邊距，大小，邊框，填充
瀏覽器視窗大小改變
新增或刪除可見的DOM元素
元素位置改變，或使用動畫
元素內容改變，引起寬高改變

重繪：當一個元素的外觀發生改變的時候，瀏覽器會根據元素的新屬性重新繪製元素的外觀。

觸發重繪的條件：color,border-radius,background,box-shadow等等。

重排必定引發重繪，重繪不一定引發重排。

10.找出陣列中的最大值

(1).Math.max()：傳入一組引數，返回最大值，不傳引數返回-Infinity，當引數中存在不能轉成數值的引數時，返回NaN。例1：ES6結合擴充套件運算子 Math.max(...[1,2,3,4,5]) //5 例2：ES5結合apply()方法 ,apply()方法可以將陣列轉成一組引數傳入Math.max()方法 Math.max.apply(null,[1,2,3,4,5]) //5

(2).sort()：arr.sort((a,b) => b-a) 最大值arr[0]

(3).for迴圈

var arr = [1,2,3,4,10,7];
var max = arr[0];
for(var i = 0;i < arr.length;i++){
    max = max < arr[i+1] ? arr[i+1] : max;
}

reduce()：

11.陣列去重

(1).var newarr = [...new Set(arr)] Array.from(new Set(arr))

(2).雙重for迴圈，外層迴圈元素，內層迴圈比較值，值相同刪除後者，陣列長度也減1

let arr1 = [1,1,2,2,3,3,4];
let len = arr1.length;
function quchong(arr) {
   for (let i = 0;i < len;i++){
     for (let j = i+1;j < len;j++){
       if (arr[i] === arr[j]){
          arr.splice(j,1);
          len--;
          j--;
       }
     }
   }
   console.log(arr);
}
quchong(arr1); //[1,2,3,4]

(3).

let arr1 = [1,1,2,2,3,3,4];
let len = arr1.length;
function quchong1(arr){
  let newarr = [];
for (let i = 0;i < len;i++){
    for (let j = i+1;j < len;j++){
if (arr[i] === arr[j]){
continue;
 }
 }
 newarr.push(arr[i]);
 }
 console.log(newarr);
}
quchong1(arr1); //[1,2,3,4]

12.margin:50%;相對於父級寬度。padding:50%;相對於父級寬度。

13.事件委託或事件代理

javascript高階程式設計：事件委託就是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件。

個人理解：當頁面上需要觸發事件的元素過多時，為了避免記憶體洩漏，我們藉助事件冒泡機制，將子元素的事件委託到父元素身上。

為什麼要使用事件委託：在js中，新增到頁面上的事件處理程式的數量將直接關係到頁面的整體執行效能，因為需要不斷的與DOM節點進行互動，訪問DOM節點的次數也就越多，引起瀏覽器重繪和重排的次數就越多，就會延長整個瀏覽器的互動就緒時間。

事件委託原理：藉助事件冒泡原理

優點：可以節省記憶體，減少事件註冊，新増子元素時，無須再對其進行事件繫結。

缺點：如果所有事件都用事件委託，可能出現事件誤判。

<ul id="box">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

let ulbox = document.getElementById("ul");
ulbox.onclick = function (ev) {
   let e = ev || window.event;
   let target = e.target || e.srcElement;
   if (target.nodeName.toLowerCase() == "li"){
      console.log("我其實點選的是li");
   }
}

14.標準盒模型和IE盒模型（怪異盒模型）

標準盒模型：box-sizing:content-box;

盒子的寬度：width+padding(左右)+border(左右)+margin(左右);

盒子的高度：height+padding(上下)+border+(上下)+margin(上下);

IE盒模型：box-sizing:border-box;

盒子的寬度：width(content+border+padding)+margin(左右);

盒子的高度：height(content+border+padding)+margin(上下);

切換盒模型：box-sizing

15.H5語義化標籤

使用語義化標籤的好處：

程式碼結構清晰，易於閱讀，利於維護
有利於seo搜尋引擎優化
方便其他裝置解析，如螢幕閱讀器，盲人閱讀器，移動裝置

16.this指向問題

this是js的一個關鍵字，this指向在函式定義時是無法確定的，只有在函式呼叫時才能確定，this指向直接呼叫它的物件。

函式自執行：get() 相當於作為window物件的方法執行，this指向window物件；
作為物件的方法呼叫：obj.get() this指向obj，a.b.get() this指向b;
建構函式：let person = new Person() 建構函式的this指向例項化物件;
箭頭函式的this：箭頭函式沒有自己的this，它使用外層程式碼塊的this。

17.正則表示式

正則表示式：一套規則，用於檢索、替換、校驗符合某個(模式)規則的字串。

正則物件建立方法：1.物件字面量 let reg = /124/; 2.建構函式 let reg = new RegExp("124");

reg.test(str) 用於檢測字串是否匹配某個模式，true匹配，false不匹配。reg.test("124fefe"); //true

18.刪除陣列元素的方法

arr.shift()：刪除並返回陣列的第一個元素,改變原陣列；[2,3,4].shift() //2

arr.pop()：刪除並返回陣列的最後一個元素，改變原陣列；[2,3,4].shift() //4

arr.splice(index,howmany,item1,...,itemN)：向陣列中新增，刪除或替換元素，返回被刪除元素組成的陣列，會改變原陣列

index：索引 howmany：刪除幾個 item1,...,itemN：向陣列新增的元素

刪除：[1,2,3].splice(0,2) //[1,2] 原陣列：[3]

新增：[1,2,3].splice(1,0,2) //[] 原陣列：[1,2,2,3]

替換：[1,2,3].splice(1,1,5) //[2] 原陣列：[1,5,3]

19.長度為10的陣列，在其索引為15的位置上新增元素會報錯嗎？為什麼？

不會

20.http和https的區別

http:超文字傳輸協議，常用於web瀏覽器和伺服器之間傳遞資訊，不進行任何的資料加密；

https:以安全為目的的通道，即http的安全版，在http的基礎上加入了SSL協議，SSL依據證書來驗證伺服器的身份，併為瀏覽器和伺服器的通訊加密；

https主要作用：1.建立一個資訊保安通道,保證資料傳輸的安全；2.確認網站的真實性。

http和https的區別：

https協議需要到ca申請證書，一般免費證書較少，需要花費一定的費用
http協議明文傳輸，不對資料加密，https協議是由SSL+HTTP協議構建的可進行加密、身份認證的網路協議，比http安全
http協議的，預設埠是80，https的預設埠是443.

https優點：1.安全，非絕對安全；2.有利於網站排名；

https缺點：1.握手階段費時，頁面載入時間延長近50%；2.需要花錢；3.連線快取不如http高效。

http切換到https：http改為https。相容：去掉http頭部，//www.baidu.com，http入口自動加http，https入口自動加https。

參考：https://www.cnblogs.com/wqhwe/p/5407468.html

2019春招備戰