2020年面試題等你來刷-高階前端請繞過

笨鍾發表於2020-06-19

1.行塊元素的區別？

1.行內元素與塊級函式可以相互轉換，通bai過修改display屬性值來切du換塊級元素和行內元素，行zhi內元素display：inline，塊級元素display：block。

2.行內元素和其他行內元素都會在一條水平線上排列，都是在同一行的；塊級元素卻總是會在新的一行開始排列，各個塊級元素獨佔一行，垂直向下排列，若想使其水平方向排序，可使用左右浮動（float：left/right）讓其水平方向排列。

3.行內元素不可以設定寬高，寬度高度隨文字內容的變化而變化，但是可以設定行高（line-height），同時在設定外邊距margin上下無效，左右有效，內填充padding上下無效，左右有效；塊級元素可以設定寬高，並且寬度高度以及外邊距，內填充都可隨意控制。

4.塊級元素可以包含行內元素和塊級元素，還可以容納內聯元素和其他元素；行內元素不能包含塊級元素，只能容納文字或者其他行內元素。

2.Css有哪些選擇器

（陳年舊題）
類別選擇器、標籤選擇器、ID選擇器、後代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器

3.V-if與v-show的區別

區別：
v-if只有當指令的表示式返回值為true的時候才會被渲染，為false的時候，元素是不存在於文件中的；而v-show則不管指令表示式的返回值是什麼，都會被渲染，並且只是基於css的樣式切換，元素始終存在於文件中。

什麼時候用v-if？什麼時候用v-show？
綜合上述，可以看出，v-if在切換過程中會有更多效能上的花銷；而v-show則在頁面初次載入時就渲染完成，後期不會佔用更多的效能花銷。所以，如果需要頻繁地切換，則使用v-show指令比較好。反之則使用v-if 比較好。

4.vue中有多少種傳值方式

props和$emit(常用)
$a t t r s 和$ listeners
中央事件匯流排（非父子元件間通訊）
v-model
provide和inject（只能單向）
$p a r e n t 和$ children
vuex
具體：https://www.cnblogs.com/barryzhang/p/10566515.html

5.登入、註冊防禦功能流程

6.祖孫後代傳值，如何進行往上傳值

$a t t r s 和$ listeners

7.provide和inject

provide 和 inject 繫結並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的物件，那麼其物件的屬性還是可響應的。

8.登入token的攜帶，是請求頭還是請求體？對於放在請求的資料會出現什麼攻擊？如何解決？

token驗證機制過程：

登入時,客戶端通過使用者名稱與密碼請求登入
服務端收到請求去驗證使用者名稱與密碼
驗證通過,服務端會簽發一個Token,再把這個Token以響應發給客戶端.
客戶端收到Token,儲存到本地,如Cookie,SessionStorage,LocalStorage.我們是存在cookie
客戶端每次像伺服器請求API介面時候,都要帶上Token.
客戶端每次跳轉路由的時候也要驗證Token登入態
服務端收到請求,驗證Token,如果通過就返回資料,否則提示報錯資訊.

9.v-model是預設修改prop的什麼屬性和方法

自定義元件v-model：一個元件上的 v-model 預設會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、核取方塊等型別的輸入控制元件可能會將 value 特性用於不同

10.web安全問題

xss: 跨站指令碼攻擊，程式碼注入。

在 HTML 中內嵌的文字中，惡意內容以 script 標籤形成注入。
在內聯的 JavaScript 中，拼接的資料突破了原本的限制（字串，變數，方法名等）。
在標籤屬性中，惡意內容包含引號，從而突破屬性值的限制，注入其他屬性或者標籤。
在標籤的 href、src 等屬性中，包含 javascript: 等可執行程式碼。
在 onload、onerror、onclick 等事件中，注入不受控制程式碼。
在 style 屬性和標籤中，包含類似 background-image:url(“javascript:…”); 的程式碼（新版本瀏覽器已經可以防範）。
在 style 屬性和標籤中，包含類似 expression(…) 的 CSS 表示式程式碼（新版本瀏覽器已經可以防範）。
總之，如果開發者沒有將使用者輸入的文字進行合適的過濾，就貿然插入到 HTML 中，這很容易造成注入漏洞。攻擊者可以利用漏洞，構造出惡意的程式碼指令，進而利用惡意程式碼危害資料安全。
https://tech.meituan.com/2018/09/27/fe-security.html

CSRF（Cross-site request forgery），中文名稱：跨站請求偽造

CSRF（Cross-site request forgery），中文名稱：跨站請求偽造，也被稱為：one click attack/session riding，縮寫為：CSRF/XSRF。你這可以這麼理解CSRF攻擊：攻擊者盜用了你的身份，以你的名義傳送惡意請求。CSRF能夠做的事情包括：以你名義傳送郵件，發訊息，盜取你的賬號，甚至於購買商品，虛擬貨幣轉賬…造成的問題包括：個人隱私洩露以及財產安全。
https://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html

11.token是放在請求頭中

在使用JSON Web Token作為單點登入的驗證媒介時，為保證安全性，建議將JWT的資訊存放在HTTP的請求頭中，並使用https對請求連結進行加密傳輸
１.由於專案是前後端分離的，不可避免的就產生了跨域問題，導致Authorization始終無法新增到請求頭中去，
原因：理論請看這篇文章：（點這裡），簡單來說就是，當在進行跨域請求的時候，如圖自定義請求頭，如新增Authorization欄位，那麼HTTP請求會發出一個預檢請求，即OPTIONS請求，訪問伺服器是否允許該請求，如果瀏覽器沒有進行跨域設定，則就會出現如上圖所示的錯誤。
解決辦法：瀏覽器設定跨域處理，這裡介紹最簡單的方式
後臺：
1.引用跨域處理的jar包
2.在Web.xml中新增如下配置：
前端：
1.Ajax新增Token到Header中的方法
2.Anjular新增Token到Header中的方法

12.去重

Var a=new set (b)
Var c=Array.from(a)

var c = […Set(b)]

13.陣列深度去重去除陣列中key值相同的物件

const arr = [
{“weight”:10,“id”:1},
{“weight”:20,“id”:2},
{“weight”:30,“id”:2},
{“weight”:40,“id”:4},
{“weight”:50,“id”:5}
]

let obj = {}
arr.map(item => {
obj[item.id] = item
})
let result = Object.values(obj)
console.log(result);

14.rem與em？

(考這個題我也不知道面試官是怎麼想的，使用頻率不高，給我有種炒閒飯的味道，不過還是看下吧)
rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字型大小的單位。

750的設計稿，量的是200，如何設定rem？

15.類陣列如何轉換為陣列

第一次聽說類陣列？後面百度了一下才發現你原來還有一個名字
什麼是類陣列：
https://www.cnblogs.com/zhen-prz/p/10145254.html

16.如何判斷什麼是陣列

instanceof
2.Array.isArray
3.原型鏈：constructor
4.array特徵
function isArray(obj){
return obj && //排除 null ， undefined
typeof obj ===‘object’ && //排除number，string，boolean
obj.propertyIsEnumerable(length); //排除object

}

17.ios與安卓的相容適配問題；

18.什麼是防抖什麼是節流？（記得背程式碼，人家不要你懂原理，90%被問）

https://www.jianshu.com/p/c8b86b09daf0

防抖/節流：使用場景：網路不好，小白使用者給伺服器造成的壓力防抖控制次數，節流控制頻率

防抖：定義：觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間
缺點：如果事件在規定的時間間隔內被不斷的觸發，則呼叫方法會被不斷的延遲
視訊教程：https://www.bilibili.com/video/BV184411q7sa

// 防抖

function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 處理函式
function handle() {    
    console.log(Math.random()); 
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));

節流：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率
視訊教程：https://www.bilibili.com/video/BV1a4411q7Jx/?spm_id_from=333.788.videocard.0

var throttle = function(func, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

19.Vue實現樹元件？

https://blog.csdn.net/qq_34439125/article/details/99205526

20.如何理解瀏覽器核心？

瀏覽器核心可以分為兩部分:

渲染引擎
第一步: 解析程式碼, 將html程式碼解析為DOM, 將CSS程式碼解析為CSSOM;
第二步: 物件合成, 將DOM和CSSOM合成為一棵渲染樹;
第三步: 佈局, 計算出渲染樹的位置;
第四步: 繪製, 將渲染樹繪製到螢幕上;
JS引擎
第一步: 讀取程式碼, 進行詞法分析, 將程式碼分解為詞元;
第二步: 對詞元進行語法分析, 並將程式碼整理成語法樹;
第三步: 使用翻譯器, 將程式碼轉換為位元組碼;
第四步: 使用位元組碼直譯器, 將位元組碼轉換為機器碼並執行;

21.如何讓第二個radio元素進行選中？

$(’:radio[name=“sex”]:checked’).val()

22.jqery中的.each()是什麼函式？怎麼使用？

jqery中的.each()也是$.each()函式
$.each(collection, callback(indexInArray, valueOfElement) )

23.extend()是什麼函式？怎麼使用？

.jQuery.extend() 函式用於將一個或多個物件的內容合併到目標物件

24.document.ready與window.onload的區別？

document.ready方法在DOM樹載入完成後就會執行，而window.onload是在頁面資源（比如圖片和媒體資源，它們的載入速度遠慢於DOM的載入速度）載入完成之後才執行。
也就是說$(document).ready要比window.onload先執行。

25.jquery與js的轉換

1、js物件轉換成jquery物件。 $(js物件);
2、jquery物件轉換成js物件。 (1)jquery物件[索引值] (2)jquery物件.get(索引值)

26.原型，原型鏈：

原型：prototype是通過呼叫建構函式而建立的那個物件例項的原型物件。使用原型物件的好處是可以讓所有物件例項共享它所包含的屬性和方法。
prototype是一個指標，指標指向一個物件，而這個物件可以共享物件的所有共有屬性和方法；
原型鏈：原型物件都包含一個指向建構函式的指標，而例項都包含一個指向原型物件的內部指標。例項包含原型物件，原型物件又指向另一個例項，從而實現例項與原型的鏈條。這個鏈條就是原型鏈。

27.如何獲取當前時間

Date t = new Date();
SimpleDateFormat df = new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);
function getTime(){
var date = new Date(); //建立時間物件
var year = date.getFullYear(); //獲取年
var month = date.getMonth()+1;//獲取月
var day = date.getDate(); //獲取當日
var time = year+"-"+month+"-"+day; //組合時間
alert(“當前日期：”+time);
}

28.什麼是巨集任務什麼是微任務？

js中用來存書帶執行回撥函式的佇列包含2個不同特定的列隊

巨集列隊：用來儲存待執行的巨集任務（回撥），比如：定時器回撥/DOM事件回撥/ajax回撥

微列隊：用來儲存待執行的微任務（回撥），比如：promise的回撥/mutationObserver的回撥

js執行時會區別這2個佇列

js引擎首先必須先執行所有的初始化同步任務程式碼
每次準備取出第一個巨集任務執行前，都要將所有的微任務一個一個取出來執行

圖片: https://uploader.shimo.im/f/L0u7cUBzAmg4OfeG.png

29.移動端開發安卓和ios相容性的那些坑以及解決方案？

（平時記得整理，面試的時候幫我吊打面試官）
具體的：

30.盒模型

box-sizing: content-box;/border-box;
content-box就是用元素的width和height覺得元素的高寬，這就意味著元素的padding和border等不能算在width和height中

31.去重