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

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

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

常用的組件有：Button，F(xiàn)orm，Radio，Select，TimePicker，Upload，Table等。使用時需要可以參考Demo來編寫，并且在組件界面頁的最后面有屬性的介紹和注意點。能夠很方便的來實現(xiàn)效果。

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

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

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

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

1）constructor中進行state的初始化。
2）componentDidMount中進行異步加載數(shù)據(jù)，添加事件監(jiān)聽。
3）getDerivedStateFromProps中將傳入的props更新到state上。
4）componentDidUpdate中處理因為state變化觸發(fā)的請求。

4、常用的圖表繪制工具有哪些，可以實現(xiàn)哪些功能？

EChats提供不同平臺的多維度的數(shù)據(jù)展示，并支持多設(shè)備和多種可視化類型，
比如:
折線圖，
柱狀圖，
散點圖，
餅圖，
K線圖等。

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

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

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

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

store: 保存數(shù)據(jù)的地方。整個應用智能有一個Store。
state： 包含所有數(shù)據(jù)，一個state對應一個view。只要state相同，view就相同。
action：View發(fā)出的通知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給函數(shù)組件增加了操作副作用的能力，與componentDidMount，componentDidUpdate和componentWillUnmount具有相同的用途。React會在每次渲染后調(diào)用副作用函數(shù)（包括第一次渲染的時候）。

// 相當于 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);
    };
  });

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

useEffect第二個參數(shù)為一個依賴的值數(shù)組，只有當數(shù)組的值發(fā)生改變的時候，才執(zhí)行effect的渲染。如果傳入的是一個空數(shù)組，那么僅僅在組件掛載和卸載時執(zhí)行一次。

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

git相對svn的最大的區(qū)別就是分布式，也就是說check out項目后，可以在本地進行代碼的提交，查看歷史版本，創(chuàng)建項目新分支等。

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

10、CSS選擇器列表優(yōu)先級及權(quán)重？

1.通用選擇器（*）
2.元素(類型)選擇器 權(quán)重1
3.類選擇器 權(quán)重10
4.屬性選擇器
5.偽類
6.ID 選擇器 權(quán)重100
7.內(nèi)聯(lián)樣式 權(quán)重1000 !important規(guī)則會覆蓋任何其他的聲明，只在需要覆蓋全站或外部CSS的替丁頁面中使用。

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

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

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

通過less-loader, sass-loader,stylus-loader進行CSS預處理器可以把特殊類型的語句轉(zhuǎn)化為瀏覽器可識別的CSS語句。

webpack使用插件來擴展webpack功能并在整個構(gòu)建過程中生效和執(zhí)行相關(guān)任務。如HtmlWebpackPlugin插件，依據(jù)一個簡單的模板生成最終的Html5文件并在文件中自動引用了打包后的JS文件。

13、Promise實現(xiàn)及優(yōu)缺點

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

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

myPromise.then((value) => {
  // 成功后調(diào)用, 使用value值
}, (error) => {
  // 失敗后調(diào)用, 獲取錯誤信息error
})

優(yōu)點：
解決回調(diào)地獄，對異步任務寫法更標準化與簡潔化。

缺點：首先無法取消Promise，一旦新建它就會立即執(zhí)行，無法中途取消。其次，如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出錯誤，不會反應到外部。

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

14、Http狀態(tài)碼及含義

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

15、async和await的使用

async/await是寫異步代碼的新方式，以前的方法有回調(diào)函數(shù)和Promise。
async/await是基于Promise實現(xiàn)的，它不能用于普通的回調(diào)函數(shù)。
async/await與Promise一樣，是非阻塞的。
async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。

16、setTimeout時間延遲為何不準

單線程，先執(zhí)行同步主線程，再執(zhí)行異步任務隊列。

17、let const var作用域及區(qū)別

塊級作用域，暫時性死區(qū)。
var 定義的變量，可以跨塊作用域訪問，不能跨函數(shù)作用域訪問。

let 定義的變量，只能在塊作用域里訪問，不能跨塊作用域訪問也不能跨函數(shù)作用域訪問。

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

18、for in, forEach和for of的區(qū)別

for in遍歷數(shù)組會遍歷到數(shù)組原型上的屬性和方法，更適合遍歷對象。遍歷到myObject的原型方法method，如果不想遍歷原型方法和屬性的話，可以在循環(huán)內(nèi)部判斷一下hasOwnProperty方法可以判斷某屬性是否是該對象的實例屬性。

forEach不支持break，continue，return等

for of可以成功遍歷數(shù)組的值，而不是索引，不會遍歷原型。

19、localStorage 與 sessionStorage 與cookie的區(qū)別總結(jié)

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

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

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

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

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

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

onLoad頁面加載：一個頁面只會調(diào)用一次，可以在onLoad中獲取打開當前頁面所調(diào)用的query參數(shù)。

onShow 頁面顯示：每次打開頁面都會調(diào)用一次。

onReady 頁面初次渲染完成：一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。

onHide 頁面隱藏：當navigateTo或底部tab切換時調(diào)用。

onUnload 頁面卸載： 當頁面摧毀時執(zhí)行。

21、微信小程序原理？

微信小程序采用JavaScript，WXML，WXSS三種技術(shù)進行開發(fā)。

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

WXML： WXML微信基于XML語法開發(fā)的，因此開發(fā)時，只能使用微信提供的現(xiàn)有標簽，HTML的標簽是無法使用的。

WXSS：具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并沒有詳細的文檔。 微信的架構(gòu)是數(shù)據(jù)驅(qū)動的架構(gòu)模式，UI和數(shù)據(jù)是分離的，所有的頁面更新都需要通過對數(shù)據(jù)的更改來實現(xiàn)。 微信程序分為兩個部分webview和appService。其中webview主要用來展現(xiàn)UI，appService有來處理業(yè)務邏輯、數(shù)據(jù)及接口調(diào)用。他們在兩個進程中運行，通過系統(tǒng)層JSBridge實現(xiàn)通信，實現(xiàn)UI的渲染、事件的處理。

22、HTTP狀態(tài)碼及其含義

通過此代碼，網(wǎng)站設(shè)計人員可設(shè)置"您所請求的資源無法找到"的個性頁面

289頁前端面試題

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

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