2019年7-8月份前端面試題

記錄我最近面試缺漏的知識點

css

1.bootstrap如何實現手機PC端自適應

媒體查詢

2.flex佈局

父容器：（記得經常使用屬性）
display:flex
flex-direction： row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch

3. 多行文本與單行文本的省略

單行：width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 
多行：1. width:100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 
line-clamp屬性是爲了控制文本顯示多少行。說明：必須定義display屬性才能夠對box進行劃分。 box-orient 屬性指定一個box子元素是否應按水平或垂直排列。        
2. :afert在最後加個背景圖而後加上省略號   
3.插件

js:

1.$和dom對象轉化

經過$符號 $(document)

2.jq鏈式調用原理

return 實現鏈式調用 （可研讀jq源碼）

3.$this 和 this區別

$(this)表示的是用jquery封裝候的當前對象
 this表示的是javascript提供的當前對象

4.websocket基於什麼協議

TCP

5.TCP和HTTP區別

TCP傳輸層協議 HTTP應用層協議

6.canvas和svg區別

Canvas 能以.png .jpg格式保存圖像，依賴分辨率，不支持事件處理器，適合圖像密集型的遊戲（被頻繁重繪）
 Svg 是矢量圖像，不依賴分辨率，支持事件處理器，適合大型渲染應用程序，不適合遊戲應用

7.xss、csrf攻擊

XSS(Cross-Site Scripting，跨站腳本攻擊)是一種代碼注入攻擊。攻擊者在目標網站上注入惡意代碼，當被攻擊者登錄網站時就會執行這些惡意代碼，這些腳本能夠讀取 cookie，session tokens，或者其它敏感的網站信息，對用戶進行釣魚欺詐，甚至發起蠕蟲攻擊等。
XSS 的本質是：惡意代碼未通過濾，與網站正常的代碼混在一塊兒；瀏覽器沒法分辨哪些腳本是可信的，致使惡意腳本被執行。因爲直接在用戶的終端執行，惡意代碼可以直接獲取用戶的信息，利用這些信息冒充用戶向網站發起攻擊者定義的請求。

Xss解決方案：代碼嚴謹 加驗證 編碼

CSRF（Cross-site request forgery）跨站請求僞造：攻擊者誘導受害者進入第三方網站，在第三方網站中，向被攻擊網站發送跨站請求。利用受害者在被攻擊網站已經獲取的註冊憑證，繞事後臺的用戶驗證，達到冒充用戶對被攻擊的網站執行某項操做的目的。
 典型的CSRF攻擊流程：
 受害者登陸A站點，並保留了登陸憑證（Cookie）。
 攻擊者誘導受害者訪問了站點B。
 站點B向站點A發送了一個請求，瀏覽器會默認攜帶站點A的Cookie信息。
 站點A接收到請求後，對請求進行驗證，並確認是受害者的憑證，誤覺得是無辜的受害者發送的請求。
 站點A以受害者的名義執行了站點B的請求。
 攻擊完成，攻擊者在受害者不知情的狀況下，冒充受害者完成了攻擊。

Csrf解決方案：

1. 添加驗證碼(體驗很差)
2. 判斷請求的來源：檢測Referer(並不安全，Referer能夠被更改)
3. 使用Token(主流)
4. Samesite Cookie屬性

8.cookie和session區別 cookie如何實現session （須要依靠後臺） 同源策略 能夠跨域嗎

9.解決跨域的方法

jsonp、cors、iframe

10.css3新特性

新增了選擇器，僞類，樣式屬性

11.如何實現一個音頻播放 資源不被竊取

使用flash

12.如何實現發微博還剩多少字 漢字英文 表情

正則驗證轉化Unicode

13.如何實現長鏈接

websocket  、 http keep-alive

14.原型鏈 、prototype是什麼 能夠實現繼承嗎

每一個對象都有一個__proto__屬性指向構造函數的prototype原型，在找一個對象的屬性或方法時，在自己上找不到就去原型上找，直到undefined。  
new Pet (實例)--（__proto__） ---->Pet.prototype
prototype主要來實現繼承（原型繼承）

15.實現繼承的幾種方式

16.原型繼承與new構造繼承的優缺點

原型繼承：
  核心： 將父類的實例做爲子類的原型
  缺點： 父類新增原型方法/原型屬性，子類都能訪問到，父類一變其它的都變了
構造繼承：
 核心：複製父類的實例屬性給子類
 缺點： 方法都在構造函數中定義， 只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法，沒法實現函數複用，每一個子類都有父類實例函數的副本，影響性能

17.如何作緩存 瀏覽器如何實現緩存

1.localstorage
2.vue keep-alive
對cache-control、etag、expires、last-modified的理解 使用

18.對window.proformance的理解

19.對Event-loop的理解

執行線程，macro-task(宏任務)：包括總體代碼script，setTimeout，setInterval，micro-task(微任務)：Promise，process.nextTick

先執行微任務再執行宏任務

20. 數組去重 數組扁平化

21.字符串拼接方法

1.「+」 
2.以數組做爲中介用 join 鏈接字符串  
3.es6:模板字符串 ``

22.閉包、垃圾回收的幾種方式

23.對node.js、npm有什麼瞭解

es6

1.遍歷器（iterator）

2.Generator yield

generator（生成器）是ES6標準引入的新的數據類型。一個generator看上去像一個函數，但能夠返回屢次。
 generator和函數不一樣的是，generator由function*定義（注意多出的*號），而且，除了return語句，還能夠用yield返回屢次。
 generator還有另外一個巨大的好處，就是把異步回調代碼變成「同步」代碼。

3.async await

async函數返回一個 Promise 對象，可使用then方法添加回調函數。當函數執行的時候，一旦遇到await就會先返回，等到異步操做完成，再接着執行函數體內後面的語句。
async函數內部return語句返回的值，會成爲then方法回調函數的參數。
async內的代碼是同步的

4.promise 狀態改變 裏面內容的同步異步

Promise 構造函數是同步執行的，promise.then 中的函數是異步執行的。

5.promise 和 async關係

6.箭頭函數和普通函數的區別

① 箭頭函數是匿名函數，不能做爲構造函數，不能使用new
② 箭頭函數不綁定arguments,用rest參數替代
③ 箭頭函數不綁定this,會捕獲其所在上下文的this值做爲本身的this,任何方法（call,apply,bind）都改變不了其this指向
④箭頭函數沒有原型屬性
⑤箭頭函數不能當作Generator函數，不能使用yield關鍵字

7.filter reduce過濾器

filter : array.filter(callback [,that]);
對於回調，能夠指定數組元素的值「value」，數組元素的數字索引「index」以及存儲數組元素的數組對象「arrayObj」。
對於每一個數組元素，callbak返回true的元素將生成爲新數組，callcak未返回true的元素將被跳過，而且不包含在新數組中。
var data = [1, 4, 7, 12, 21];var result = data.filter(function(value) {return value % 2 === 1;});console.log(result);

reduce普通用法: 數組求和，求乘積 var sum = arr.reduce((x,y)=>x+y)； var mul = arr.reduce((x,y)=>x*y)
高級用法 ：（1）計算數組中每一個元素出現的次數
（2）數組去重
（3）將二維數組轉化爲一維
（3）將多維數組轉化爲一維（數組扁平化）
（4）、對象裏的屬性求和

8. Object.assign()

Object.assign方法用於對象的合併，將源對象（source）的全部可枚舉屬性，複製到目標對象（target）。
Object.assign方法的第一個參數是目標對象，後面的參數都是源對象。
注意，若是目標對象與源對象有同名屬性，或多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性。
若是隻有一個參數，Object.assign會直接返回該參數。
若是該參數不是對象，則會先轉成對象，而後返回。
因爲undefined和null沒法轉成對象，因此若是它們做爲參數，就會報錯。undefined和null不在首參數，就不會報錯。
Object.assign拷貝的屬性是有限制的，只拷貝源對象的自身屬性（不拷貝繼承屬性），也不拷貝不可枚舉的屬性（enumerable: false）。

vue

1.對vue實例的瞭解

每一個 Vue.js 應用都是經過構造函數 Vue 建立一個 Vue 的根實例 啓動的：
 1.2.在實例化 Vue 時，須要傳入一個選項對象，它能夠包含數據、模板、掛載元素、方法、生命週期鉤子等選項。
 1.3.能夠擴展 Vue 構造器，從而用預約義選項建立可複用的組件構造器var MyConponent = Vue.extends({})
 1.4.全部的 Vue.js 組件其實都是被擴展的 Vue 實例

2.vue的雙向數據綁定 數據劫持defineProperty

採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

3.發佈-訂閱者模式 對Observer Compile Watcher的理解

4.slot插槽

插槽就是Vue實現的一套內容分發的API，將<slot></slot>元素做爲承載分發內容的出口。

沒有插槽的狀況下在組件標籤內些一些內容是不起任何做用的，當我在組件中聲明瞭slot元素後，在組件元素內寫的內容就會跑到它這裏了！

slot屬性對應的內容都會和組件中name一一對應。沒有名字的，就是默認插槽！！

做用域槽：在組件上的屬性，能夠在組件元素內使用。slot上面的屬性（slot-scope）和值組成的鍵值對。能夠把組件上的屬性/值，在組件元素上使用
5.nextTick函數

6.vuex

一個 Vuex 應用的核心是 store（倉庫，一個容器），store包含着你的應用中大部分的狀態 (state)。

適用於：中大型單頁應用，你可能會考慮如何把組件的共享狀態抽取出來，以一個全局單例模式管理，無論在哪一個組件，都能獲取狀態/觸發行爲，解決問題以下：
① 多個視圖使用於同一狀態：
傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力
② 不一樣視圖須要變動同一狀態：
採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝，一般會致使沒法維護的代碼

7.vueRouter

ps:以上均爲近期遇到我知識疏漏的面試題，其餘一些基礎類型知識點也是要掌握的。答案有參考官方文檔，本身看過的文章，有我本身總結的，若有錯誤，請嚴厲指正。