前端面試總結篇（初級）

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

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
<router-link :to="{path: '/test',query:{name: 'aaa'}}">跳轉</router-link>
複製代碼

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