作為一個(gè)優(yōu)秀的程序員，不僅僅可以解決工作的問題，還要不斷的關(guān)注前端技術(shù)的發(fā)展，其中也包括了解最新的前端面試題，那么知識點(diǎn)來了，請接好

1. 你熟悉的es6

• let、const、var的使用區(qū)別
  let: 相當(dāng)于var,用于聲明一個(gè)變量,在塊級作用域有效(可解決for循環(huán)問題);不能重復(fù)聲明;不會(huì)變量提升;不會(huì)預(yù)處理
  const: 用于定義一個(gè)常量，不能修改，其他特點(diǎn)等同于let，用于保存不用改變的數(shù)據(jù)

• Map與普通對象的區(qū)別
  JavaScript 的對象(Object)，本質(zhì)上是鍵值對的集合(Hash 結(jié)構(gòu))，但是傳統(tǒng)上只能用字符串當(dāng)作鍵。這給它的使用帶來了很大的限制。為了解決這個(gè)問題，ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值(包括對象)都可以當(dāng)作鍵。也就是說，Object 結(jié)構(gòu)提供了“字符串—值”的對應(yīng)，Map 結(jié)構(gòu)提供了“值—值”的對應(yīng)，是一種更完善的 Hash 結(jié)構(gòu)實(shí)現(xiàn)。如果你需要“鍵值對”的數(shù)據(jù)結(jié)構(gòu)，Map 比 Object 更合適。

除了這兩個(gè)，關(guān)于es6的常用還有箭頭函數(shù)、模板字符串、變量的解構(gòu)賦值等

2. 你使用的跨域

所謂的跨域問題是由于瀏覽器的同源策略限制的，當(dāng)協(xié)議域名端口號不同即為跨域，對于協(xié)議和端口來說，前端不能解決。
解決跨域的幾種方式：

• JSONP 跨域 ： 這種方式跨域是通過script標(biāo)簽引入js文件，這個(gè)js文件又會(huì)返回一個(gè)js函數(shù)調(diào)用，也就是請求后通過callback的方式回傳結(jié)果
  優(yōu)點(diǎn)：
  1.不受同源策略的限制
  2.兼容性更好
  3.支持老版本瀏覽器
  缺點(diǎn)：只支持get請求

• CORS 跨域
  其原理是使用自定義的http頭部請求，讓瀏覽器與服務(wù)器之間進(jìn)行溝通，從而決定請求或響應(yīng)是否成功
  優(yōu)點(diǎn)：
  1.支持所有類型的http請求
  2.比jsonp有更好的錯(cuò)誤處理機(jī)制
  3.被大多數(shù)瀏覽器所支持

• h5的postMessage方法
  window.postMessage(message,targetOrigin) 方法是html5新引進(jìn)的特性，可以使用它來向其它的window對象發(fā)送消息，無論這個(gè)window對象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經(jīng)支持window.postMessage方法。這種方法不能和服務(wù)端交換數(shù)據(jù)，只能在兩個(gè)窗口(iframe)之間交換數(shù)據(jù)

3. 你了解的http狀態(tài)碼

?1** 信息，服務(wù)器收到請求，需要請求者繼續(xù)執(zhí)行操作(101，升級為websocket協(xié)議)
?2** 成功，操作被成功接收并處理(206,部分內(nèi)容，分段傳輸)
?3** 重定向，需要進(jìn)一步操作以完成請求(301,302重定向；304命中緩存)
?4** 客戶端錯(cuò)誤，請求包含語法錯(cuò)誤或無法完成請求(401,要求身份驗(yàn)證；403，服務(wù)器理解客服端需求，但是禁止訪問)
?5** 服務(wù)器錯(cuò)誤，服務(wù)器在處理請求的過程中發(fā)生了錯(cuò)誤

4. 你來評價(jià)一下ajax

• ajax的優(yōu)勢
  1.無刷新頁面請求，使產(chǎn)品更快，更小更友好
  2.服務(wù)器端的任務(wù)轉(zhuǎn)嫁到客戶端處理
  3.減輕瀏覽器負(fù)擔(dān)，節(jié)約帶寬
  4.基于標(biāo)準(zhǔn)化對象，不需要安裝特定的插件
  5.徹底將頁面與數(shù)據(jù)分離

• 缺點(diǎn)
  1.無法使用回退按鈕
  2.不利于網(wǎng)頁的SEO
  3.不能發(fā)送跨域請求
  -寫一個(gè)簡單的ajax請求

?getList:?function?()?{
????var?me?=?this;
????$.ajax({
????url:?'/test',
????type:?'POST',
????data:?{
??????repaymentId:?repaymentId
????},
????xhrFields:?{
??????withCredentials:?true
????},
????success:?function?(result)?{
???????if?(result.status?==?0)?{
???????????console.log('請求成功')
???????}?else?{
????????????console.log('請求異常')?????????
???????}
?????},
????error:?function?(result)?{
?????????$.toaster({?title:?'info',?priority:?'danger',?message:?'服務(wù)器異常，請聯(lián)系管理員！'?});
??????}
????})
???}
復(fù)制代碼

5. 你知道的vue的生命周期

關(guān)于vue生命周期，可參考這篇文章 鏈接

6. 你知道的react的生命周期

初始化

• componentWillMount 初始化調(diào)用，只調(diào)用一次
  render 渲染頁面

• componentDidMount 第一次渲染后調(diào)用

更新

• componentWillReceireProps 接收新的props時(shí)調(diào)用

• shouldComponentUpdate state或props改變時(shí)調(diào)用

• componentWillUpdate 將要更新時(shí)調(diào)用，可改變state的值
  render

• componentDidUpdate 更新后調(diào)用

卸載

• componentWillUnMount

7. react聲明默認(rèn)props

設(shè)置默認(rèn)props有兩種方式

• 指定 props 的默認(rèn)值， 這個(gè)方法只有瀏覽器編譯以后 才會(huì)生效

static?defaultProps?=?{?
??age:?18
}
復(fù)制代碼

• 指定 props 的默認(rèn)值，這個(gè)方法會(huì)一直生效

??Greeting.defaultProps?=?{????
????name:?'我是props的默認(rèn)值！'
??}
復(fù)制代碼

8. react創(chuàng)建組件的三種方式

1.函數(shù)式定義的無狀態(tài)組件，適用于純展示組件，只負(fù)責(zé)根據(jù)傳入的props展示，不涉及state狀態(tài)的操作，特點(diǎn)如下

• 組件不會(huì)被實(shí)例化，整體渲染性能得到提升。

• 組件不能訪問this對象

• 組件無法訪問生命周期的方法

• 無狀態(tài)組件只能訪問輸入的props，同樣的props會(huì)得到同樣的渲染結(jié)果，不會(huì)有副作用

2.es5原生方式React.createClass定義有狀態(tài)的組件

• 組件會(huì)被實(shí)例化

• 可以訪問生命周期

• 會(huì)自綁定函數(shù)方法
  3.es6形式的extends React.Component定義的組件，是以ES6的形式來創(chuàng)建react的組件的，是React目前極為推薦的創(chuàng)建有狀態(tài)組件的方式

React.createClass與React.Component區(qū)別

• this綁定不同
  React.createClass創(chuàng)建的組件，其每一個(gè)成員函數(shù)的this都有React自動(dòng)綁定，任何時(shí)候使用，直接使用this.method即可，函數(shù)中的this會(huì)被正確設(shè)置。
  React.Component創(chuàng)建的組件，其成員函數(shù)不會(huì)自動(dòng)綁定this，需要開發(fā)者手動(dòng)綁定，否則this不能獲取當(dāng)前組件實(shí)例對象。

• 組件屬性類型propTypes及其默認(rèn)props屬性defaultProps配置不同

• 組件初始狀態(tài)state的配置不同

• Mixins的支持不同

9. 你知道http與https的區(qū)別嗎

1、https協(xié)議需要到ca申請證書，一般免費(fèi)證書較少，因而需要一定費(fèi)用。
2、http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議。
3、http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。
4、http的連接很簡單，是無狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議安全

10. get與post的區(qū)別

• 表單的method屬性設(shè)置post時(shí)發(fā)送的是post請求，其余都是get請求

• get請求通過url地址發(fā)送請求參數(shù)，參數(shù)可以直接在地址欄中顯示，安全性較差；post是通過請求體發(fā)送請求參數(shù)，參數(shù)不能直接顯示，相對安全

• get請求URL地址長度限制在255字節(jié)內(nèi)，post請求沒有長度限制

11. 你對閉包的了解

外部函數(shù)調(diào)用之后其變量對象本應(yīng)該被銷毀，但閉包的存在使我們?nèi)匀豢梢栽L問外部函數(shù)的變量對象

12. vue動(dòng)態(tài)傳參以及獲取

//?傳參
router:?{
path:?'/test/:id'
}
//?獲取
this.$route.params.id
//?通過query
"{path:?'/test',query:{name:?'aaa'}}">跳轉(zhuǎn)
復(fù)制代碼

13. h5和css3新屬性

1.H5

• 語意化標(biāo)簽(nav、aside、dialog、header、footer等)

• canvas

• 拖放相關(guān)api

• Audio、Video

• 獲取地理位置

• 更好的input校驗(yàn)

• web存儲(localStorage、sessionStorage)

• webWorkers(類似于多線程并發(fā))

• webSocket
  2.CSS3

• 選擇器

• 邊框(border-image、border-radius、box-shadow)

• 背景(background-clip、background-origin、background-size)

• 漸變(linear-gradients、radial-gradents)

• 字體(@font-face)

• 轉(zhuǎn)換、形變(transform)

• 過度(transition)

• 動(dòng)畫(animation)

• 彈性盒模型(flex-box)

• 媒體查詢(@media)

14. 實(shí)現(xiàn)左右固定寬，中間自適應(yīng)

• 左右浮動(dòng)，中間加margin

<div?style="width:100%;?margin:0?auto;">?

???????<div?style="width:200px;?float:right;?background-color:#960">這是右側(cè)的內(nèi)容?固定寬度div>

???????<div?style="width:150px;?float:left;?background:#6FF">這是左側(cè)的內(nèi)容?固定寬度div>

???????<div?style="margin-left:150px;margin-right:200px;?background-color:#9F3">中間內(nèi)容，自適應(yīng)寬度div>

div>
復(fù)制代碼

• 左右加定位，中間加margin

• 使用負(fù)margin

還在后續(xù)補(bǔ)充中，不足之處還請指教…

源自：https://github.com/BooheeFE/weekly/issues/26

聲明：文章著作權(quán)歸作者所有，如有侵權(quán)，請聯(lián)系小編刪除。

感謝 · 轉(zhuǎn)發(fā)歡迎大家留言

總結(jié)

以上是生活随笔為你收集整理的@requestparam map 接收前端的值_前端面试总结篇（初级）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。