@requestparam map 接收前端的值_前端面试总结篇（初级）
作為一個(gè)優(yōu)秀的程序員，不僅僅可以解決工作的問題，還要不斷的關(guān)注前端技術(shù)的發(fā)展，其中也包括了解最新的前端面試題，那么知識(shí)點(diǎn)來了，請(qǐng)接好
1. 你熟悉的es6
let、const、var的使用區(qū)別
let: 相當(dāng)于var,用于聲明一個(gè)變量,在塊級(jí)作用域有效(可解決for循環(huán)問題);不能重復(fù)聲明;不會(huì)變量提升;不會(huì)預(yù)處理
const: 用于定義一個(gè)常量，不能修改，其他特點(diǎn)等同于let，用于保存不用改變的數(shù)據(jù)Map與普通對(duì)象的區(qū)別
JavaScript 的對(duì)象(Object)，本質(zhì)上是鍵值對(duì)的集合(Hash 結(jié)構(gòu))，但是傳統(tǒng)上只能用字符串當(dāng)作鍵。這給它的使用帶來了很大的限制。為了解決這個(gè)問題，ES6 提供了 Map 數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類型的值(包括對(duì)象)都可以當(dāng)作鍵。也就是說，Object 結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng)，Map 結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)，是一種更完善的 Hash 結(jié)構(gòu)實(shí)現(xiàn)。如果你需要“鍵值對(duì)”的數(shù)據(jù)結(jié)構(gòu)，Map 比 Object 更合適。
除了這兩個(gè)，關(guān)于es6的常用還有箭頭函數(shù)、模板字符串、變量的解構(gòu)賦值等
2. 你使用的跨域
所謂的跨域問題是由于瀏覽器的同源策略限制的，當(dāng)協(xié)議域名端口號(hào)不同即為跨域，對(duì)于協(xié)議和端口來說，前端不能解決。
解決跨域的幾種方式：
JSONP 跨域 ： 這種方式跨域是通過script標(biāo)簽引入js文件，這個(gè)js文件又會(huì)返回一個(gè)js函數(shù)調(diào)用，也就是請(qǐng)求后通過callback的方式回傳結(jié)果
優(yōu)點(diǎn)：
1.不受同源策略的限制
2.兼容性更好
3.支持老版本瀏覽器
缺點(diǎn)：只支持get請(qǐng)求CORS 跨域
其原理是使用自定義的http頭部請(qǐng)求，讓瀏覽器與服務(wù)器之間進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是否成功
優(yōu)點(diǎn)：
1.支持所有類型的http請(qǐng)求
2.比jsonp有更好的錯(cuò)誤處理機(jī)制
3.被大多數(shù)瀏覽器所支持h5的postMessage方法
window.postMessage(message,targetOrigin) 方法是html5新引進(jìn)的特性，可以使用它來向其它的window對(duì)象發(fā)送消息，無論這個(gè)window對(duì)象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經(jīng)支持window.postMessage方法。這種方法不能和服務(wù)端交換數(shù)據(jù)，只能在兩個(gè)窗口(iframe)之間交換數(shù)據(jù)
3. 你了解的http狀態(tài)碼
?1** 信息，服務(wù)器收到請(qǐng)求，需要請(qǐng)求者繼續(xù)執(zhí)行操作(101，升級(jí)為websocket協(xié)議)
?2** 成功，操作被成功接收并處理(206,部分內(nèi)容，分段傳輸)
?3** 重定向，需要進(jìn)一步操作以完成請(qǐng)求(301,302重定向；304命中緩存)
?4** 客戶端錯(cuò)誤，請(qǐng)求包含語法錯(cuò)誤或無法完成請(qǐng)求(401,要求身份驗(yàn)證；403，服務(wù)器理解客服端需求，但是禁止訪問)
?5** 服務(wù)器錯(cuò)誤，服務(wù)器在處理請(qǐng)求的過程中發(fā)生了錯(cuò)誤
4. 你來評(píng)價(jià)一下ajax
ajax的優(yōu)勢
1.無刷新頁面請(qǐng)求，使產(chǎn)品更快，更小更友好
2.服務(wù)器端的任務(wù)轉(zhuǎn)嫁到客戶端處理
3.減輕瀏覽器負(fù)擔(dān)，節(jié)約帶寬
4.基于標(biāo)準(zhǔn)化對(duì)象，不需要安裝特定的插件
5.徹底將頁面與數(shù)據(jù)分離缺點(diǎn)
1.無法使用回退按鈕
2.不利于網(wǎng)頁的SEO
3.不能發(fā)送跨域請(qǐng)求
-寫一個(gè)簡單的ajax請(qǐng)求
????var?me?=?this;
????$.ajax({
????url:?'/test',
????type:?'POST',
????data:?{
??????repaymentId:?repaymentId
????},
????xhrFields:?{
??????withCredentials:?true
????},
????success:?function?(result)?{
???????if?(result.status?==?0)?{
???????????console.log('請(qǐng)求成功')
???????}?else?{
????????????console.log('請(qǐng)求異常')?????????
???????}
?????},
????error:?function?(result)?{
?????????$.toaster({?title:?'info',?priority:?'danger',?message:?'服務(wù)器異常，請(qǐng)聯(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的值
rendercomponentDidUpdate 更新后調(diào)用
卸載
componentWillUnMount
7. react聲明默認(rèn)props
設(shè)置默認(rèn)props有兩種方式
指定 props 的默認(rèn)值， 這個(gè)方法只有瀏覽器編譯以后 才會(huì)生效
??age:?18
}
復(fù)制代碼
指定 props 的默認(rèn)值，這個(gè)方法會(huì)一直生效
????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對(duì)象
組件無法訪問生命周期的方法
無狀態(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í)例對(duì)象。組件屬性類型propTypes及其默認(rèn)props屬性defaultProps配置不同
組件初始狀態(tài)state的配置不同
Mixins的支持不同
9. 你知道http與https的區(qū)別嗎
1、https協(xié)議需要到ca申請(qǐng)證書，一般免費(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請(qǐng)求，其余都是get請(qǐng)求
get請(qǐng)求通過url地址發(fā)送請(qǐng)求參數(shù)，參數(shù)可以直接在地址欄中顯示，安全性較差；post是通過請(qǐng)求體發(fā)送請(qǐng)求參數(shù)，參數(shù)不能直接顯示，相對(duì)安全
get請(qǐng)求URL地址長度限制在255字節(jié)內(nèi)，post請(qǐng)求沒有長度限制
11. 你對(duì)閉包的了解
外部函數(shù)調(diào)用之后其變量對(duì)象本應(yīng)該被銷毀，但閉包的存在使我們?nèi)匀豢梢栽L問外部函數(shù)的變量對(duì)象
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存儲(chǔ)(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: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ǔ)充中，不足之處還請(qǐng)指教…
源自：https://github.com/BooheeFE/weekly/issues/26
聲明：文章著作權(quán)歸作者所有，如有侵權(quán)，請(qǐng)聯(lián)系小編刪除。
感謝 · 轉(zhuǎn)發(fā)歡迎大家留言總結(jié)
以上是生活随笔為你收集整理的@requestparam map 接收前端的值_前端面试总结篇（初级）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 超融合和服务器关系_关于超融合一体机，联
- 下一篇： java消费者中url找不到,java