2020了，初/中級前端面試你應該知道的（上）

2020 年 5 月 3 日
筆記
原創, 面試

1. 項目介紹

簡單介紹

2. 項目中遇到的問題

簡單介紹

3. 最近一個項目用到哪些技術

Vue，Vant，對接微信小程式和支付寶小程式

4. 移動端適配方案

①　定高適配

②　流式布局

③　響應式布局

④　Rem適配

5. 數組的求最大值，排序，刪除

冒泡排序，arr.sort(( a, b )=>{ b-a }), splice(0, 1, ***)

6. 清除浮動

(1) 父級div定義 height

(2) 結尾處加空div標籤 clear:both

(3) 父級div定義偽類:after 和 zoom

(4) 父級div定義 overflow:hidden

(5) 父級div定義 overflow:auto

(6) 父級div定義 display:table

7. Es6的新特性

新增了塊級作用域(let,const)
提供了定義類的語法糖(class)
新增了一種基本數據類型(Symbol)
新增了變數的解構賦值
新增了箭頭函數
數組新增了一些API，如 isArray / from / of 方法
對象和數組新增了擴展運算符
新增了模組化(import/export)
新增了 Set 和 Map 數據結構
原生提供 Promise構造函數

8. 說說你了解的promise

Promise是一個構造函數，用來解決非同步操作的

promise有三種狀態: fulfilled, rejected, pending.

Promise 的優點:

一旦狀態改變，就不會再變，任何時候都可以得到這個結果

可以將非同步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數

Promise 的缺點:

無法取消 Promise

當處於pending狀態時，無法得知目前進展到哪一個階段

Promise的構造函數是同步執行的；then 中的方法是非同步執行的。

Promise 是微任務，setTimeout 是宏任務，同一個事件循環中，promise.then總是先於 setTimeout 執行。

9. Css3做輪播圖原理

我們會在同樣的位置準備好多個大小相同的圖片，並且橫放在div容器內，然後在div容器之上設置一個展示容器，其中展示容器的大小和圖片大小相同，最後給圖片容器添加自定義動畫，並且在動畫不同階段設置遞增的偏移值。

首先必須保證展示容器大小與圖片大小相同，再為圖片添加float效果，然後確定插入的圖片數量並且為每個圖片設置動畫階段，其中每個階段都是通過使用keyframes設置遞增的margin-left值達到切換的效果。

10. let, const和var

let 和 const 定義的變數不會出現變數提升，而 var 定義的變數會提升。
let 和 const 是JS中的塊級作用域
let 和 const 不允許重複聲明(會拋出錯誤)
let 和 const 定義的變數在定義語句之前，如果使用會拋出錯誤(形成了暫時性死區)，而 var 不會。
const 聲明一個只讀的常量。一旦聲明，常量的值就不能改變(如果聲明是一個對象，那麼不能改變的是對象的引用地址)

const只是一個指針，指向一個記憶體空間，記憶體空間的內容可以改變，但是const指向一個新的空間就會會拋出錯誤

11. 如何做個三角形

設置width: 0; height: 0;border-left，border-right為50px solid transpa’rent；border-bottom：50px solid red;即可

12. Vue的常用鉤子函數

beforeCreate

這個時候，this變數還不能使用，在data下的數據，和methods下的方法，watcher中的事件都不能獲得到；

created

這個時候可以操作vue實例中的數據和各種方法，但是還不能對“dom”節點進行操作；

mounted

這個時候掛載完畢，這時dom節點被渲染到文檔內，一些需要dom的操作在此時才能正常進行。
注意：mounted在整個實例的生命周期中只執行一次。

computed

是把所有需要依賴其他值計算的值寫成對象的key值。

watch

把監聽的值寫成對象的key值

13. 如何隱藏一個元素，會不會引起重繪和迴流

①　display: none;

②　position:absolute;left: -99999px;

③　margin-left: -99999px;height: 0;

④　transform: scale(0);height: 0;

⑤　opacity: 0;

⑥　visibility: hidden;

⑦　position: relative;z-index: -999;

迴流必將引起重繪，而重繪不一定會引起迴流。比如：只有顏色改變的時候就只會發生重繪而不會引起迴流
當頁面布局和幾何屬性改變時就需要迴流
比如：添加或者刪除可見的DOM元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變

14. Vue載入完成在哪個階段，在created可以Windows查詢嗎

完成是在mounted,created可以windows查詢

15. H5和Css3的新特性

H5新特性：

1. 拖拽釋放(Drag and drop) API

2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

3. 音頻、影片API(audio,video)

4. 畫布(Canvas) API

5. 地理(Geolocation) API

6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

7. sessionStorage 的數據在瀏覽器關閉後自動刪除

8. 表單控制項，calendar、date、time、email、url、search

9. 新的技術webworker, websocket, Geolocation

10.本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；sessionStorage 的數據在瀏覽器關閉後自動刪除。

Css3的新特性：

顏色：新增RGBA，HSLA模式
文字陰影（text-shadow、）
邊框：圓角（border-radius）邊框陰影： box-shadow

4. 盒子模型：box-sizing

5. 背景：background-size 設置背景圖片的尺寸background-origin 設置背景圖片的原點

background-clip 設置背景圖片的裁切區域，以」，」分隔可以設置多背景，用於自適應布局

漸變：linear-gradient、radial-gradient

7. 過渡：transition，可實現動畫

8. 自定義動畫

9. 在CSS3中唯一引入的偽元素是：：selection.

10. 媒體查詢，多欄布局

11. border-image

12. 2D/3D轉換

16. 介紹下盒模型，如何轉換

所有HTML元素可以看作盒子，在CSS中，“box model”這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素

Margin(外邊距) – 清除邊框外的區域，外邊距是透明的。

Border(邊框) – 圍繞在內邊距和內容外的邊框。

Padding(內邊距) – 清除內容周圍的區域，內邊距是透明的。

Content(內容) – 盒子的內容，顯示文本和影像。、

如何轉換：

box-sizing值為content-box時：即標準盒模型

box-sizing值為border-box時：即怪異盒模型

17. js數據類型，基本類型和引用類型區別

基本數據類型： Number， String，Bollean，Null，Undefined, Symbol(Es6新增)

引用數據類型： Array， Object， Function

區別：

基本數據類型指的是簡單的數據段，引用數據類型指的是有多個值構成的對象。

基本數據類型是按值訪問的，因為可以直接操作保存在變數中的實際值。引用數據類型是保存在堆記憶體中的對象。複製變數和參數傳遞不同。

18. 如何解決用戶登錄許可權判斷

在每一個路由的 meta 屬性里，將能訪問該路由的角色添加到 roles 里。用戶每次登陸後，將用戶的角色返回。然後在訪問頁面時，把路由的 meta 屬性和用戶的角色進行對比，如果用戶的角色在路由的 roles 里，那就是能訪問，如果不在就拒絕訪問。

19. 如何解決跨域問題

1.比如jsonp;在頁面中添加script標籤,通過src屬性請求不同域的js程式碼,只能支援get請求.

2. window.postMessage

3. 跨域資源共享（CORS）

4. nginx正向代理代理客戶端，反向代理代理伺服器；反向代理，其實客戶端對代理是無感知的，因為客戶端不需要任何配置就可以訪問，我們只需要將請求發送到反向代理伺服器，由反向代理伺服器去選擇目標伺服器獲取數據後，在返回給客戶端，此時反向代理伺服器和目標伺服器對外就是一個伺服器，暴露的是代理伺服器地址，隱藏了真實伺服器IP地址。

15. Jsonp工作原理

利用<script>標籤沒有跨域限制的「漏洞」（歷史遺迹啊）來達到與第三方通訊的目的。當需要通訊時，本站腳本創建一個<script>元素，地址指向第三方的API網址，形如：
<script src=”//www.example.net/api?param1=1¶m2=2″></script>
並提供一個回調函數來接收數據（函數名可約定，或通過地址參數傳遞）。
第三方產生的響應為json數據的包裝（故稱之為jsonp，即json padding），形如：
callback({“name”:”hax”,”gender”:”Male”})
這樣瀏覽器會調用callback函數，並傳遞解析後json對象作為參數。本站腳本可在callback函數里處理所傳入的數據。

20. flex布局下如何換行

Flex-wrap: wrap;

21. 數組的常用方法有哪些，foreach和map有什麼區別

修改原數組的API有:

splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不修改原數組的API有:

slice/map/forEach/every/filter/reduce/entries/find

1、forEach()返回值是undefined，不可以鏈式調用。

2、map()返回一個新數組，原數組不會改變。

3、沒有辦法終止或者跳出forEach()循環，除非拋出異常，所以想執行一個數組是否滿足什麼條件，返回布爾值，可以用一般的for循環實現，或者用Array.every()或者Array.some();

4、$.each()方法規定為每個匹配元素規定運行的函數，可以返回 false 可用於及早停止循環。

22. 使用過slot插槽嗎，介紹下

slot 插槽可以在組件的內容預留一個位置.類似於 placeholder.

在需要的使用,把你需要的任何內容填充進去.

單個 Slot
在子組件內使用特殊的<slot>元素就可以為這個子組件添加一個 slot (插槽),在父組件模板里,插入在子組件標籤內的所有內容將替代子組件的<slot>標籤及它的內容.

23. Vuex的理解

Vuex簡單說就是全局狀態管理的,項目中常常需要有幾個參數所有組件都要用,或者同級組件之間的數據傳遞和通訊。此時使用vuex非常方便開發。

核心屬性為：state，getter，mutation，action，module

state：存儲數據，存儲狀態；在根實例中註冊了store 後，用 this.$store.state 來訪問；對應vue裡面的data；存放數據方式為響應式，vue組件從store中讀取數據，如數據發生變化，組件也會對應的更新。

getters：可以認為是 store 的計算屬性，相當於 vue中的 computed，依賴於 state裡面的值。它的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。

mutations：用於修改狀態，store裡面的數僅能通過mutations裡面的方法改變,但是必須是同步的。更改 vuex 的 store 中的狀態的唯一方法是提交 mutation，也就是$store.commit。

actions：包含任意非同步操作，用它處理完後再觸發mutations來改變狀態。

module：將 store 分割成模組，每個模組都具有state、mutation、action、getter、甚至是嵌套子模組。

24. v-if和v-show的區別

手段：v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是通過設置DOM元素的display樣式屬性控制顯隱

編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件；v-show只是簡單的基於css切換

編譯條件：v-if是惰性的，如果初始條件為假，則什麼也不做；只有在條件第一次變為真時才開始局部編譯（編譯被快取？編譯被快取後，然後再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然後被快取，而且DOM元素保留

性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗

使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換

相同點 v-show 都可以動態控制著dom元素的顯示隱藏

不同點：v-if 的顯示隱藏是將DOM元素整個添加或刪除，v-show 的顯示隱藏是為DOM元素添加css的樣式display，設置none或者是block，DOM元素是還存在的

在渲染多個元素的時候，可以把一個元素作為包裝元素，並使用v-if 進行條件判斷，最終的渲染不會包含這個元素，v-show是不支援語法

25. 項目開發中git的使用，如何合併

一. git clone項目到本地

在多人開發中，一般的項目有master和其他分支，那麼clone操作就需要你指定對應的分支把項目工程clone到本地，

1.首先新建一個空文件夾，把文件夾進行git初始化操作,在文件夾的根目錄下，右鍵選擇git bash here，在彈出的窗體中輸入命令：git init

這樣就把該文件夾git初始化了

2.接下來就是clone操作了，繼續輸入命令：git clone xx(此處為你的項目的git地址），一般這個命令clone下來的是master分支的項目，你也可以clone指定分支的工程，命令：git clone -b 分支名 git地址

二. 使用git把本地項目提交到github

1.如果該工程沒有git初始化，那麼在工程根目錄下使用git init進行初始化，如果已經初始化，則省略這步

2.將項目的文件添加到倉庫中使用git add，（git add . ）表示將所有文件都添加，（git add xx(指定文件)）表示將指定文件添加進去

3.將add的文件commit到倉庫，命令：git commit -m “你想寫的注釋“

4.將本地的倉庫關聯到github上，命令如下：git remote add origin xxx（此處為你的git地址）

5.在進行push之前，先進行pull操作，命令如下：git pull origin xxx(此處為你的分支名，master或者其他分支名)

6.上傳程式碼到github遠程倉庫，命令如下：git push -u origin xxx（此處為你的分支名），在這個步驟中可能會有彈窗要你輸入你的用戶名和密碼，按照指示操作即可

衝突是如何解決的

情況1：無衝突

先拉取遠端程式碼，更新本地程式碼。然後提交自己的更新程式碼即可。

情況2：有衝突

拉去遠端程式碼，存在衝突，會報錯。此時我們需要將本地程式碼暫存起來stash;更新本地程式碼，將本地程式碼版本更新和遠端的程式碼一致，將暫存的程式碼合併到更新後的程式碼後，有衝突的要手動解決衝突，然後提交解決衝突後的程式碼。

Tags: 原創面試