289頁初中級前端題
一、ant-design的使用總結及經常使用組件和他們的基本用法?
ant-design爲React，Angular和Vue都提供了組件，同時爲PC和移動端提供了經常使用的基礎組件。ant-design提供的demo很是的豐富而且樣式可以基本的覆蓋開發需求。antd的Demo由於是多人編寫的，因此能夠看到不一樣樣式的實現都有，能夠很好的知足不一樣開發的風格。css
經常使用的組件有：Button，Form，Radio，Select，TimePicker，Upload，Table等。使用時須要能夠參考Demo來編寫，而且在組件界面頁的最後面有屬性的介紹和注意點。可以很方便的來實現效果。前端
二、前端經常使用的字符實體有哪些及怎麼書寫？
由於存在預留字符，當須要顯示這些字符的時候，那麼可使用字符實體。 經常使用的字符字體有:vue
（1）空格 （2）小於號< （3）雙引號" （4）單引號' （5）& 與符號& （6）大於號 >react
三、react的生命週期及不一樣生命週期的含義？
1）constructor中進行state的初始化。webpack
2）componentDidMount中進行異步加載數據，添加事件監聽。ios
3）getDerivedStateFromProps中將傳入的props更新到state上。git
4）componentDidUpdate中處理由於state變化觸發的請求。web
四、經常使用的圖表繪製工具備哪些，能夠實現哪些功能？
EChats提供不一樣平臺的多維度的數據展現，並支持多設備和多種可視化類型， 好比: 折線圖， 柱狀圖， 散點圖， 餅圖， K線圖等。面試
五、阿里雲OSS文件上傳的流程是怎麼樣？
由於涉及到OSS的key保存問題，因此最好將圖片發送給後臺，而後由後臺將圖片上傳OSS並返回OSS的url。 圖片選擇使用ant-design的upload組件。ajax
六、redux的主要做用和使用方式?
主要做用是：吧全部的state集中到組件頂部，可以靈活的將全部state各取所需的分發給全部的組件。
store: 保存數據的地方。整個應用智能有一個Store。 state： 包含全部數據，一個state對應一個view。只要state相同，view就相同。 action：View發出的通知action，改變state，從而改變view。修改state的惟一辦法是使用Action。
七、升級項目依賴的第三方庫要怎麼操做？
使用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和避免跨大版本致使的升級影響較大的問題。
八、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的渲染。若是傳入的是一個空數組，那麼僅僅在組件掛載和卸載時執行一次。
九、git的瞭解，rebase和快進是什麼含義？
git相對svn的最大的區別就是分佈式，也就是說check out項目後，能夠在本地進行代碼的提交，查看歷史版本，建立項目新分支等。
git中使用rebase來管理分支，可以避免同一分支線由於多人的合併而致使分支線的不連貫。 merger中當要合入的分支線A和被合入的分支B，A的基點是B上並B沒有新提交，此時就會進行快進及不生成一個合併的提交。也能夠關閉快進，從而能夠增長一個合併提交，能夠很方便的觀察到誰進行過一次合併。
十、CSS選擇器列表優先級及權重？
1.通用選擇器（*） 2.元素(類型)選擇器 權重1 3.類選擇器 權重10 4.屬性選擇器 5.僞類 6.ID 選擇器 權重100 7.內聯樣式 權重1000 !important規則會覆蓋任何其餘的聲明，只在須要覆蓋全站或外部CSS的替丁頁面中使用。
十一、CSS配置的經常使用屬性有哪些及做用？
| 分類 | 屬性 | 值 |
|---|---|---|
| 寬和高 | width 寬度；height 高；max-height 跟着父標籤 | |
| 字體屬性 | color 顏色；font-family 字體；font-size 文字大小；font-weight 文字粗細 | normal 默認值 bold 粗體 bolder 更粗 lighter 更細 100~900 具體粗細 inherit 繼承類元素字體的粗細值 |
| 顏色 | 十六進制值: #FF0000; 單詞表示: blue，red; RGB值: (255, 0, 0);rgba(200, 0, 0, 0.3) | |
| 文字屬性 | text-align，text-decoration, text-indent 段落縮進32像素 | left 左邊對齊 right 右對齊 center 居中對齊 justify 兩端對齊; none 默認 underline 文本下一條線 overline 文本上一條線 line-through 穿過文本一條線 inherit 繼承父類屬性 |
| 背景屬性 | 背景顏色background-color: red; 背景圖片background-image: url('1.jpg');背景重複 background-repeat: repeat; 背景位置 background-position: right top | |
| CSS盒子 | margin 控制元素與元素之間的距離;padding 控制內容與邊框之間的距離; border 內邊距和內容外的邊框; content 內容,顯示文本和圖像; | 簡寫順序：上 右 下 左 |
| 邊框 | border-width, border-style, border-color;能夠簡寫爲border:2px solid red; | border-radius 實現圓角邊框；border-style的值有none 無邊框 dotted 點狀虛線邊框 dashed 矩形虛線邊框 solid 實現邊 |
| 顯示 | display | none 不顯示；block 沾滿整個頁面寬度；inline 顯示爲內聯元素；inline-block 具備內元素和塊級元素 |
| 浮動 | float 任何元素均可以浮動；clear屬性指定側不容許其餘浮動元素； | float的屬性：left 向左，right 向右，none 不浮動。clear屬性left在左側不容許浮動元素，right在右側不容許浮動元素，both左右兩側不容許，none 容許出現；inherit 繼承父元素； |
| 溢出 | overflow | visible 內容不會被修剪，hidden 內容被修剪並其他內容不可見，scroll內容被修剪並顯示滾動條可查看其他的內容，auto內容被修剪並顯示滾動條可查看其他的內容，inherit從父元素繼承 |
| 定位 | position | static 無定位，relative 相對定位，absolute 絕對定位，fixed 固定 |
十二、bwebpack的做用及怎麼使用？
模塊打包機，分析項目結構，找到JavaScript模塊以及一些瀏覽器不能直接運行的擴展語言(Scss, TypeScript等)，並將其打包爲合適的格式以瀏覽器使用。 經過css-loader和style-loader將樣式表表嵌入webpack打包後的JS文件中。
經過less-loader, sass-loader,stylus-loader進行CSS預處理器能夠把特殊類型的語句轉化爲瀏覽器可識別的CSS語句。
webpack使用插件來擴展webpack功能並在整個構建過程當中生效和執行相關任務。如HtmlWebpackPlugin插件，依據一個簡單的模板生成最終的Html5文件並在文件中自動引用了打包後的JS文件。
1三、Promise實現及優缺點
Promise用於表示一個異步操做的最終完成（或失敗）及其結果值。
var myPromise = new Promise((resolve, reject) => {
// 須要執行的代碼
...
if (/* 異步執行成功 */) {
resolve(value)
} else if (/* 異步執行失敗 */) {
reject(error)
}
})
myPromise.then((value) => {
// 成功後調用, 使用value值
}, (error) => {
// 失敗後調用, 獲取錯誤信息error
})
優勢： 解決回調地獄，對異步任務寫法更標準化與簡潔化。
缺點：首先沒法取消Promise，一旦新建它就會當即執行，沒法中途取消。其次，若是不設置回調函數，Promise內部拋出錯誤，不會反應到外部。
第三，當處於pending狀態時，沒法得知目前進展到哪個階段。
1四、Http狀態碼及含義
1xx: 服務器收到請求, 需請求者進一步操做 2xx: 請求成功 3xx: 重定向, 資源被轉移到其餘URL了 4xx: 客戶端錯誤, 請求語法錯誤或沒有找到相應資源 5xx: 服務端錯誤, server error 301: 資源(網頁等)被永久轉移到其餘URL, 返回值中包含新的URL, 瀏覽器會自動定向到新URL 302: 臨時轉移. 客戶端應訪問原有URL 304: Not Modified. 指定日期後未修改, 不返回資源 403: 服務器拒絕執行請求 404: 請求的資源(網頁等)不存在 500: 內部服務器錯誤
1五、async和await的使用
async/await是寫異步代碼的新方式，之前的方法有回調函數和Promise。 async/await是基於Promise實現的，它不能用於普通的回調函數。 async/await與Promise同樣，是非阻塞的。 async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。
1六、setTimeout時間延遲爲什麼不許
單線程，先執行同步主線程，再執行異步任務隊列。
1七、let const var做用域及區別
塊級做用域，暫時性死區。 var 定義的變量，能夠跨塊做用域訪問，不能跨函數做用域訪問。
let 定義的變量，只能在塊做用域裏訪問，不能跨塊做用域訪問也不能跨函數做用域訪問。
const 定義常量，建立時必須賦值，只能在塊做用域裏訪問而且不能修改。
1八、for in, forEach和for of的區別
for in遍歷數組會遍歷到數組原型上的屬性和方法，更適合遍歷對象。遍歷到myObject的原型方法method，若是不想遍歷原型方法和屬性的話，能夠在循環內部判斷一下hasOwnProperty方法能夠判斷某屬性是不是該對象的實例屬性。
forEach不支持break，continue，return等
for of能夠成功遍歷數組的值，而不是索引，不會遍歷原型。
1九、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 頁面卸載： 當頁面摧毀時執行。
2一、微信小程序原理？
微信小程序採用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的渲染、事件的處理。
2二、HTTP狀態碼及其含義
| 狀態碼類型狀態碼 | 類別 | 緣由短語 |
|---|---|---|
| 1XX | Information（信息性狀態碼） | 接收的請求正在處理 |
| 2XX | Success（成功狀態碼） | 請求正常處理完畢 |
| 3XX | Redirection（重定向狀態碼） | 須要進行附加的操做以完成請求 |
| 4XX | Client Error（客戶端錯誤狀態碼） | 服務器沒法處理請求 |
| 5XX | Server Error（服務端錯誤狀態碼） | 服務器處理請求出錯 |
| 204 | 服務器成功處理，但未返回內容。 | |
| 304 | Not Modified 未修改。 | 所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端一般會緩存訪問過的資源，經過提供一個頭信息指出客戶端但願只返回在指定日期以後修改的資源 |
| 400 | Bad Request | 客戶端請求的語法錯誤，服務器沒法理解 |
| 403 | Forbidden | 服務器理解請求客戶端的請求，可是拒絕執行此請求 |
| 404 | Not Found | 服務器沒法根據客戶端的請求找到資源（網頁）。 |
經過此代碼，網站設計人員可設置"您所請求的資源沒法找到"的個性頁面
一、ajax 實現原理及方法使用？
二、 說說 vue 中 key 的原理？
三、 vue 雙向綁定的原理是什麼？
四、vue 中$nextTick 有什麼做用？
五、 淺談前端工程化、模塊化、組件化
六、vue 項目優化的手段有哪些
七、mvc，mvp，mvvm 是什麼
八、vue，jq，react，angular 區別，各自優點
九、什麼是虛擬 dom，優點是什麼，存儲在哪
十、談談 webpack 的理解
十一、談談 event loop..35
十二、介紹 HTTPS 握手過程
1三、如何防範 CSRF 攻擊，XSS 攻擊
1四、使用 sort() 對數組 [3, 15, 8, 29, 102, 22] 進行排序，輸出結果
1五、箭頭函數與普通函數的區別
1六、簡述 react 的生命週期，數據變化會觸發哪些生命週期
1七、SQL 語句的分類
18.什麼是彈性佈局？
19.編寫響應式？
20.常見的瀏覽器兼容問題？
21.H5 新特性
22.C3 新特性：
23.什麼是 typescript
24.三大框架的區別：
25.spa 應用優勢：
26.什麼是模塊化編程？
27.性能優化？
28.什麼是 HTTP 協議：
2九、快速擾亂數組排序
30、JS 判斷設備來源
3一、audio 元素和 video 元素在 ios 和 andriod 中實現自動播放
3二、讓文本不可複製
3三、水平垂直居中
3四、改變 placeholder 的字體顏色
3五、如何判斷一個 object 是數組類型
3六、CORS http 請求和普通 http 請求的區別
3七、行內元素，塊元素，空元素有哪些？
3八、src 和 href 的區別？
3九、什麼是 css HACK？
40、優雅降級和漸進加強？
4一、new 操做符的實現
4二、遞歸深拷貝
4三、JS 常見的四種內存泄漏
最後，文章中涉及到面試資料，均免費分享，只需你多多支持我便可哦！ 我目前是在職前端開發，若是你如今也想學習前端開發技術，在入門學習前端的過程中有碰見任何關於學習方法，學習路線，學習效率等方面的問題，你均可以申請加入我所在的前端學習交流裙：前面：42137 後面：4697。裏面彙集了一些正在自學前端的初學者,轉行者，初階者