前言
當你老了，回顧一生，就會發覺：什麼時候出國讀書，什麼時候決定做第一份職業，何時選定物件而戀愛，什麼時候結婚，其實都是命運的鉅變。只是當時站在三岔路口，眼見風雲千檣，你做出選擇的那一日，在日記上，相當沉悶和平凡，當時還以為是生命中普通的一天。
一個改變面試的專案 -- 面試圖譜。
金九銀十的秋招季近在眼前，想必大家也都心癢難耐，準備挑戰更好的工作機會。那麼，面試肯定是最大的挑戰。
對於面試來說，平時的積累肯定是必須的，但是在面試前的準備也是至關重要的。
在幾月前我個人組建了一個小團隊，花了將近半年的時間尋找大廠的面試題，篩選出了近百個知識點然後成文，並全部翻譯為英文。今天，終於開源出了第一個版本，目前總字數已高達 10 餘萬字。團隊的每個成員都是來自一線的工程師，其中還有一個來自谷歌的大佬。
可以這樣說，我們有自信，把這個專案打造成關於面試相關中的 NO 1. 因為所有內容都沒有照搬任何的書籍，每一個知識點都有詳細的查閱過資料才成文。後期更會加入更多的內容，儘可能地覆蓋大部分知識點。
我們認為，一味的背面試題是沒多大作用的。只有熟悉了各個知識點並融會貫通，才能在面試中披荊斬棘。本圖譜目前包含了近百個高頻知識點，無論是面試前的準備還是平時學習中的查漏補缺，我們相信肯定能幫助到大家。目前內容包含了 JS、網路、瀏覽器相關、效能優化、安全、框架、Git、資料結構、演算法等內容，無論是基礎還是進階，亦或是原始碼解讀，你都能在本圖譜中得到滿意的答案，希望這個面試圖譜能夠幫助到大家更好的準備面試。
該倉庫內容會持續更新，後期將會包含更多的內容，比如：系統設計、區塊鏈、運維、後端等等，當然這些不是我的強項，我會邀請這方面有不錯經驗的朋友來書寫內容。
大綱
求職
最近本人在尋找工作機會，如果有杭州的不錯崗位的話，歡迎聯絡我 zx597813039@gmail.com。
部分內容預覽
MVVM
MVVM 由以下三個內容組成
- View：介面
- Model：資料模型
- ViewModel：作為橋樑負責溝通 View 和 Model
在 JQuery 時期，如果需要重新整理 UI 時，需要先取到對應的 DOM 再更新 UI，這樣資料和業務的邏輯就和頁面有強耦合。
在 MVVM 中，UI 是通過資料驅動的，資料一旦改變就會相應的重新整理對應的 UI，UI 如果改變，也會改變對應的資料。這種方式就可以在業務處理中只關心資料的流轉，而無需直接和頁面打交道。ViewModel 只關心資料和業務的處理，不關心 View 如何處理資料，在這種情況下，View 和 Model 都可以獨立出來，任何一方改變了也不一定需要改變另一方，並且可以將一些可複用的邏輯放在一個 ViewModel 中，讓多個 View 複用這個 ViewModel。
在 MVVM 中，最核心的也就是資料雙向繫結，例如 Angluar 的髒資料檢測，Vue 中的資料劫持。
髒資料檢測
當觸發了指定事件後會進入髒資料檢測，這時會呼叫 $digest 迴圈遍歷所有的資料觀察者，判斷當前值是否和先前的值有區別，如果檢測到變化的話，會呼叫 $watch 函式，然後再次呼叫 $digest 迴圈直到發現沒有變化。迴圈至少為二次 ，至多為十次。
髒資料檢測雖然存在低效的問題，但是不關心資料是通過什麼方式改變的，都可以完成任務，但是這在 Vue 中的雙向繫結是存在問題的。並且髒資料檢測可以實現批量檢測出更新的值，再去統一更新 UI，大大減少了操作 DOM 的次數。所以低效也是相對的，這就仁者見仁智者見智了。
資料劫持
Vue 內部使用了 Obeject.defineProperty() 來實現雙向繫結，通過這個函式可以監聽到 set 和 get 的事件。
var data = { name: 'yck' }
observe(data)
let name = data.name // -> get value
data.name = 'yyy' // -> change value
function observe(obj) {
// 判斷型別
if (!obj || typeof obj !== 'object') {
return
}
Object.keys(data).forEach(key => {
defineReactive(data, key, data[key])
})
}
function defineReactive(obj, key, val) {
// 遞迴子屬性
observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
console.log('get value')
return val
},
set: function reactiveSetter(newVal) {
console.log('change value')
val = newVal
}
})
}
複製程式碼以上程式碼簡單的實現瞭如何監聽資料的 set 和 get 的事件，但是僅僅如此是不夠的，還需要在適當的時候給屬性新增發布訂閱
<div>
{{name}}
</div>
複製程式碼在解析如上模板程式碼時，遇到 {{name}} 就會給屬性 name 新增發布訂閱。
// 通過 Dep 解耦
class Dep {
constructor() {
this.subs = []
}
addSub(sub) {
// sub 是 Watcher 例項
this.subs.push(sub)
}
notify() {
this.subs.forEach(sub => {
sub.update()
})
}
}
// 全域性屬性，通過該屬性配置 Watcher
Dep.target = null
function update(value) {
document.querySelector('div').innerText = value
}
class Watcher {
constructor(obj, key, cb) {
// 將 Dep.target 指向自己
// 然後觸發屬性的 getter 新增監聽
// 最後將 Dep.target 置空
Dep.target = this
this.cb = cb
this.obj = obj
this.key = key
this.value = obj[key]
Dep.target = null
}
update() {
// 獲得新值
this.value = this.obj[this.key]
// 呼叫 update 方法更新 Dom
this.cb(this.value)
}
}
var data = { name: 'yck' }
observe(data)
// 模擬解析到 `{{name}}` 觸發的操作
new Watcher(data, 'name', update)
// update Dom innerText
data.name = 'yyy'
複製程式碼接下來,對 defineReactive 函式進行改造
function defineReactive(obj, key, val) {
// 遞迴子屬性
observe(val)
let dp = new Dep()
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
console.log('get value')
// 將 Watcher 新增到訂閱
if (Dep.target) {
dp.addSub(Dep.target)
}
return val
},
set: function reactiveSetter(newVal) {
console.log('change value')
val = newVal
// 執行 watcher 的 update 方法
dp.notify()
}
})
}
複製程式碼以上實現了一個簡易的雙向繫結，核心思路就是手動觸發一次屬性的 getter 來實現釋出訂閱的新增。
Proxy 與 Obeject.defineProperty 對比
Obeject.defineProperty 雖然已經能夠實現雙向繫結了，但是他還是有缺陷的。
- 只能對屬性進行資料劫持，所以需要深度遍歷整個物件
- 對於陣列不能監聽到資料的變化
雖然 Vue 中確實能檢測到陣列資料的變化，但是其實是使用了 hack 的辦法，並且也是有缺陷的。
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
// hack 以下幾個函式
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
methodsToPatch.forEach(function (method) {
// 獲得原生函式
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
// 呼叫原生函式
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
// 觸發更新
ob.dep.notify()
return result
})
})
複製程式碼反觀 Proxy 就沒以上的問題，原生支援監聽陣列變化，並且可以直接對整個物件進行攔截，所以 Vue 也將在下個大版本中使用 Proxy 替換 Obeject.defineProperty
let onWatch = (obj, setBind, getLogger) => {
let handler = {
get(target, property, receiver) {
getLogger(target, property)
return Reflect.get(target, property, receiver);
},
set(target, property, value, receiver) {
setBind(value);
return Reflect.set(target, property, value);
}
};
return new Proxy(obj, handler);
};
let obj = { a: 1 }
let value
let p = onWatch(obj, (v) => {
value = v
}, (target, property) => {
console.log(`Get '${property}' = ${target[property]}`);
})
p.a = 2 // bind `value` to `2`
p.a // -> Get 'a' = 2
複製程式碼路由原理
前端路由實現起來其實很簡單，本質就是監聽 URL 的變化，然後匹配路由規則，顯示相應的頁面，並且無須重新整理。目前單頁面使用的路由就只有兩種實現方式
- hash 模式
- history 模式
www.test.com/#/ 就是 Hash URL，當 # 後面的雜湊值發生變化時，不會向伺服器請求資料，可以通過 hashchange 事件來監聽到 URL 的變化，從而進行跳轉頁面。
History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美觀
內建型別
JS 中分為七種內建型別，七種內建型別又分為兩大型別：基本型別和物件（Object）。
基本型別有六種： null，undefined，boolean，number，string，symbol。
其中 JS 的數字型別是浮點型別的，沒有整型。並且浮點型別基於 IEEE 754標準實現，在使用中會遇到某些 Bug。NaN 也屬於 number 型別，並且 NaN 不等於自身。
對於基本型別來說，如果使用字面量的方式，那麼這個變數只是個字面量，只有在必要的時候才會轉換為對應的型別
let a = 111 // 這只是字面量，不是 number 型別
a.toString() // 使用時候才會轉換為物件型別
複製程式碼物件（Object）是引用型別，在使用過程中會遇到淺拷貝和深拷貝的問題。
let a = { name: 'FE' }
let b = a
b.name = 'EF'
console.log(a.name) // EF
複製程式碼Typeof
typeof 對於基本型別，除了 null 都可以顯示正確的型別
typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof b // b 沒有宣告，但是還會顯示 undefined
複製程式碼typeof 對於物件，除了函式都會顯示 object
typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'
複製程式碼對於 null 來說，雖然它是基本型別，但是會顯示 object，這是一個存在很久了的 Bug
typeof null // 'object'
複製程式碼PS：為什麼會出現這種情況呢？因為在 JS 的最初版本中，使用的是 32 位系統，為了效能考慮使用低位儲存了變數的型別資訊，000 開頭代表是物件，然而 null 表示為全零，所以將它錯誤的判斷為 object 。雖然現在的內部型別判斷程式碼已經改變了，但是對於這個 Bug 卻是一直流傳下來。
如果我們想獲得一個變數的正確型別，可以通過 Object.prototype.toString.call(xx)。這樣我們就可以獲得類似 [Object Type] 的字串。
let a
// 我們也可以這樣判斷 undefined
a === undefined
// 但是 undefined 不是保留字，能夠在低版本瀏覽器被賦值
let undefined = 1
// 這樣判斷就會出錯
// 所以可以用下面的方式來判斷，並且程式碼量更少
// 因為 void 後面隨便跟上一個組成表示式
// 返回就是 undefined
a === void 0
複製程式碼型別轉換
轉Boolean
在條件判斷時，除了 undefined， null， false， NaN， ''， 0， -0，其他所有值都轉為 true，包括所有物件。
物件轉基本型別
物件在轉換基本型別時，首先會呼叫 valueOf 然後呼叫 toString。並且這兩個方法你是可以重寫的。
let a = {
valueOf() {
return 0
}
}
複製程式碼四則運算子
只有當加法運算時，其中一方是字串型別，就會把另一個也轉為字串型別。其他運算只要其中一方是數字，那麼另一方就轉為數字。並且加法運算會觸發三種型別轉換：將值轉換為原始值，轉換為數字，轉換為字串。
1 + '1' // '11'
2 * '2' // 4
[1, 2] + [2, 1] // '1,22,1'
// [1, 2].toString() -> '1,2'
// [2, 1].toString() -> '2,1'
// '1,2' + '2,1' = '1,22,1'
複製程式碼對於加號需要注意這個表示式 'a' + + 'b'
'a' + + 'b' // -> "aNaN"
// 因為 + 'b' -> NaN
// 你也許在一些程式碼中看到過 + '1' -> 1
複製程式碼== 操作符
上圖中的 toPrimitive 就是物件轉基本型別。
一般推薦使用 === 判斷兩個值，但是你如果想知道一個值是不是 null ，你可以通過 xx == null 來比較。
這裡來解析一道題目 [] == ![] // -> true ，下面是這個表示式為何為 true 的步驟
// [] 轉成 true，然後取反變成 false
[] == false
// 根據第 8 條得出
[] == ToNumber(false)
[] == 0
// 根據第 10 條得出
ToPrimitive([]) == 0
// [].toString() -> ''
'' == 0
// 根據第 6 條得出
0 == 0 // -> true
複製程式碼比較運算子
- 如果是物件，就通過
toPrimitive轉換物件 - 如果是字串，就通過
unicode字元索引來比較
公眾號
Todo
- 完成 CSS 內容
- 完成 Webapck 內容
- 完成小程式相關內容
- 完善關於框架的內容
以上內容預計將於 9 月份更新完畢，歡迎你一起參與本圖譜的建設。
面試圖譜 專案地址，如果你覺得專案還不錯，你可以點個小星星支援我們一下，你的支援是我們更新的源動力。