作為一個優秀的程序員，不僅僅可以解決工作的問題，還要不斷的關注前端技術的發展，其中也包括了解最新的前端面試題，那么知識點來了，請接好

1. 你熟悉的es6

• let、const、var的使用區別
  let: 相當于var,用于聲明一個變量,在塊級作用域有效(可解決for循環問題);不能重復聲明;不會變量提升;不會預處理
  const: 用于定義一個常量，不能修改，其他特點等同于let，用于保存不用改變的數據

• Map與普通對象的區別
  JavaScript 的對象(Object)，本質上是鍵值對的集合(Hash 結構)，但是傳統上只能用字符串當作鍵。這給它的使用帶來了很大的限制。為了解決這個問題，ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值(包括對象)都可以當作鍵。也就是說，Object 結構提供了“字符串—值”的對應，Map 結構提供了“值—值”的對應，是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構，Map 比 Object 更合適。

除了這兩個，關于es6的常用還有箭頭函數、模板字符串、變量的解構賦值等

2. 你使用的跨域

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

• JSONP 跨域 ： 這種方式跨域是通過script標簽引入js文件，這個js文件又會返回一個js函數調用，也就是請求后通過callback的方式回傳結果
  優點：
  1.不受同源策略的限制
  2.兼容性更好
  3.支持老版本瀏覽器
  缺點：只支持get請求

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

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

3. 你了解的http狀態碼

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

4. 你來評價一下ajax

• ajax的優勢
  1.無刷新頁面請求，使產品更快，更小更友好
  2.服務器端的任務轉嫁到客戶端處理
  3.減輕瀏覽器負擔，節約帶寬
  4.基于標準化對象，不需要安裝特定的插件
  5.徹底將頁面與數據分離

• 缺點
  1.無法使用回退按鈕
  2.不利于網頁的SEO
  3.不能發送跨域請求
  -寫一個簡單的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:?'服務器異常，請聯系管理員！'?});
??????}
????})
???}
復制代碼

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

關于vue生命周期，可參考這篇文章 鏈接

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

初始化

• componentWillMount 初始化調用，只調用一次
  render 渲染頁面

• componentDidMount 第一次渲染后調用

更新

• componentWillReceireProps 接收新的props時調用

• shouldComponentUpdate state或props改變時調用

• componentWillUpdate 將要更新時調用，可改變state的值
  render

• componentDidUpdate 更新后調用

卸載

• componentWillUnMount

7. react聲明默認props

設置默認props有兩種方式

• 指定 props 的默認值， 這個方法只有瀏覽器編譯以后 才會生效

static?defaultProps?=?{?
??age:?18
}
復制代碼

• 指定 props 的默認值，這個方法會一直生效

??Greeting.defaultProps?=?{????
????name:?'我是props的默認值！'
??}
復制代碼

8. react創建組件的三種方式

1.函數式定義的無狀態組件，適用于純展示組件，只負責根據傳入的props展示，不涉及state狀態的操作，特點如下

• 組件不會被實例化，整體渲染性能得到提升。

• 組件不能訪問this對象

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

• 無狀態組件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用

2.es5原生方式React.createClass定義有狀態的組件

• 組件會被實例化

• 可以訪問生命周期

• 會自綁定函數方法
  3.es6形式的extends React.Component定義的組件，是以ES6的形式來創建react的組件的，是React目前極為推薦的創建有狀態組件的方式

React.createClass與React.Component區別

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

• 組件屬性類型propTypes及其默認props屬性defaultProps配置不同

• 組件初始狀態state的配置不同

• Mixins的支持不同

9. 你知道http與https的區別嗎

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

10. get與post的區別

• 表單的method屬性設置post時發送的是post請求，其余都是get請求

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

• get請求URL地址長度限制在255字節內，post請求沒有長度限制

11. 你對閉包的了解

外部函數調用之后其變量對象本應該被銷毀，但閉包的存在使我們仍然可以訪問外部函數的變量對象

12. vue動態傳參以及獲取

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

13. h5和css3新屬性

1.H5

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

• canvas

• 拖放相關api

• Audio、Video

• 獲取地理位置

• 更好的input校驗

• web存儲(localStorage、sessionStorage)

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

• webSocket
  2.CSS3

• 選擇器

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

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

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

• 字體(@font-face)

• 轉換、形變(transform)

• 過度(transition)

• 動畫(animation)

• 彈性盒模型(flex-box)

• 媒體查詢(@media)

14. 實現左右固定寬，中間自適應

• 左右浮動，中間加margin

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

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

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

???????<div?style="margin-left:150px;margin-right:200px;?background-color:#9F3">中間內容，自適應寬度div>

div>
復制代碼

• 左右加定位，中間加margin

• 使用負margin

還在后續補充中，不足之處還請指教…

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

聲明：文章著作權歸作者所有，如有侵權，請聯系小編刪除。

感謝 · 轉發歡迎大家留言

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。