需要289頁前端初中級前端面試題，請直接滑到文末獲取

1、ant-design的使用總結及常用組件和他們的基本用法?

ant-design為React，Angular和Vue都提供了組件，同時為PC和移動端提供了常用的基礎組件，ant-design提供的demo非常的豐富并且樣式能夠基本的覆寫開發需求，antd的Demo因為是多人撰寫的，所以可以看到不同樣式的實作都有，可以很好的滿足不同開發的風格，

常用的組件有：Button，Form，Radio，Select，TimePicker，Upload，Table等，使用時需要可以參考Demo來撰寫，并且在組件界面頁的最后面有屬性的介紹和注意點，能夠很方便的來實作效果，

2、前端常用的字符物體有哪些及怎么書寫？

因為存在預留字符，當需要顯示這些字符的時候，那么可以使用字符物體， 常用的字符字體有:

（1）空格 
（2）小于號<
（3）雙引號"
（4）單引號'
（5）&與符號&
（6）大于號>

3、react的生命周期及不同生命周期的含義？

1）constructor中進行state的初始化，
2）componentDidMount中進行異步加載資料，添加事件監聽，
3）getDerivedStateFromProps中將傳入的props更新到state上，
4）componentDidUpdate中處理因為state變化觸發的請求，

4、常用的圖表繪制工具有哪些，可以實作哪些功能？

EChats提供不同平臺的多維度的資料展示，并支持多設備和多種可視化型別，
比如:
折線圖，
柱狀圖，
散點圖，
餅圖，
K線圖等，

5、阿里云OSS檔案上傳的流程是怎么樣？

因為涉及到OSS的key保存問題，所以最好將圖片發送給后臺，然后由后臺將圖片上傳OSS并回傳OSS的url，
圖片選擇使用ant-design的upload組件，

6、redux的主要作用和使用方式?

主要作用是：吧所有的state集中到組件頂部，能夠靈活的將所有state各取所需的分發給所有的組件，

store: 保存資料的地方，整個應用智能有一個Store，
state： 包含所有資料，一個state對應一個view，只要state相同，view就相同，
action：View發出的通知action，改變state，從而改變view，修改state的唯一辦法是使用Action，

7、升級專案依賴的第三方庫要怎么操作？

使用npm outdated 可以查看npm中有最新版本的包,然后使用ncu -u 進行依賴庫的升級，最后使用npm install進行新版本的安裝就可以了，

其中ncu是nom-check-updated的工具，通過npm install -g npm-check-updates來安裝， 升級完成后，需要查看依賴的第三方庫的版本是否有大版本的升級，比如從1.x升級到2.x或者3.x升級到4.x，涉及到跨版本升級的，那么一定要小心，需要去對應的官方查看版本遷移記錄，進行代碼的升級，

所以一般是推薦定時進行第三方庫的版本升級，可以有效的修復第三方庫存在的bug和避免跨大版本導致的升級影響較大的問題，

8、react新版本中Hook的怎么使用？

可以在不撰寫class的情況下使用state以及其他的React特性， 使用useState宣告新變數

// 宣告一個新的叫做 “count” 的 state 變數
  const [count, setCount] = useState(0);

useEffect給函陣列件增加了操作副作用的能力，與componentDidMount，componentDidUpdate和componentWillUnmount具有相同的用途，React會在每次渲染后呼叫副作用函式（包括第一次渲染的時候），

// 相當于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用瀏覽器的 API 更新頁面標題
    document.title = `You clicked ${count} times`;
  });

在組件中可以多次使用useEffect，

useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

副作用函式還可以通過回傳一個函式來指定如何“清除”副作用，比如，在上面的組件中使用副作用函式來訂閱好友的在線狀態，并通過取消訂閱來進行清除操作，可以理解為之前是在componentDidMount中添加ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);來訂閱好友的在線狀態，然后在componentWillUnmount中添加了ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);來取消訂閱，

useEffect第二個引數為一個依賴的值陣列，只有當陣列的值發生改變的時候，才執行effect的渲染，如果傳入的是一個空陣列，那么僅僅在組件掛載和卸載時執行一次，

9、git的了解，rebase和快進是什么含義？

git相對svn的最大的區別就是分布式，也就是說check out專案后，可以在本地進行代碼的提交，查看歷史版本，創建專案新分支等，

git中使用rebase來管理分支，能夠避免同一分支線因為多人的合并而導致分支線的不連貫， merger中當要合入的分支線A和被合入的分支B，A的基點是B上并B沒有新提交，此時就會進行快進及不生成一個合并的提交，也可以關閉快進，從而可以增加一個合并提交，可以很方便的觀察到誰進行過一次合并，

10、CSS選擇器串列優先級及權重？

1.通用選擇器（*）
2.元素(型別)選擇器 權重1
3.類選擇器 權重10
4.屬性選擇器
5.偽類
6.ID 選擇器 權重100
7.行內樣式 權重1000 !important規則會覆寫任何其他的宣告，只在需要覆寫全站或外部CSS的替丁頁面中使用，

11、CSS配置的常用屬性有哪些及作用？

12、bwebpack的作用及怎么使用？

模塊打包機，分析專案結構，找到JavaScript模塊以及一些瀏覽器不能直接運行的擴展語言(Scss, TypeScript等)，并將其打包為合適的格式以瀏覽器使用， 通過css-loader和style-loader將樣式表表嵌入webpack打包后的JS檔案中，

通過less-loader, sass-loader,stylus-loader進行CSS前處理器可以把特殊型別的陳述句轉化為瀏覽器可識別的CSS陳述句，

webpack使用插件來擴展webpack功能并在整個構建程序中生效和執行相關任務，如HtmlWebpackPlugin插件，依據一個簡單的模板生成最終的Html5檔案并在檔案中自動參考了打包后的JS檔案，

13、Promise實作及優缺點

Promise用于表示一個異步操作的最終完成（或失敗）及其結果值，

var myPromise = new Promise((resolve, reject) => {
  // 需要執行的代碼
  ...
  if (/* 異步執行成功 */) {
    resolve(value)
  } else if (/* 異步執行失敗 */) {
    reject(error)
  }
})

myPromise.then((value) => {
  // 成功后呼叫, 使用value值
}, (error) => {
  // 失敗后呼叫, 獲取錯誤資訊error
})

優點：
解決回呼地獄，對異步任務寫法更標準化與簡潔化，

缺點：首先無法取消Promise，一旦新建它就會立即執行，無法中途取消，其次，如果不設定回呼函式，Promise內部拋出錯誤，不會反應到外部，

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

14、Http狀態碼及含義

1xx: 服務器收到請求, 需請求者進一步操作
2xx: 請求成功
3xx: 重定向, 資源被轉移到其他URL了
4xx: 客戶端錯誤, 請求語法錯誤或沒有找到相應資源
5xx: 服務端錯誤, server error
301: 資源(網頁等)被永久轉移到其他URL, 回傳值中包含新的URL, 瀏覽器會自動定向到新URL
302: 臨時轉移. 客戶端應訪問原有URL
304: Not Modified. 指定日期后未修改, 不回傳資源
403: 服務器拒絕執行請求
404: 請求的資源(網頁等)不存在
500: 內部服務器錯誤

15、async和await的使用

async/await是寫異步代碼的新方式，以前的方法有回呼函式和Promise，
async/await是基于Promise實作的，它不能用于普通的回呼函式，
async/await與Promise一樣，是非阻塞的，
async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在，

16、setTimeout時間延遲為何不準

單執行緒，先執行同步主執行緒，再執行異步任務佇列，

17、let const var作用域及區別

塊級作用域，暫時性死區，
var 定義的變數，可以跨塊作用域訪問，不能跨函式作用域訪問，

let 定義的變數，只能在塊作用域里訪問，不能跨塊作用域訪問也不能跨函式作用域訪問，

const 定義常量，創建時必須賦值，只能在塊作用域里訪問并且不能修改，

18、for in, forEach和for of的區別

for in遍歷陣列會遍歷到陣列原型上的屬性和方法，更適合遍歷物件，遍歷到myObject的原型方法method，如果不想遍歷原型方法和屬性的話，可以在回圈內部判斷一下hasOwnProperty方法可以判斷某屬性是否是該物件的實體屬性，

forEach不支持break，continue，return等

for of可以成功遍歷陣列的值，而不是索引，不會遍歷原型，

19、localStorage 與 sessionStorage 與cookie的區別總結

共同點： 都保存在瀏覽器端且同源，

localStorage，sessionStorage統稱為webStorage，保存在瀏覽器，不參與服務器通信，大小為5M，

生命周期不同：localStorage永久保存，sessionStorage當前會話，都可以手動洗掉，

作用域不同： 不同瀏覽器不共享local和session，不同會話不共享session，

Cookie：設定的過期時間前一直有效，大小4K，有個數限制，各瀏覽器不同，一般為20個，攜帶在http頭中，過多會有性能問題，可自己封裝，也可用原生，

20、微信小程式組件的生命周期？

onLoad頁面加載：一個頁面只會呼叫一次，可以在onLoad中獲取打開當前頁面所呼叫的query引數，

onShow 頁面顯示：每次打開頁面都會呼叫一次，

onReady 頁面初次渲染完成：一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和視圖層進行互動，

onHide 頁面隱藏：當navigateTo或底部tab切換時呼叫，

onUnload 頁面卸載： 當頁面摧毀時執行，

21、微信小程式原理？

微信小程式采用JavaScript，WXML，WXSS三種技術進行開發，

JavaScript：首先JavaScript的代碼是運行在微信App中的，并不是運行在瀏覽器中，因此一些H5技術的應用，需要微信App提供對應的API支持，而這限制住了H5技術的應用，切不能稱為嚴格的H5.同理，微信提供的獨有的某些API，H5也不支持或支持的不是特別好，

WXML： WXML微信基于XML語法開發的，因此開發時，只能使用微信提供的現有標簽，HTML的標簽是無法使用的，

WXSS：具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并沒有詳細的檔案， 微信的架構是資料驅動的架構模式，UI和資料是分離的，所有的頁面更新都需要通過對資料的更改來實作， 微信程式分為兩個部分webview和appService，其中webview主要用來展現UI，appService有來處理業務邏輯、資料及介面呼叫，他們在兩個行程中運行，通過系統層JSBridge實作通信，實作UI的渲染、事件的處理，

22、HTTP狀態碼及其含義

通過此代碼，網站設計人員可設定"您所請求的資源無法找到"的個性頁面

1、ajax 實作原理及方法使用？
2、 說說 vue 中 key 的原理？
3、 vue 雙向系結的原理是什么？
4、vue 中$nextTick 有什么作用？
5、 淺談前端工程化、模塊化、組件化？
6、vue 專案優化的手段有哪些
7、mvc，mvp，mvvm 是什么
8、vue，jq，react，angular 區別，各自優勢
9、什么是虛擬 dom，優勢是什么，存盤在哪
10、談談 webpack 的理解
11、談談 event loop…35
12、介紹 HTTPS 握手程序
13、如何防范 CSRF 攻擊，XSS 攻擊
14、使用 sort() 對陣列 [3, 15, 8, 29, 102, 22] 進行排序，輸出結果
15、箭頭函式與普通函式的區別
16、簡述 react 的生命周期，資料變化會觸發哪些生命周期
17、SQL 陳述句的分類
18.什么是彈性布局？
19.撰寫回應式？
20.常見的瀏覽器兼容問題？
21.H5 新特性
22.C3 新特性：
23.什么是 typescript
24.三大框架的區別：
25.spa 應用優點：
26.什么是模塊化編程？
27.性能優化？
28.什么是 HTTP 協議：
29、快速擾亂陣列排序
30、JS 判斷設備來源
31、audio 元素和 video 元素在 ios 和 andriod 中實作自動播放
32、讓文本不可復制
33、水平垂直居中
34、改變 placeholder 的字體顏色
35、如何判斷一個 object 是陣列型別
36、CORS http 請求和普通 http 請求的區別
37、行內元素，塊元素，空元素有哪些？
38、src 和 href 的區別？
39、什么是 css HACK？
40、優雅降級和漸進增強？
41、new 運算子的實作
42、遞回深拷貝
43、JS 常見的四種記憶體泄漏

我目前是在職前端開發，如果你現在也想學習前端開發技術，在入門學習前端的程序當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我所在的前端學習交流裙：前面：42137 后面：4697，里面聚集了一些正在自學前端的初學者,轉行者，初階者，這套面試題囊括了幾乎所有前端的知識點，感興趣的可以點此獲取~