289頁初中級前端題助你拿下Offer

需要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配置的常用屬性有哪些及作用?

分類 屬性
寬和高 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 固定

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狀態碼及其含義

狀態碼類型狀態碼 類別 原因短語
1XX Information(信息性狀態碼) 接收的請求正在處理
2XX Success(成功狀態碼) 請求正常處理完畢
3XX Redirection(重定向狀態碼) 需要進行附加的操作以完成請求
4XX Client Error(客戶端錯誤狀態碼) 服務器無法處理請求
5XX Server Error(服務端錯誤狀態碼) 服務器處理請求出錯
204 服務器成功處理,但未返回內容。
304 Not Modified 未修改。 所請求的資源未修改,服務器返回此狀態碼時,不會返回任何資源。客戶端通常會緩存訪問過的資源,通過提供一個頭信息指出客戶端希望只返回在指定日期之后修改的資源
400 Bad Request 客戶端請求的語法錯誤,服務器無法理解
403 Forbidden 服務器理解請求客戶端的請求,但是拒絕執行此請求
404 Not Found 服務器無法根據客戶端的請求找到資源(網頁)。

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

289頁前端面試題

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。里面聚集了一些正在自學前端的初學者,轉行者,初階者,這套面試題囊括了幾乎所有前端的知識點,感興趣的可以點此獲取~

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,837評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,196評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,688評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,654評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,456評論 6 406
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,955評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,044評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,195評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,725評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,608評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,802評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,318評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,048評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,422評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,673評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,424評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,762評論 2 372

推薦閱讀更多精彩內容