先說些廢話

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

首先，面試對個人來說恋昼，就是一種對以往工作之中經(jīng)驗積累的一種檢驗看靠，如果平時在工作中對自己遇到的問題、難點液肌、新知識點挟炬，沒有花時間去學(xué)習(xí)積累，那么我相信嗦哆，面試的時候花時間背面試題谤祖，也不一定能勝任預(yù)期的工作，不過摸魚混工時的工作除外~

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

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

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

Vue（Vue2/3）

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

React（React16及以上）

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

公共部分

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

目前面試中已經(jīng)遇到的問題

JavaScript和CSS

1. ES6的數(shù)據(jù)類型有哪些忧额？（基本數(shù)據(jù)類型和引用數(shù)據(jù)類型厘肮，ES6新增Symbol，用于對象屬性中唯一的key睦番；新增BigInt用于解決數(shù)據(jù)量過大Int報錯的問題）
2. ES6新增的方法有哪些类茂？（new Set()處理數(shù)組去重，new Map()鏈?zhǔn)教幚頂?shù)組托嚣，可以搭配Filter使用巩检，再說一些和ForEach的區(qū)別，F(xiàn)orEach是在原數(shù)組中操作示启。
   可以再說說is()兢哭，判斷值是否相等；assign()夫嗓，淺拷貝對象迟螺；entries()與后者反之和fromEntries()鍵值對數(shù)組轉(zhuǎn)為對象）
   • Javascript中的assign()方法到底是淺拷貝還是深拷貝冲秽？
   • Es6新增的對象方法
3. 如何判斷一個數(shù)據(jù)是否是對象？（1.isArray 2.Object.prototype.toString().call()矩父，返回'[object Array]'即為 3.實例的構(gòu)造函數(shù)屬性constructor指向構(gòu)造函數(shù)锉桑，數(shù)組.contructor===Array即可 4.使用instanceof亦可，a instanceof Array）
   • JS判斷是否是數(shù)組的四種做法
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非嚴(yán)格相等，自身也全等士八，但是相互不嚴(yán)格相等容燕；null是人為賦予初始空值，undefined是全局對象的屬性婚度；typeof(null)不是null蘸秘，而是object，
   是因為typeof判斷二進(jìn)制碼蝗茁，object前三位是0醋虏，null剛好也是，typeof(undefined)正常哮翘；）
6. var和let的區(qū)別（var是函數(shù)作用域颈嚼，let是塊狀作用域，let聲明的變量不能重復(fù)饭寺；const聲明的變量不可修改阻课；var聲明的變量屬于window，可以window.訪問艰匙，let和const的不行）
   • var和let的區(qū)別
   • const 聲明了數(shù)組限煞，還能 push 元素嗎，為什么员凝？
7. push()晰骑、pop()、shift()、unshift()硕舆、splice()、sort()骤公、reverse()操作的區(qū)別抚官。shift刪除第一個元素并返回，unshift反之阶捆。
   splice用于添加或刪除數(shù)組中的元素凌节，array.splice(index,howmany,item1,.....,itemX)；index必需洒试，規(guī)定從何處添加/刪除元素倍奢；
   howmany可選，規(guī)定應(yīng)該刪除多少元素垒棋，必須是數(shù)字卒煞，但可以是 "0"，如果未規(guī)定此參數(shù)叼架，則刪除從index開始到原數(shù)組結(jié)尾的所有元素畔裕；
   item1, ..., itemX可選，要添加到數(shù)組的新元素
   • JavaScript splice() 方法
8. axios有什么競品是否有了解過（ajax和fetch乖订，fetch是js原生api扮饶，需要自己做一些封裝；ajxa針對mvc不是現(xiàn)在mvvm乍构，并且基于原生xhr甜无，還需要引入jquery；axios支持promise哥遮，支持防止csrf）
   • ajax岂丘、axios、fetch之間的詳細(xì)區(qū)別以及優(yōu)缺點
   • Ajax昔善、Fetch元潘、Axios
9. js的深拷貝和淺拷貝（1. 常用深拷貝使用JSON.parse+JSON.stringify、2. object.assign一級屬性深拷貝二級屬性淺拷貝君仆、3. 用foreach方法遞歸迭代實現(xiàn)深拷貝翩概、4. 使用第三方函數(shù)庫，比如loadsh的clonedeep或者underscore的deepclone返咱，clone是淺拷貝）
   • js的深拷貝與淺拷貝
10. H5移動端如何做性能優(yōu)化（1. 資源壓縮钥庇，圖片壓縮，引入資源包壓縮咖摹，有條件的使用cdn加速评姨，icon雪碧圖精靈圖。2. 優(yōu)化dom結(jié)構(gòu)，減少頁面的重繪和重排布吐句，首屏支出的頁面使用內(nèi)聯(lián)css胁后，使用節(jié)流防抖的手段減少修改dom事件觸發(fā)的頻率。
    3. 使用預(yù)先加載骨架圖的方式優(yōu)化用戶體驗嗦枢，我們之前有用過page-web-skeleton這個chorme組件快速生成骨架圖攀芯。4. 盡量使用css內(nèi)置動畫，減少使用requestAnimationFrame文虏，他會觸發(fā)大量的dom操作侣诺，
       而內(nèi)置動畫會調(diào)用硬件加速，體驗更優(yōu)氧秘。5. 配合后端同學(xué)做接口合并年鸳，對于首頁顯示的接口統(tǒng)一為一個總接口，并針對性優(yōu)化丸相。6. 最后就是優(yōu)化主要針對不同項目搔确，通過不同的方式去做優(yōu)化，針對性的修改）
    • H5前端性能優(yōu)化圖鑒
11. css樣式的優(yōu)先規(guī)則（簡而言之已添，內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器妥箕，!important最高）
    • CSS的優(yōu)先級
    • CSS 樣式優(yōu)先級

Vue

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

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

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

雜亂記錄一些

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

筆試面試題記錄

1. 一些奇奇怪怪工作中很少用到的冷門CSS知識點考察題目（比如：長50px匾浪，寬50px，border-radius: 30px 50px; 是什么效果蛋辈？）
2. 數(shù)組去重、數(shù)組排序以及組合能力的算法題（爬淙埽客網(wǎng)和Leecode刷題處理）
3. 手寫sql（加分項）

八股文匯總整理

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

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

我是 fx67ll.com，如果您發(fā)現(xiàn)本文有什么錯誤扮休，歡迎在評論區(qū)討論指正，感謝您的閱讀拴鸵！
如果您喜歡這篇文章蜗搔，歡迎訪問我的 本文github倉庫地址樟凄，為我點一顆Star兄渺，Thanks~ :)
轉(zhuǎn)發(fā)請注明參考文章地址，非常感謝９业！百新！