【自種樹自乘涼】前端高頻知識點 - 面向面試複習法

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰vue

是時候寄出失傳已久的——面向面試複習法！es6

目錄：面試

HTML篇

CSS篇

JS篇

DOM篇

HTTP篇

Vue2篇

安全篇

瀏覽器兼容篇

一. HTML 篇

1. 什麼是 HTML 語義化？

答：就是使用恰當語義的 HTML 標籤，好比段落用 <p>，邊欄用 <aside>，主要內容用 <main>，頁眉用 <header>，這樣能讓人和機器都能快速理解網頁內容。ajax

2. meta viewport 是作什麼用的，怎麼寫？

寫法：<meta name="viewport" content="width=device-width, initial-scale=1.0">正則表達式

用處：控制頁面在移動端不要縮小顯示。canvas

3. 你用過哪些 HTML5 標籤？

答：內容相關的有頁眉 <header>，內容 <main>，邊欄 <aside>，腳註 <footer> 等。跨域

功能相關的有 <canvas>，<video> 等。數組

4. H5 是什麼？

答：H5 != HTML5，H5是移動端頁面，不是必定要用了 HTML5 語法的頁面纔是 H5。promise

二. CSS篇

1. 說一說兩種盒模型

答：content-box（W3C盒模型）的寬度 == 內容區寬度瀏覽器

border-box（IE盒模型）的寬度 == 內容區寬度 + padding 寬度 + border 寬度

經過 box-sizing 屬性切換兩種盒模型

2. 如何水平居中？如何垂直居中？

水平居中：

內聯元素水平居中：在父元素上設置 text-align : center;
塊級元素水平居中：margin : 0 auto;

垂直居中：

CSS 實現垂直水平居中

3. Flex 怎麼用？常見的屬性有哪些？

Flexbox 彈性佈局總結

4. BFC 是什麼？

答：BFC 就是塊格式化上下文。

舉例：若是給一個 div 寫一個 overflow: hidden;（清除浮動）那麼這個div裏面的浮動元素就會被 div 包裹起來。

BFC造成的條件：

浮動
絕對定位、固定定位
overflow 除了默認值（visible）之外的值：hidden、auto、scroll
display : inline-block
等等

5. CSS 選擇器優先級？

權重法（CSS2）：行內樣式是1000 > id選擇器是100 > 類選擇器是10 > 元素選擇器是1

更準確的判斷法（CSS3）：

選擇器越具體（權重之和越大）優先級越高
寫在後面的 CSS 覆蓋前面的 CSS
!important 優先級最高，可是建議少用。

6. 清除浮動的代碼？

父元素添加以下代碼，裏面的子元素就清除浮動了：

.clearfix::after {
  content: ""; // 空串
  display: block; // 顯示爲塊級元素
  clear: both; // 清除兩側浮動的影響
}

.clearfix {
     zoom: 1; // IE兼容
 }
複製代碼

或者直接：overflow: hidden; 但不建議用這個。

三. JS 篇

1. ES6 語法知道哪些？怎麼用？

ES6 新特徵總結

2. Promise 分別怎麼用？

Promise 的用法之 then 的用法：

$.ajax(...).then(成功函數, 失敗函數)

鏈式 then 的用法：

$.ajax(...).then(成功函數1, 失敗函數1).then(成功函數2, 失敗函數2)

其餘方法，例如 Promise.all、Promise.race，建議直接通讀：

ES6 標準入門 - Promise 篇 - 阮一峯

3. 如何本身生成 Promise 對象

// 背代碼咯
function fn(){
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      // resolive() 或者 reject()
    }, 3000)
  })
}

// 而後咱們就能夠 then 了
fn().then(...)
複製代碼

4. async/await 語法瞭解嗎？目的是什麼？

目的：把異步代碼寫成同步代碼

// 老的寫法（異步）：
function fn() {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      resolive('哈哈哈')
    }, 3000)
  })
}

fn().then((res) => {
  res === '哈哈哈' // true
})

// 新的寫法（同步）：
async function fn2() {
  var res = await fn();
  res === '哈哈哈' // true
}
複製代碼

5. 手寫函數防抖和函數節流

節流函數

能夠把它理解成遊戲中的CD冷卻時間，當技能在冷卻時間內的時候，咱們就不能使用該技能。

function fn() {
  // 遊戲技能
}

var cd  = false; // 是否冷卻中

button.onclick = function() {
  if (cd) {
    // 不能使用技能
  } else {
    fn(); // 使用技能
    cd = true; // 進入冷卻時間
    var timerId = setTimeout(() => {
      cd = false
    }, 3000) // 3秒後技能纔可用
  }
}
複製代碼

防抖函數

咱們想象一個情景：當用戶輸入一段數據後咱們要去對數據進行驗證，可是若是不間斷的進行驗證會浪費咱們的計算機資源。因此咱們就想等用戶輸入數據後，2s 後才進行驗證，若 2s 間用戶更新了輸入的數據，那麼 2s 將從新計時。

function fn() {
  // 要執行的代碼
}

var timerId = null;

button.onclick = function() {
  if (timerId) {
    clearTimeout(timerId); // 中止以前的計時
  }
  timerId = setTimeout(() => { // 從新計時
    fn();
    timerId = null;
  }, 2000)
}
複製代碼

6. 手寫 Ajax

Ajax 簡單入門

7. 代碼中的 this 指向什麼？

fn() 裏面的 this 就是 window
obj.fn() 裏面的 this 就是 obj
new Fn() 裏面的 this 就是新生成的對象
() => {} 裏面的 this 跟這個箭頭函數外面的 this 同樣
fn.call(xx) 裏面的 this 就是 xx
fn.apply(xx) 裏面的 this 就是 xx
fn.bind(xx) 裏面的 this 就是 xx

舉例：

var obj = {
  foo: function() {
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() // 打印出的 this 是 obj
bar() // 打印出的 this 是 window
複製代碼

8. 閉包是什麼？當即執行函數是什麼？

閉包

9. 什麼是跨域？什麼 JSONP？什麼是 CORS？

跨域

10. JS 有哪些數據類型？

答：String, Number, Boolean, null, undefined, Symbol, BigInt 共 7 種基礎數據類型，外加一種引用類型：Object。

11. 如何實現深拷貝？

JSON法（缺點多，好比 a 裏面不能有函數）：

var a = {...}
var b = JSON.parse(JSON.stringify(a))
複製代碼

遞歸拷貝法：

function clone(obj) {
  if(Array.isArray(obj)){
    var copy = [];
  }else{
    var copy = {};
  }
  for (let i in obj) {
    if (obj.hasOwnProperty(i)) {
      copy[i] = typeof obj[i] === 'object' ? clone(obj[i]) : obj[i];
    }
  }
  return copy;
}
複製代碼

環：

// 不會
複製代碼

12. 如何實現數組去重

Set 去重：

var a = [3, 4, 6, 3, 5, 4]
Array.from(new Set(a)) // [3, 4, 6, 5]

[...new Set(a)] // ES6 語法下的 Set 去重
複製代碼

笨辦法：

// 使用雙重循環，每次從原數組中提取一個數據和新數組中已有數據比較
複製代碼

13. 用正則表達式實現 string.trim()

function trim(string) {
  return string.replace( /^\s+|\s+$/ ,'');
}
複製代碼

14. 原型？原型繼承？Class 繼承？

初識JS原型/原型鏈/原型繼承

15. 有關 == 的問題（送命題）

例：( a==1 && a==2 && a==3 ) 可能爲 true 嗎？

答：可能。

例：null == undefined？

答：true

16. 手寫一個 Promise（送命題）

// 谷歌一下
複製代碼

四. DOM 篇

1. DOM 事件模型是什麼？

回答什麼是冒泡和捕獲便可。

2. 事件委託是什麼？好處是什麼？

答：不直接監聽子元素，而是監聽父元素，只須要在監聽後判斷是哪一個「兒子」觸發的事件。

好處：一次監聽全部「兒子」，那怕是後面動態生成的「兒子」，也能被監聽。

五. HTTP 篇

HTTP 常見狀態碼

六. Vue2 篇

1. 生命週期

答：created（在實例建立完成後被當即調用）、mounted、updated 、destroyed（Vue 實例銷燬後調用）等生命週期鉤子函數。

2. 組件間通訊

答：父子通訊（使用 Prop 傳遞數據、使用 v-on 綁定自定義事件），兄弟通訊（new Vue() 做爲 Bus 或者 Vuex），爺孫通訊（能夠爺爺—>爸爸—>兒子依次通訊，也能夠只用採用 Vuex 狀態管理器等方案）

3. 數據響應式是什麼原理

簡單總結版：當把一個 JS 對象傳入 Vue 實例做爲 data 選項時，Vue 將遍歷這個對象的全部屬性，並使用 Object.defineProperty() 把這些屬性所有轉化爲 getter/setter。這些 gettet/setter 對用戶來講是不可見的，可是在內部它們讓 Vue 能夠追蹤依賴，在屬性被修改時通知變動。

4. computed 和 methods 和 watch 區別是什麼？

計算屬性 vs 方法：

二者不一樣的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。
每當觸發從新渲染時，調用方法將總會再次執行函數。

計算屬性 vs 偵聽器

使用 watch 選項容許咱們執行異步操做 (訪問一個 API)，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這些是計算屬性沒法作到的。

5. Vue.set 是作什麼用的？

答：向響應式對象中添加一個屬性，並確保這個新屬性一樣是響應式的，且觸發視圖更新。若是採用普通的方法向對象中添加屬性，那麼這個新增屬性不會是響應的。

6. Vuex 做用是什麼？你會怎麼用？

答：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

我若是開發一個博客，我會將用戶"是否登陸"這個狀態放入到 Vuex 中，供全部組件訪問和修改。

7. VueRouter 是什麼？你會怎麼用？

答：它是 vue.js 官方的路由管理器，它讓咱們構建單頁面應用變得很簡單。

我在作一個單頁面應用，但想要實現多頁效果的時候，我會把一個個頁面對應爲一個個的組件，而後用路由來管理它們，這樣就實現了單頁面應用。

七. 安全篇

1. 什麼是 XSS？如何預防？

名稱：跨站腳本攻擊
舉例：經過客戶端腳本語言，在一個論壇發帖中發佈一段惡意的 JavaScript 代碼就是腳本注入，若是這個代碼內容有請求外部服務器，那麼就叫作XSS！
預防：過濾尖括號、script 等特殊字符（把 < 替換成 <）

2. 什麼是 CSRF？如何預防？

名稱：跨站請求僞造
舉例：冒充用戶發起請求（在用戶不知情的狀況下）,完成一些違背用戶意願的請求（如惡意發帖，刪帖，改密碼，發郵件等）。
預防：添加圖片驗證碼、短信驗證碼；進行 token 校驗

八. 瀏覽器兼容篇

瀏覽器默認的 margin 和 padding 不一樣。解決方案：加一個全局的 *{margin:0;padding:0;} 來統一。
上下 margin 重合問題：IE 和 ff 都存在，相鄰的兩個 div 的 margin-left 和 margin-right 不會重合，可是 margin-top 和 margin-bottom 卻會發生重合。