先說些廢話

這是一篇筆者面試記錄的文章，并非要寫一篇非常全面的面試題匯總文章，希望看完本文對您能有一定的幫助。

首先，面試對個人來說，就是一種對以往工作之中經驗積累的一種檢驗，如果平時在工作中對自己遇到的問題、難點、新知識點，沒有花時間去學習積累，那么我相信，面試的時候花時間背面試題，也不一定能勝任預期的工作，不過摸魚混工時的工作除外~

其次，面試中除了技術面試，還有針對項目中運用的技術亮點和個人能夠提供的技術解決方案等等能力的展現，這方面的能力沒實際解決過就一定無法提出自己的解決方案。所以居安思危，平時就嚴格要求自己，對于疑難問題、性能問題，不逃避問題，迎難而上去解決，才能使得自己真正在技術崗位上站穩(wěn)腳跟。

工作中必備的核心框架工具

Vue和React是前端開發(fā)崗必備的兩種技術棧，以下是工作中項目開發(fā)必須要具備的框架技能，參考大綱查漏補缺

Vue（Vue2/3）

1. Vue主流組件庫（ant-design、element-ui、arco-design）
2. Vue組件封裝（公共組件抽離，npm組件發(fā)布以及私有部署，編寫組件必須考慮的幾個要素props、methods、樣式）
3. Vue父子、兄弟組件通信（Vuex，EventBus）
4. 生命周期函數、Watch函數、以及計算屬性Computed的應用
5. Vue動態(tài)路由，權限相關（菜單頁面、按鈕操作），單點登錄，使用圖片驗證防止CSFR攻擊
6. Vue3更新的內容，老舊Vue2項目維護和新項目Vue3技術選型的注意點，Vue配合TypeScript

React（React16及以上）

1. 企業(yè)級開發(fā)框架UMI（簡化項目構建和初始開發(fā)流程）
2. React主流組件庫（ant-design、arco-design）
3. React組件封裝（類比Vue）
4. React組件通信（Redux、Redux-thunk、Redux-saga、Redux-logger、dva）
5. 生命周期函數、React Hooks鉤子函數的應用
6. 無狀態(tài)組件、項目分層（view + model + service）
7. React路由和權限（類比Vue）

公共部分

1. webpack打包配置、性能優(yōu)化、webpack.dev.conf.js添加cdn配置
2. 如何首屏加載優(yōu)化、圖標和圖片資源優(yōu)化

目前面試中已經遇到的問題

JavaScript和CSS

1. ES6的數據類型有哪些？（基本數據類型和引用數據類型，ES6新增Symbol，用于對象屬性中唯一的key；新增BigInt用于解決數據量過大Int報錯的問題）
2. ES6新增的方法有哪些？（new Set()處理數組去重，new Map()鏈式處理數組，可以搭配Filter使用，再說一些和ForEach的區(qū)別，ForEach是在原數組中操作。
   可以再說說is()，判斷值是否相等；assign()，淺拷貝對象；entries()與后者反之和fromEntries()鍵值對數組轉為對象）
   • Javascript中的assign()方法到底是淺拷貝還是深拷貝？
   • Es6新增的對象方法
3. 如何判斷一個數據是否是對象？（1.isArray 2.Object.prototype.toString().call()，返回'[object Array]'即為 3.實例的構造函數屬性constructor指向構造函數，數組.contructor===Array即可 4.使用instanceof亦可，a instanceof Array）
   • JS判斷是否是數組的四種做法
4. 什么是BFC盒子模型，他的作用是什么（具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素；
   觸發(fā)條件：1.overflow 除了 visible 以外的值 (hidden、auto、scroll)。2.絕對定位元素：position (absolute、fixed)。3.display 為 inline-block、table-cells、flex。）
   • 盒子模型與BFC
5. null和undefined的區(qū)別（null和undefined非嚴格相等，自身也全等，但是相互不嚴格相等；null是人為賦予初始空值，undefined是全局對象的屬性；typeof(null)不是null，而是object，
   是因為typeof判斷二進制碼，object前三位是0，null剛好也是，typeof(undefined)正常；）
6. var和let的區(qū)別（var是函數作用域，let是塊狀作用域，let聲明的變量不能重復；const聲明的變量不可修改；var聲明的變量屬于window，可以window.訪問，let和const的不行）
   • var和let的區(qū)別
   • const 聲明了數組，還能 push 元素嗎，為什么？
7. push()、pop()、shift()、unshift()、splice()、sort()、reverse()操作的區(qū)別。shift刪除第一個元素并返回，unshift反之。
   splice用于添加或刪除數組中的元素，array.splice(index,howmany,item1,.....,itemX)；index必需，規(guī)定從何處添加/刪除元素；
   howmany可選，規(guī)定應該刪除多少元素，必須是數字，但可以是 "0"，如果未規(guī)定此參數，則刪除從index開始到原數組結尾的所有元素；
   item1, ..., itemX可選，要添加到數組的新元素
   • JavaScript splice() 方法
8. axios有什么競品是否有了解過（ajax和fetch，fetch是js原生api，需要自己做一些封裝；ajxa針對mvc不是現在mvvm，并且基于原生xhr，還需要引入jquery；axios支持promise，支持防止csrf）
   • ajax、axios、fetch之間的詳細區(qū)別以及優(yōu)缺點
   • Ajax、Fetch、Axios
9. js的深拷貝和淺拷貝（1. 常用深拷貝使用JSON.parse+JSON.stringify、2. object.assign一級屬性深拷貝二級屬性淺拷貝、3. 用foreach方法遞歸迭代實現深拷貝、4. 使用第三方函數庫，比如loadsh的clonedeep或者underscore的deepclone，clone是淺拷貝）
   • js的深拷貝與淺拷貝
10. H5移動端如何做性能優(yōu)化（1. 資源壓縮，圖片壓縮，引入資源包壓縮，有條件的使用cdn加速，icon雪碧圖精靈圖。2. 優(yōu)化dom結構，減少頁面的重繪和重排布，首屏支出的頁面使用內聯css，使用節(jié)流防抖的手段減少修改dom事件觸發(fā)的頻率。
    3. 使用預先加載骨架圖的方式優(yōu)化用戶體驗，我們之前有用過page-web-skeleton這個chorme組件快速生成骨架圖。4. 盡量使用css內置動畫，減少使用requestAnimationFrame，他會觸發(fā)大量的dom操作，
       而內置動畫會調用硬件加速，體驗更優(yōu)。5. 配合后端同學做接口合并，對于首頁顯示的接口統(tǒng)一為一個總接口，并針對性優(yōu)化。6. 最后就是優(yōu)化主要針對不同項目，通過不同的方式去做優(yōu)化，針對性的修改）
    • H5前端性能優(yōu)化圖鑒
11. css樣式的優(yōu)先規(guī)則（簡而言之，內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器，!important最高）
    • CSS的優(yōu)先級
    • CSS 樣式優(yōu)先級

Vue

1. Vue的實現原理，Object.defineProperty()；Vue2 和 Vue3 的實現響應式的區(qū)別； Vue如何實現數組的響應式（底層代碼主要是編寫了一套js相同的方法暴露出來，Vue通過原型攔截的方式重寫了數組的7個方法）
2. Vue如何封裝一個組件（定義參數，定義需要暴露出的方法，參數需要寫的屬性，最后export出來）
3. Vue父子組件和兄弟組件的通信方式（1. 第一種方式借助父組件。2. 第二種方式借助eventbus，在main中全局注冊事件bus，通過emit來監(jiān)聽和觸發(fā)。3. 使用Vuex）
   • vue學習之----兄弟組件之間通信方式
4. Vue如何實現v-model（使用object.defineProperty設置getset方法，再給綁定的input輸入框的keyup事件添加劫持，從而實現mvvm，即數據驅動頁面；接著繼續(xù)吹mvvm和之前jquery時代的區(qū)別；
   jquery主要是鏈式函數操作，對dom的操作很多，性能上會有一定落后；mvvm是指model，view，viewmodel，最后一個是同步view和model的對象，model是業(yè)務邏輯，view是頁面ui）
   • Vue的v-model的原理和實現
   • 什么是MVVM？
5. 當Vue使用history模式的時候，出現404，nginx該如何處理（try_files $uri $uri/ /index.html，表示查找當前請求地址對應的文件是否存在，不存在則查找請求地址對應的目錄是否存在，還是不存在則重定向到/index.html頁面）
   • Nginx：vue路由使用history模式刷新404

React（個人簡歷未突出react能力，所以這方面問的比較少）

1. redux如何使用？
2. redux中傳遞組件樣式css無法生效怎么辦？

雜亂記錄一些

• 前端性能優(yōu)化：H5頁面如何解決首屏加載白屏問題、如何防止內存泄漏
• 前端安全基礎：XSS攻擊、XSRF攻擊
• js繼承的幾種方式：總結JS繼承的六種方式、js幾種繼承
• js如何創(chuàng)建對象：JS創(chuàng)建對象的四種方式
• 如何實現一個promise：javaScript之js模擬封裝一個promise、模擬實現 Promise（小白版）
• 高德地圖、Cesium、ArcGIS有哪些圖層？
• 原型和原型鏈有什么作用，簡單描述一下？

筆試面試題記錄

1. 一些奇奇怪怪工作中很少用到的冷門CSS知識點考察題目（比如：長50px，寬50px，border-radius: 30px 50px; 是什么效果？）
2. 數組去重、數組排序以及組合能力的算法題（?？途W和Leecode刷題處理）
3. 手寫sql（加分項）

八股文匯總整理

八股文總會被問到，還是需要看看，大部分八股文遇到的問題也都可以在工作中遇到，你遇到過自然印象就深刻

1. 前端200道面試題及答案（更新中）
2. 50個最新TypeScript面試題合集 – TypeScript開發(fā)教程
3. React面試題最全
4. react 面試題整理
5. 耗時一個月，React 知識點萬字大總結（超全超基礎）
6. webpack 面試題整理
7. vue面試常問的原理
8. 12道vue高頻原理面試題,你能答出幾道?
9. vue面試題整理(2022-持續(xù)更新中...)
10. vue3面試題：2022 最新前端 Vue 3.0 面試題及答案
11. vue3.0 面試題總結
12. 高頻 JS面試題 數據類型和變量、閉包、作用域、原型鏈、繼承
13. CSS高頻面試題

我是 fx67ll.com，如果您發(fā)現本文有什么錯誤，歡迎在評論區(qū)討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點一顆Star，Thanks~ :)
轉發(fā)請注明參考文章地址，非常感謝?。?！