2年前端,如何吊打滴滴面試官

前言

面試日期爲 5月20日 19 : 00

又到了我跟滴滴某金融部門battle的時間了, 此次挑了如此特殊的日期來面試,是有特殊道理滴。

PS :爲何520這天,我原來定的521,後來調日期了,我沒妹子你也別想帶妹子出去玩!這回面的資深前端崗位,希望面試官輕點蹂躪我😘😘😘😘。

自我介紹

首先上來面試官先說了一下他的狀況,這另我另眼相看,而後就是個人show time了,

介紹我的信息,亮點以及項目經歷以後,面試就算正式開始了。

PS :這裏經過本身的話術將面試官的注意力吸引到項目優化方向,通過5分鐘的自我介紹,面試官也對我另眼相看,沒想到我能逼逼這麼多。

簡歷相關

問 ：你印象最深的項目是哪一個?難點是什麼?是怎麼解決的?

PS :第一輪的過招,讓我感受面試官不簡單,我要謹慎,因此沒怎麼吹,真的,沒怎麼吹。

Git

問 : git rebase

git rebase 都是用於分支合併

git rebase 會先找到兩個分支的第一個共同的 commit 祖先記錄，而後將提取當前分支這以後的全部 commit 記錄，而後將這個 commit 記錄添加到目標分支的最新提交後面。通過這個合併後，兩個分支合併後的 commit 記錄就變爲了線性的記錄了。

PS :上來一道送分題,嗯~ 不愧是資深前端崗,這波是試探,嗯,沒錯,必定是試探。

輸出題

問 : 原型繼承

function F() {}
Object.prototype.a = function() {
   console.log('a')
}
Function.prototype.b = function() {
  console.log('b')
}
const f = new F()
f.a()
f.b()
// 個人答案
undefined
b
後通過面試官引導,得出一下答案
a
undefined

//正確答案
a
Uncaught TypeError: f.b is not a function 複製代碼

解析：

1. f 並非Function的實例，由於它原本就不是構造函數，調用的是 Function 原型鏈上的相關屬性和方法，只能訪問到 Object 原型鏈。因此 f.a() 輸出 a ，而 f.b() 就報錯了。
2. F 是個構造函數，而 F 是構造函數 Function 的一個實例。由於 F instanceof Object === true，F instanceof Function === true，由此能夠得出結論：F 是 Object 和 Function 兩個的實例，即 F 能訪問到 a， 也能訪問到 b。因此 F.a() 輸出 a ，F.b() 輸出 b。

PS :這裏我有點緊張,本身對原型鏈的理解仍是不夠透徹的,仍是懼怕繼續追問這方面的問題,畢竟資前端崗,要謹慎,表懼怕。

問 : 變量提高

var name = 'World';
(function() {
  if (typeof name === 'undefined') {
    var name = 'Jack'
    console.log('Goodbay ' + name)
  } else {
    console.log('Hello ' + name)
  }
})()
複製代碼

輸出結果：Goodbye Jack

//在 JavaScript中， Function 和 var 都會被提高（變量提高），因此上面的代碼就至關於
var name = 'World!';
(function () {
    var name;
    if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();
複製代碼

PS :我都沒解釋,直接把第二段代碼寫出來了,讓面試官本身看去。出這題是瞧不起我面試的嘛!!!!

問 : 異步&事件循環

async function async1() {
  console.log('A')
  await async2()
  consolo.log('B')
}
async function async2() {
  console.log('C')
}
console.log('D')

setTimeout(function() {
  console.log('E')
})

async1()

new Promise(function(resolve) {
  console.log('F')
}).then(function() {
  console.log('G')
})

console.log('H')
//輸出順序以下
//D
//A
//C
//F
//H
//B
//undefined
//E
複製代碼

代碼執行過程以下：

1. 開頭定義了 async1 和 async2 兩個函數，可是並未執行，執行 script 中的代碼，因此打印出D；
2. 遇到定時器 setTimeout，它是一個宏任務，將其加入到宏任務隊列；
3. 以後執行函數 async1，首先打印出 A；
4. 遇到 await，執行 async2，打印出 C，並阻斷後面代碼的執行，將後面的代碼加入到微任務隊列；
5. 而後跳出 async1和 async2，遇到 Promise，打印出 F；
6. 遇到 resolve，將其加入到微任務隊列，而後執行後面的script代碼，打印出 H；
7. 以後就該執行微任務隊列了，首先打印出 B，而後打印出 undefined；
8. 執行完微任務隊列，就開始執行宏任務隊列中的定時器，打印出 E。

PS: 有驚無險,基本上這裏答的本身也算滿意,可是我內心卻我慌了,明明答不上來最可怕,怎麼感受面試官要給我來個大的。

手寫題

利用遞歸,遍歷出二叉樹深度

面試官先問了我有沒有刷題,我說沒有,而後就問了這個遞歸。

function tree(root) {
  if (!root) return 0
  let leftChildRoot = tree(root.leftChildRoot)
  let rightChildRoot = tree(root.rightChildRoot)
  return Math.max(leftChildRoot,rightChildRoot)
}
//代碼並不完善,可是面試官聽我說完大概流程就中止讓我寫了。
複製代碼

PS :此題必拿下,這麼輕鬆的答出來,我也是對本身更加的滿意,總而言之,看來此次面試勝負已分了,我穩了面試官你是否是沒招了~~ 起飛了哈哈哈 這就是大的嗎?

Componsition API

問 : 瞭解 Componsition API 嗎?

在 Vue2 中，代碼是 Options API 風格的，也就是經過填充 (option) data、methods、computed 等屬性來完成一個 Vue 組件。這種風格使得 Vue 容易上手，同時也形成了幾個問題：

1. 因爲 Options API 不夠靈活的開發方式，使得 Vue 開發缺少優雅的方法來在組件間共用代碼。
2. Vue 組件過於依賴this上下文，TypeScript 在 Vue2 中很很差用。

因而在 Vue3 中，捨棄了 Options API ，轉而投向 Composition API。Composition API本質上是將 Options API 背後的機制暴露給用戶直接使用，這樣用戶就擁有了更多的靈活性，也使得 Vue3 更適合於 TypeScript 結合。

問: Composition API 與React Hook很像，區別是什麼?

我沒用過 React Hook 可是我能說下 Composition API的一些特色

• 聲明在 setup 函數內，一次組件實例化只調用一次 setup
• Compositon API 的調用不須要顧慮調用順序，也能夠在循環、條件、嵌套函數中使用
• 響應式系統自動實現了依賴收集，進而組件的部分的性能優化由Vue內部本身完成，使得組件性能獲得提高。

PS :最開始面試官問的時候,我沒聽清,後來面試官說是 Vue的,我有了字節面試時因沒聽清而丟題的經驗,讓面試官把單詞打出來了,有驚無險。

工程化的理解

問:你對前端工程化的理解

PS :這裏就大概的理解了,反正手寫和代碼輸出都出來了,問題也答的比較滿意,這裏我本身說的也比較放鬆。

反問

原話

麻煩您了,今天時間趕的還520,也沒陪女友出去玩,真是抱歉了呢~

內心

哥哥 520你不陪女友,你女友不會生氣吧?

哥哥 520你跟我視頻,你女友不會打我吧?

我只會心疼哥哥~~

PS :真實狀況確定不能問的不能這麼直白,可是我確定暗示了。

總結

面試大概小一小時,越面越開心,越嘮越開心,我雖然沒掌握節奏,可是這面試官太上道了,接下來幾輪,還這強度我不穩了嗷,全是送分題。

重鑄滴滴榮光,我輩責無旁貸!!!!

首戰告捷!!!!

以前讓滴滴面試官虐的 ,如今我找回了面子的同時找回了場子, 滴滴的面試官們是不會善罷甘休的,那麼他們會在下一輪怎麼應對呢?

偷摸說一句,我作夢笑醒了~