① 史上最全前端vue面試題！推薦收藏
1.為什麼會形成跨域？
不是一個源的文件操作另一個源的文件就會形成跨域。當請求端的協議、域名、埠號和伺服器的協議、域名、埠號有一個不一致就會發生跨域。
解決方法：安裝插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue組件裡面，通過dispatch來出發actions提交修改數據的操作。
② 然後再通過actions的commit來出發mutations來修改數據。
③ mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心裏面的數據狀態）裡面的數據。
④ 最後由store觸發每一個調用它的組件更新。
3.vuex是什麼？怎麼使用？
vuex是一個專為vue.js應用程序開發的狀態管理模式。使用:store,getters,mutations,actions,moles詳細使用寫法請見：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502
4.vuex中的數據在頁面刷新後數據消失怎麼解決？
使用sessionStorage或localStorage存儲數據;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默認行為？
在綁定事件時，在指令後邊加上修飾符.stop來阻止冒泡，.prevent來阻止默認行為
6.深拷貝與淺拷貝？
假設B復制A，修改A的時候，看B是否變化：B變了是淺拷貝（修改堆內存中的同一個值），沒變是深拷貝（修改堆內存中不同的值）。淺拷貝只是增加了一個指針指向已存在的內存地址，深拷貝是增加了一個指針並申請了一個新的內存，使這個增加的指針指向這個新的內存。深拷貝和淺拷貝最根本的區別在於是否真正獲取一個對象的復制實體，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）組件是否激活調用
8. keep-alive: 組件緩存
https://juejin.cn/post/6844903624099758094
router.js中:
meta: {keepAlive:true} // 需要被緩存
鉤子執行順序：created -> mounted -> actived
include表示需要緩存的頁面；exclude表示不需要緩存的頁面。如果兩個同時設置，exclude優先順序更 改，則組件不會被緩存。
應用場景： 用戶在某個列表頁面選擇篩選條件過濾出一份數據列表，由列表頁面進入數據詳情頁面，再返回 該列表頁，我們希望列表頁可以保留用戶的篩選狀態。
9.vue傳值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟組件傳值
$emit 分發
$on 監聽
$off 取消監聽
$once 一次性監聽一個事件
在js文件中定義一個中央事件匯流排Bus，並暴露出來
具體的實現方式：
使用Bus的時候在接收Bus的組件的beforeDestroy函數中銷毀Bus，否則會一直疊加調用這個方法。
應用場景：「退出登錄」 -> ①點擊退出登錄；②修改密碼後自動退出登錄
11.組件跨級傳值
$attrs a->b->c
$listeners 監聽
12.vue事件修飾符有哪些？
.stop .prevent .self .once .passive .sync
13.箭頭函數中的this？
不具有this綁定，但函數體可以使用this，這個this指向的是箭頭函數當前所處的詞法環境中的this對象。
15.為什麼vue組件中data必須是一個函數？
如果不是函數的話，每個組件的data都是內存的同一個地址，一個數據改變了其他也改變了，當他是一個函數時，每個組件實例都有自己的作用域，每個實例相互獨立，就不會互相影響。
16.v-if 和 v-show區別？
v-if 是對標簽的創建與銷毀， v-show 則僅在初始化時載入一次，v-if 開銷相對來說比v-show 大；
v-if 是惰性的；v-show 做的僅是簡單的css切換。
17.v-text 與 v-html區別？
v-text 用於普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染過的數據，它默認用「就地復用」策略。如果數據項的順序改變，vue將不是移動DOM元素來匹配數據項的改變，而是簡單地復用此處每個元素，並確保在特定索引下顯示已被渲染過的每個元素。key屬性類型只能是string或number。
key的特殊屬性主要用在虛擬DOM演算法，在新舊node對比時辨識VNods。如不使用key，vue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的演算法，它會基於key的變化重新排列元素順序。
19.Scss是什麼？在vue-cli中安裝步驟？有哪幾大特性？
npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴展中下載;
特性：可以用變數，可以用混合器，可以嵌套等。
20.vue獲取dom？
ref
21.vue初始化頁面閃動問題？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什麼是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模塊化 基於組件路由配置，路由參數、查詢、通配符，細粒度導航控制，自定義的滾動條行為等。
23.vue路由傳參，接收？
傳： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和節流？
節流是一定時間內執行一次函數，多用在scroll事件上；
防抖是在一定時間內執行最後一次的函數，多用在input輸入操作，表單提交等。
25.如何讓scss只在當前組件中起作用？
② WEB前端面試題
第二章 面試題基礎篇
2.1 HTML面試題
面試題：行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
面試題：頁面導入樣式時，使用link和@import有什麼區別？
面試題：title與h1的區別、b與strong的區別、i與em的區別？
面試題：img標簽的title和alt有什麼區別？
面試題：png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用？
2.2 CSS面試題
面試題：css背景紋路
面試題：介紹一下CSS的盒子模型
面試題：CSS選擇符有哪些？哪些屬性可以繼承？
面試題：CSS優先順序演算法如何計算？
面試題：用CSS畫一個三角形
面試題：一個盒子不給寬度和高度如何水平垂直居中？
面試題：display有哪些值？說明他們的作用。
面試題：對BFC規范(塊級格式化上下文：block formatting context)的理解？
面試題：清除浮動有哪些方式？
面試題：在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
面試題：寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式。
面試題：什麼是CSS reset？
面試題：css sprite是什麼,有什麼優缺點
面試題：display: none;與visibility: hidden;的區別
面試題：position有哪些值?有什麼作用? 【特別多公司問】
面試題：line-height和height有什麼區別？
面試題：opacity 和 rgba區別
2.3 JavaScript基礎面試題
面試題：延遲載入JS有哪些方式？
面試題：JS數據類型有哪些？
面試題：null和undefined的區別
面試題：JS數據類型考題
面試題：==和===有什麼不同
面試題：JS微任務和宏任務
面試題：JS作用域考題
面試題：JS對象考題
面試題：JS作用域+this指向+原型 考題
面試題：JS判斷變數是不是數組，你能寫出哪些方法？
面試題：slice是幹嘛的、splice是否會改變原數組
面試題：JS數組去重
面試題：找出多維數組最大值
面試題：給字元串新增方法實現功能
面試題：找出字元串出現最多次數的字元以及次數
2.4 真正移動端 —— H5/C3面試題
面試題：什麼是語義化標簽
面試題：::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
面試題：如何關閉iOS鍵盤首字母自動大寫
面試題：怎麼讓Chrome支持小於12px 的文字？
面試題：rem和em有什麼樣區別
面試題：ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉
面試題：webkit表單輸入框placeholder的顏色值能改變嗎？
面試題：禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
面試題：禁止ios和android用戶選中文字
面試題：自適應 [淘寶無線適配]
面試題：響應式
第三章 面試題進階篇
3.1 JavaScript進階面試題
面試題：new操作符具體做了什麼
面試題：閉包 【必須會】
面試題：原型鏈 【必須會】
面試題： JS繼承有哪些方式
面試題：說一下call、apply、bind區別
面試題：sort背後原理是什麼？
面試題：深拷貝和淺拷貝
面試題：localstorage、sessionstorage、cookie的區別
3.2 ES6面試題
面試題：var、let、const區別
面試題：作用域考題
面試題：將下列對象進行合並
面試題：箭頭函數和普通函數有什麼區別？
面試題：Promise有幾種狀態
面試題：find和filter的區別 【大廠】
面試題：some和every的區別 【大廠】
3.3 webpack面試題
面試題：webpack插件
3.4 Git面試題
面試題：git常用命令
面試題：解決沖突
面試題：GitFlow
第四章 面試題框架篇
4.1 區分初中高級的 —— Vue面試題
面試題：Vue2.x 生命周期有哪些？
1.系統自帶八個
2.當一旦進入到某個組件會執行哪些生命周期
3.$el和$data在哪個階段有
4.如果使用keep-alive會多倆個生命周期
5.如果加入keep-alive第一次進入組件會執行哪些生命周期
6.如果加入keep-alive第二次或者第N進入該組件會執行哪些生命周期
面試題：談談你對keep-alive的了解
面試題：v-if和v-show區別
面試題：v-if和v-for優先順序 2.x
面試題：ref是什麼？
面試題：nextTick是什麼？
面試題：Vue中如何做樣式穿透
面試題：scoped原理
面試題：Vuex是單向數據流還是雙向數據流？
面試題：講一下MVVM
面試題：雙向綁定原理
面試題：什麼是虛擬DOM
面試題：key是干什麼？
面試題：diff演算法
面試題：Vue組件傳值
面試題：props和data優先順序誰高？
面試題：computed、methods、watch有什麼區別？
面試題：Vuex
面試題：Vue路由
面試題：Vue項目打包後出現空白頁
4.2 微信小程序面試題
面試題：如何自定義頭部？
面試題：如何自定義底部？
4.3 uni-app面試題
面試題：生命周期
面試題：條件編譯
第五章 面試題性能優化篇
③ 前端面試題整理（一）
進程是CPU資源分配的最小單位，線程是CPU調度的最小單位
其中GUI渲染線程和JS引擎是無法同時工作的
默認情況下, TCP 連接會啟用延遲傳送演算法 (Nagle 演算法), 在數據發送之前緩存他們. 如果短時間有多個數據發送, 會緩沖到一起作一次發送 (緩沖大小見 socket.bufferSize), 這樣可以減少 IO 消耗提高性能.
如果是傳輸文件的話, 那麼根本不用處理粘包的問題, 來一個包拼一個包就好了. 但是如果是多條消息, 或者是別的用途的數據那麼就需要處理粘包.
可以參見網上流傳比較廣的一個例子, 連續調用兩次 send 分別發送兩段數據 data1 和 data2, 在接收端有以下幾種常見的情況:
A. 先接收到 data1, 然後接收到 data2 .
B. 先接收到 data1 的部分數據, 然後接收到 data1 餘下的部分以及 data2 的全部.
C. 先接收到了 data1 的全部數據和 data2 的部分數據, 然後接收到了 data2 的餘下的數據.
D. 一次性接收到了 data1 和 data2 的全部數據.
其中的 BCD 就是我們常見的粘包的情況. 而對於處理粘包的問題, 常見的解決方案有:
多次發送之前間隔一個等待時間
關閉 Nagle 演算法
進行封包/拆包
通過滑動窗口協議（連續ARQ協議）實現，保證了分組無差錯、有序接收、流量控制。接收方返回的ACK中會包含自己的接收窗口的大小，並且利用大小來控制發送方的數據發送。
當發送者收到了一個窗口為0的應答，發送者便停止發送，等待接收者的下一個應答。如果這個窗口不為0的應答在傳輸過程中丟失，發送者一直等待，接收者以為發送者收到該應答，等待接收新數據，這樣雙方就相互等待，從而產生死鎖
TCP使用了持續計時器。每當發送者收到一個0窗口的應答後就啟動該計時器。計時器到時便主動發送報文詢問接收者的窗口大小。若接收者仍然返回0窗口，則重置該計時器繼續等待；若窗口不為0，則標識應答報文丟失了，此時重置發送窗口開始發送，這樣就避免了死鎖的產生
擁塞控制是作用於網路的，防止網路負載過大，常用的方法：1.慢啟動、擁塞避免 2.快重傳、快恢復。流量控制是作用於接收者的，控制發送者的發送速度使接收者來得及接收，防止分組丟失
發送方維持一個叫做擁塞窗口CWnd的狀態變數，控制著傳輸速度，TCP開始發送報文時CWnd=1。一個傳輸輪次所經歷的時間就是往返時間RTT，每經過一個RTT並且按時收到確認，就將擁塞窗口CWnd加倍。還有一個叫慢啟動門限ssthresh的狀態變數，當CWnd<ssthresh時，使用慢啟動，當CWnd>=ssthresh改用擁塞避免演算法
每經過一個往返時間RTT就把發送方的擁塞窗口cwnd加1而不是加倍。無論在慢啟動階段還是擁塞避免階段，只要發送方沒有按時收到確認，就把慢啟動門限設置為出現擁塞時的擁塞窗口cwnd的一半（但不小於2）。然後把擁塞窗口cwnd重置為1，執行慢啟動演算法
接收方收到一個失序的報文段後就立刻發出重復確認而不是等到自己發送數據時捎帶確認。只要發送方一連收到三個重復確認就立即重傳對方尚未收到的報文段，而不是等待重傳計時器到期
當發送方連續收到三個重復確認時，把慢啟動門限ssthresh減半，但是並不執行慢開始演算法，而是將擁塞窗口cwnd設置為ssthresh減半後的值，直接執行擁塞避免演算法。快重傳配合快恢復的TCP Reno版本是目前使用最廣的版本。
幀：HTTP/2 數據通信的最小單位消息：指 HTTP/2 中邏輯上的 HTTP 消息。例如請求和響應等，消息由一個或多個幀組成。
流：存在於連接中的一個虛擬通道。流可以承載雙向消息，每個流都有一個唯一的整數ID
HTTP/1.x會在請求和響應中中重復地攜帶不常改變的、冗長的頭部數據，給網路帶來額外的負擔。
服務端可以在發送頁面HTML時主動推送其它資源，而不用等到瀏覽器解析到相應位置，發起請求再響應。例如服務端可以主動把JS和CSS文件推送給客戶端，而不需要客戶端解析HTML時再發送這些請求。
服務端可以主動推送，客戶端也有權利選擇是否接收。如果服務端推送的資源已經被瀏覽器緩存過，瀏覽器可以通過發送RST_STREAM幀來拒收。主動推送也遵守同源策略，伺服器不會隨便推送第三方資源給客戶端。
HTTP 1.x 中，如果想並發多個請求，必須使用多個 TCP 鏈接，且瀏覽器為了控制資源，還會對單個域名有 6-8個的TCP鏈接請求限制。
HTTP2中：
同域名下所有通信都在單個連接上完成。
單個連接可以承載任意數量的雙向數據流。
數據流以消息的形式發送，而消息又由一個或多個幀組成，多個幀之間可以亂序發送，因為根據幀首部的流標識可以重新組裝
前端面試與進階指南
從輸入URL到頁面載入的過程？如何由一道題完善自己的前端知識體系！
④ 前端面試題（十五）
已知高度和寬度的元素：
設置父元素為相對定位relative，給子元素設置絕對定位absoluted，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;
未知高度和寬度的元素：
設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; transform: translate(-50%，-50%);
設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; transform:translate(-50%，-50%);
組件中的 data 寫成一個函數，數據以函數返回值形式定義，這樣每復用一次組件，就會返回一份新的 data ，類似於給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得所有組件實例共用了一份 data ，就會造成一個變了全都會變的結果。
for of：
支持 return ，並且是值 of 數組（不能遍歷對象）
1. 可以避免所有 for-in 循環的陷阱
2. 不同於 forEach()，可以使用 break, continue 和 return
3. for-of 循環不僅僅支持數組的遍歷。同樣適用於很多類似數組的對象
4. 它也支持字元串的遍歷
5. for-of 並不適用於處理原有的原生對象
for in：
forEach：
assets文件夾里是靜態資源；components是放組件；router是定義路由相關的配置；view視圖；app.vue是一個應用主組件；main.js是入口文件
在組件切換過程中將狀態保留在內存中，防止重復渲染DOM，減少載入時間及性能消耗，提高用戶體驗性。
生命周期函數： activated（ 組件激活時調用 ）、deactivated（ 組件停用時調用 ）
常見的使用場景可以分為三類:
當頻繁執行條件時，不適合使用 v-if ,用 v-show ;
反之執行條件的次數很少，使用 v-if 即可。
v-if 和 v-for ,不推薦兩者一起使用在同一個元素上，雖然也能運行，但是編輯器會報警告；兩者一起使用時，v-for比v-if具有更高的優先順序，
⑤ web前端面試經常問到的面試題有哪些
Web前端經常被問到的面試題及答案
一、HTML+CSS
1.對WEB標准以及W3C的理解與認識
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外
鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維
護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性;
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時載入
前者無兼容性，後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標簽選擇
後者優先順序高
7.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行為層 js
8.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
二、Javascript
1.javascript的typeof返回哪些數據類型
Object number function boolean underfind
2.例舉3種強制類型轉換和2種隱式類型轉換?
強制(parseInt,parseFloat,number)
隱式(== – ===)
3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字元串
4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
5.事件綁定和普通事件有什麼區別
6.IE和DOM事件流的區別
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題
7.IE和標准下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax請求時，如何解釋json數據
使用eval parse 鑒於安全性考慮 使用parse更靠譜
11.b繼承a的方法
12.寫一個獲取非行間樣式的函數
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
⑥ 高級前端面試題目大全(三)
解析： 第 41題
比如 sleep(1000) 意味著等待1000毫秒，可從 Promise、Generator、Async/Await 等角度實現
解析： 第 42 題
解析： 第 43 題
1、客戶端使用https的url訪問web伺服器,要求與伺服器建立ssl連接
2、web伺服器收到客戶端請求後, 會將網站的證書(包含公鑰)傳送一份給客戶端
3、客戶端收到網站證書後會檢查證書的頒發機構以及過期時間, 如果沒有問題就隨機產生一個秘鑰
4、客戶端利用公鑰將會話秘鑰加密, 並傳送給服務端, 服務端利用自己的私鑰解密出會話秘鑰
5、之後伺服器與客戶端使用秘鑰加密傳輸
解析： 第 44 題
解析： 第 45 題
1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1
2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1
3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印
4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined
解析： 第 46 題
解析： 第 47 題
1、Function.prototype.apply和Function.prototype.call 的作用是一樣的，區別在於傳入參數的不同；
2、第一個參數都是，指定函數體內this的指向；
3、第二個參數開始不同，apply是傳入帶下標的集合，數組或者類數組，apply把它傳給函數作為參數，call從第二個開始傳入的參數是不固定的，都會傳給函數作為參數。
4、call比apply的性能要好，平常可以多用call, call傳入參數的格式正是內部所需要的格式
解析： 第 48 題
解析： 第 49 題
解析： 第 50 題
為什麼在 Vue3.0 採用了 Proxy，拋棄了 Object.defineProperty？
解析： 第 51 題
解析： 第 52 題
解析： 第 53 題
解析： 第 54 題
如下：{1:222, 2:123, 5:888}，請把數據處理為如下結構：[222, 123, null, null, 888, null, null, null, null, null, null, null]。
解析： 第 55 題
解析： 第 56 題
解析： 第 57 題
解析： 第 58 題
解析： 第 59 題
解析： 第 60 題
解析： 第 61 題
解析： 第 62 題
解析： 第 63 題
解析： 第 64 題
解析： 第 65 題
解析： 第 66 題
隨機生成一個長度為 10 的整數類型的數組，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20] ，將其排列成一個新數組，要求新數組形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]] 。
解析： 第 67 題
解析： 第 68 題
解析： 第 69 題
解析： 第 70 題
解析： 第 71 題
[圖片上傳失敗...(image-2eeb30-1575446538468)]
<figcaption></figcaption>
解析： 第 72 題
解析： 第 73 題
解析： 第 74 題
解析： 第 75 題
解析： 第 76 題
示例 1：
示例 2：
解析： 第 77 題
解析： 第 78 題
解析： 第 79 題
解析： 第 80 題
解析： 第 81 題
解析： 第 82 題
解析： 第 83 題
習題： https://blog.csdn.net/qq_37024887/article/details/106784068
解析： 第 84 題
解析： 第 85 題
給定一個整數數組和一個目標值，找出數組中和為目標值的兩個數。
你可以假設每個輸入只對應一種答案，且同樣的元素不能被重復利用。
示例：
解析： 第 86 題
解析： 第 87 題
以下數據結構中，id 代表部門編號，name 是部門名稱，parentId 是父部門編號，為 0 代表一級部門，現在要求實現一個 convert 方法，把原始 list 轉換成樹形結構，parentId 為多少就掛載在該 id 的屬性 children 數組下，結構如下：
解析： 第 88 題
解析： 第 89 題
[圖片上傳失敗...(image-aea64e-1575446538470)]
解析： 第 90 題
解析： 第 91 題
[圖片上傳失敗...(image-21d53f-1575446538470)]
解析： 第 92 題
示例 1：
中位數是 2.0
示例 2：
中位數是(2 + 3) / 2 = 2.5
解析： 第 93 題
解析： 第 94 題
解析： 第 95 題
解析： 第 96 題
解析： 第 97 題
解析： 第 98 題
解析： 第 99 題
解析：[第 100 題]( https://github.com/Advanced-Frontend/Daily-
⑦ 前端經典面試題(60道前端面試題包含JS、CSS、React、瀏覽器等)
防抖
節流
誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。
實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web伺服器，瀏覽器或web伺服器限制了url的長度。為了明確這個概念，我們必須再次強調下面幾點:
補充補充一個get和post在緩存方面的區別：
可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Mole、
vue和react都是採用diff演算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中（建議先了解一下diff演算法過程）。在交叉對比中，當新節點跟舊節點 頭尾交叉對比 沒有結果時，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這里對應的是一個key => index 的map映射）。如果沒找到就認為是一個新增節點。而如果沒有key，那麼就會採用遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下：
創建map函數
遍歷尋找
在React中， 如果是由React引發的事件處理（比如通過onClick引發的事件處理），調用setState不會同步更新this.state，除此之外的setState調用會同步執行this.state 。所謂「除此之外」，指的是繞過React通過addEventListener直接添加的事件處理函數，還有通過setTimeout/setInterval產生的非同步調用。
**原因：**在React的setState函數實現中，會根據一個變數isBatchingUpdates判斷是直接更新this.state還是放到隊列中回頭再說，而isBatchingUpdates默認是false，也就表示setState會同步更新this.state，但是， 有一個函數batchedUpdates，這個函數會把isBatchingUpdates修改為true，而當React在調用事件處理函數之前就會調用這個batchedUpdates，造成的後果，就是由React控制的事件處理過程setState不會同步更新this.state 。
虛擬dom相當於在js和真實dom中間加了一個緩存，利用dom diff演算法避免了沒有必要的dom操作，從而提高性能。
具體實現步驟如下：
用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中
當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異
把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了。
結構：display:none: 會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，可以點擊
繼承：display: none：是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。visibility: hidden：是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。
性能：displaynone : 修改元素會造成文檔迴流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ：修改元素會造成重繪，性能消耗較少
聯系：它們都能讓元素不可見
常用的一般為三種 .clearfix , clear:both , overflow:hidden ;
比較好是 .clearfix ,偽元素萬金油版本,後兩者有局限性.
clear:both :若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷
overflow:hidden :這種若是用在同個容器內,可以形成 BFC 避免浮動造成的元素塌陷
概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。
優點：
缺點：
block 元素特點：
1.處於常規流中時，如果 width 沒有設置，會自動填充滿父容器 2.可以應用 margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間（獨佔一個水平空間） 5.忽略 vertical-align
inline 元素特點
1.水平方向上根據 direction 依次布局
2.不會在元素前後進行換行
3.受 white-space 控制
4. margin/padding 在豎直方向上無效，水平方向上有效
5. width/height 屬性對非替換行內元素無效，寬度由元素內容決定
6.非替換行內元素的行框高由 line-height 確定，替換行內元素的行框高由 height , margin , padding , border 決定 7.浮動或絕對定位時會轉換為 block 8. vertical-align 屬性生效
GIF :
JPEG ：
PNG ：
七種數據類型
(ES6之前)其中5種為基本類型: string , number , boolean , null , undefined ,
ES6出來的 Symbol 也是原始數據類型 ，表示獨一無二的值
Object 為引用類型(范圍挺大),也包括數組、函數,
輸出結果是：
工廠模式
簡單的工廠模式可以理解為解決多個相似的問題;
單例模式
只能被實例化(構造函數給實例添加屬性與方法)一次
沙箱模式
將一些函數放到自執行函數裡面,但要用閉包暴露介面,用變數接收暴露的介面,再調用裡面的值,否則無法使用裡面的值
1.字面量
2.Object構造函數創建
3.使用工廠模式創建對象
4.使用構造函數創建對象
HTML中與javascript交互是通過事件驅動來實現的，例如滑鼠點擊事件onclick、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行調用的，就需要了解一下「事件流」的概念。
什麼是事件流：事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個階段。
addEventListener ： addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
IE只支持事件冒泡 。
獲取一個對象的原型，在chrome中可以通過__proto__的形式，或者在ES6中可以通過Object.getPrototypeOf的形式。
那麼Function.proto是什麼么？也就是說Function由什麼對象繼承而來，我們來做如下判別。
我們發現Function的原型也是Function。
我們用圖可以來明確這個關系：
這里來舉個栗子，以 Object 為例，我們常用的 Object 便是一個構造函數，因此我們可以通過它構建實例。
則此時， 實例為instance , 構造函數為Object ，我們知道，構造函數擁有一個 prototype 的屬性指向原型，因此原型為:
這里我們可以來看出三者的關系:
在 JS 中，繼承通常指的便是 原型鏈繼承 ，也就是通過指定原型，並可以通過原型鏈繼承原型上的屬性或者方法。
在函數式編程中，函數是一等公民。那麼函數柯里化是怎樣的呢？
函數柯里化指的是將能夠接收多個參數的函數轉化為接收單一參數的函數，並且返回接收餘下參數且返回結果的新函數的技術。
函數柯里化的主要作用和特點就是參數復用、提前返回和延遲執行。
在一個函數中，首先填充幾個參數，然後再返回一個新的函數的技術，稱為函數的柯里化。通常可用於在不侵入函數的前提下，為函數 預置通用參數 ，供多次重復調用。
call 和 apply 都是為了解決改變 this 的指向。作用都是相同的，只是傳參的方式不同。
除了第一個參數外， call 可以接收一個參數列表， apply 只接受一個參數數組。
bind 和其他兩個方法作用也是一致的，只是該方法會返回一個函數。並且我們可以通過 bind 實現柯里化。
如何實現一個 bind 函數
對於實現以下幾個函數，可以從幾個方面思考
如何實現一個call函數
如何實現一個apply函數
箭頭函數其實是沒有 this 的，這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this 。在這個例子中，因為調用 a 符合前面代碼中的第一個情況，所以 this 是 window 。並且 this 一旦綁定了上下文，就不會被任何代碼改變。
關於 let 的是否存在變數提升，我們何以用下面的例子來驗證：
let 變數如果不存在變數提升， console.log(name) 就會輸出 ConardLi ，結果卻拋出了 ReferenceError ，那麼這很好的說明了， let 也存在變數提升，但是它存在一個「暫時死區」，在變數未初始化或賦值前不允許訪問。
變數的賦值可以分為三個階段：
關於 let 、 var 和 function ：
依次輸出：undefined -> 10 -> 20
答案: D
colorChange 方法是靜態的。靜態方法僅在創建它們的構造函數中存在，並且不能傳遞給任何子級。由於 freddie 是一個子級對象，函數不會傳遞，所以在 freddie 實例上不存在 freddie 方法：拋出 TypeError 。
1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1 2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1 3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印 4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined
undefined {n:2}
首先，a和b同時引用了{n:2}對象，接著執行到a.x = a = {n：2}語句，盡管賦值是從右到左的沒錯，但是.的優先順序比=要高，所以這里首先執行a.x，相當於為a（或者b）所指向的{n:1}對象新增了一個屬性x，即此時對象將變為{n:1;x:undefined}。之後按正常情況，從右到左進行賦值，此時執行a ={n:2}的時候，a的引用改變，指向了新對象{n：2},而b依然指向的是舊對象。之後執行a.x = {n：2}的時候，並不會重新解析一遍a，而是沿用最初解析a.x時候的a，也即舊對象，故此時舊對象的x的值為{n：2}，舊對象為 {n:1;x:{n：2}}，它被b引用著。後面輸出a.x的時候，又要解析a了，此時的a是指向新對象的a，而這個新對象是沒有x屬性的，故訪問時輸出undefined；而訪問b.x的時候，將輸出舊對象的x的值，即{n:2}。
在比較相等性，原始類型通過它們的值進行比較，而對象通過它們的引用進行比較。 JavaScript 檢查對象是否具有對內存中相同位置的引用。
我們作為參數傳遞的對象和我們用於檢查相等性的對象在內存中位於不同位置，所以它們的引用是不同的。
這就是為什麼 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。
所有對象鍵（不包括 Symbols ）都會被存儲為字元串，即使你沒有給定字元串類型的鍵。這就是為什麼 obj.hasOwnProperty（Ƈ'） 也返回 true 。
上面的說法不適用於 Set 。在我們的 Set 中沒有 「1」 ： set.has（Ƈ'） 返回 false 。它有數字類型 1 ， set.has（1） 返回 true 。
這題考察的是對象的鍵名的轉換。
catch 塊接收參數 x 。當我們傳遞參數時，這與變數的 x 不同。這個變數 x 是屬於 catch 作用域的。
之後，我們將這個塊級作用域的變數設置為 1 ，並設置變數 y 的值。現在，我們列印塊級作用域的變數 x ，它等於 1 。
在 catch 塊之外， x 仍然是 undefined ，而 y 是 2 。當我們想在 catch 塊之外的 console.log(x) 時，它返回 undefined ，而 y 返回 2 。