壹 ❀ 引
我在前端開發面試快速復盤，不標准的面試經驗分享一文中，記錄了之前兩家公司的面試經歷，並順利拿到了其中一家offer；在上上周五早上（7月31號），我7點鍾出門面了2家公司，很遺憾，都掛掉了。第一家面試比較荒誕，第二家是我比較看好的公司，但掛在了項目經驗上；說在前面，本文並非大廠面經，我也只是一個三年前端的失敗者，所以此文僅算自我面試總結，博君一笑，倘若有幫助更好，那么本文開始。
貳 ❀ 某小公司
我在前面說，第一家公司的面試比較荒誕，因為整體面試下來可以說毫無收獲，簡直是浪費我的時間，算是糟糕透頂的一次經歷。早上九點到了該公司，結果發現只有零散的幾台電腦分布桌子上，數了數大概就五六個人，但聯系我的HR說這里是臨時辦公點，是否屬實我也沒太大興趣考證了。
等到九點半左右HR與面試官拿着電腦來了，帶我到放雜貨的房間....你沒聽錯，用櫃子拼成的桌子對我進行面試，我此時已經是抱着走流程的心態來對面這場面試了，不管過不過，反正我絕對不去。我心里這樣想着，不太看得上這家公司，沒想到面試官全程把我輕視了一番....
整場面試下來技術面試官一共就問了兩個跟前端有關的問題，如下：
面：怎么實現水平垂直居中？
我首先說了flex實現方式，之后對於元素是否有固定寬高說了其它可行方案（這個比較簡單，大家自己復習）。
面：用ES6怎么去重數組？
這個就更簡單了，用set不接受重復元素的特性與拓展運算符來做。
[...new Set([1, 1, 2, 3, 4, 4])];//[1, 2, 3, 4]
除此之外他就沒問一個與技術相關的問題，一直在吐槽我之前公司技術多落后（公司技術落后我承認，但我不落后），我雖然學了這么多東西，估計也只會個皮毛啥的。
我當時就挺無語，我掌握什么程度你難道就不會用問題來檢驗我嗎，當時也挺惱火的。
最后面試官問了一個讓我相當無語的問題，以至於我主動把面試結束了。
面：你給自己定級的話，你覺得在什么水平？
我說高級我肯定不夠（不然我也不會在你們雜貨間坐着了），中高級之間這樣吧，中級這樣（之前拿offer的公司已經給我定級為中高級了，總不至於初級）。
然后面試官語出驚人....
面：中級？你連vue都不會用，感覺像初級的水平。
我確實是第一次遇到用會不會使用框架來評判一個的人能力的情況，也算符合自己最初對於這家公司的預期了，確實不值得來。所以我也不想多浪費口舌，我說沒事，我面試機會特別多，就這樣吧。走的時候那個聯系我的HR感覺還挺不好意思的，說送我，進電梯前我對他說，你們這個面試官水平真的有點問題，一個有意義的問題都沒問就給我下結論；當然HR肯定是站在他們那邊的，怎么說都無所謂了，這場面試就這樣收場了。反正一句話，找工作都是雙向選擇，誰也不欠誰的，你惡心我，我總不能讓自己委屈。
叄 ❀ 某心儀公司
在經歷了第一場糟心的面試后，我馬上趕去第二家面試，這家公司算是我很看好的公司，第一距離我住的地方非常近....第二，有成熟的上線產品而且已經盈利，第三，團隊人員很多都來自騰訊等大廠，有一定挑戰性。雖然HR跟我說了公司大小周，但是本着技術提升的目的，單雙休我都覺得不重要了。
公司面試分為兩部分，筆試部分與面試部分，先說下筆試，一共十三道題，說難也不難，有些題我答的也不是很好，部分答案都是我當時自己組織的語言，所以並不是精准的答案，還請大家自己有針對的認真復習，題目如下：
1.請簡述下CSS選擇器的權重與優先規則。
這個沒啥好說的，!important > 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器 > 通配符選擇器 > 繼承 > 瀏覽器默認屬性。
2.
promise與setTimeout的區別？
這題說到底考的是js事件機制，首先promise與setTimeout都是異步操作，promise表示一個承諾，有pending，fulfiller與rejected三種狀態，且一旦狀態轉換就無法再次變更。setTimeout是一次性定時器，在等待固定時間后，將回調函數加入異步任務隊列並等待同步任務結束后執行。就區別而論，promise回調屬於微任務，而定時器屬於宏任務，微任務執行優先級高於宏任務。
關於事件機制可以閱讀博主這篇文章：JS執行機制詳解，定時器時間間隔的真正含義
3.用css實現一個三角形。
這道題比較尷尬的是，我清晰記得實現思路，結果透明的單詞忘記怎么拼寫了....
原理是讓一個元素沒有寬高，但是給其邊框設置足夠的寬度，並讓其中三條邊框的背景色為透明transparent。
記好了，透明的單詞是transparent，transparent，transparent，transparent，transparent：
transparent /trænsˈpærənt/ adj. 透明的；顯然的；坦率的；易懂的
實現代碼如下：
<div class="border"></div>
.border {
width: 0;
height: 0;
border: 50px solid;
border-color: transparent transparent #d9534f;
}
更詳細的解釋可以閱讀博主這篇文章：CSS畫一個三角形，CSS繪制空心三角形，CSS實現箭頭
4.JavaScript有幾種類型的值？存儲位置有什么不同，null和undefined有什么區別？
主要考數據類型，大致分為兩類，基本數據類型包括Number，String，Boolean，Null，Undefined，Symbol；引用類型，也就是對象，包括函數，數組，正則，普通對象等等。
存儲方面，基本類型存放在棧中，引用類型的key存放在棧中，vaule存放在堆中。這個區別可以看博主這篇文章開頭的圖解：【JS】深拷貝與淺拷貝的區別，實現深拷貝的幾種方法
null表示空，是一個空值，同時也是原型鏈的頂端；而undefined往往用來表示一個變量未定義。
5.[1,2,3].map(parseInt)輸出什么？
上次面試已經遇到過了，常考點啊同學們，原因是啥我就不重復解釋了，輸出[1, NaN, NaN]。具體解釋請看JS 20道概念雖老但也略有收獲的JS基礎題，快速做題，高效復習，不妨試試？第一題的題解。
6.實現數組隨機排序
這題想了一會，感覺是要用隨機數來實現，最后還是沒能做出來，最讓我頭大的是兩年前我收藏過洗牌算法與隨機排序的文章，但是當時一直不重視算法，所以一直沒怎么看，沒想到2年后自己筆試遇到了：
function shuffle(A) {
for (var i = A.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var t = A[i]; A[i] = A[j]; A[j] = t;
}
};
let arr = [1,2,3,4,5,6,7,8,9,10];
shuffle(arr);
與其本人在這班門弄斧解釋一通，不如推薦大家閱讀一篇算法大佬的文章：10809 一種錯誤的洗牌算法，以及亂排常數 (1)
7.請寫出輸出結果
var a = b = c = {}; a.val = 1; b.val = 2; console.log(a.val); console.log(b.val); console.log(c.val);var a = 1; (function () { console.log(a); var a = 2; a++; })();
挺簡單的兩題，第一題輸出3個2，代碼等同於：
c = {};
b = c;
var a = b;
a.val = 1;
b.val = 2;
由於對象屬於引用類型數據，所以b與c都是保存的對象c的地址引用，不管誰改，都會影響的同一個對象，最后一次操作將val改為了2，所以三個變量訪問都是輸出2。
第二題的代碼考的是變量提升，輸出undefined等同於如下代碼：
var a = 1;
(function () {
var a;
console.log(a);
a = 2;
a++;
})();
變量聲明提升到當前作用域的頂部，所以此時a並沒有復制，於是輸出undefined。
8.請介紹一下JS事件節流與防抖，並手寫一個節流或者防抖函數。
這個不難理解，節流就像控制一個水閥，在你不斷觸發的過程中，固定一個時間執行一次事件，有固定的頻率，像監聽滾動條事件就可以使用節流。而防抖是一直操作觸發事件一直不執行，而是等你停止操作等待多少秒后才執行，像input輸入只有用戶停止輸入比如1S后我們才檢驗輸入是否合法，這樣有利於監聽優化。
當時腦抽，只對防抖有點印象，所以寫了簡單的防抖實現：
function debounce(fn, wait) {
// 借用閉包保存定時器ID
let timer = null
// 觸發事件回調時執行這個返回函數
return function (...args) {
// 如果已經設定過定時器就清空上一次的定時器
if (timer) {
clearTimeout(timer)
};
// 開始設定一個新的定時器
timer = setTimeout(() => {
fn.apply(this, args)
}, wait);
};
};
后面我會整理一篇關於節流防抖的文章，以及其它常見手寫代碼題型整理。
9.現有格式為YYYY-MM-DD的日期數組，
['2013-08-09','2014-05-01','2012-11-22','2013-08-09']，實現數組去重並升序排列數組。
說下我的思路，我想的是第一步利用filter去重，之后利用sort排序，大致實現如下：
function fn(arr) {
return arr.filter((item, index, arr) => {
return arr.indexOf(item) === index;
}).sort((a, b) => {
let a_ = a.split("-")[0],
b_ = b.split("-")[0];
return a_ - b_;
});
};
fn(['2013-08-09', '2014-05-01', '2012-11-22', '2013-08-09']); //["2012-11-22", "2013-08-09", "2014-05-01"]
大家如果有更好的做法請在評論區留言，歡迎討論。
10.什么是跨域，如何解決跨域問題（三種以上）
跨域是指瀏覽器會限制執行其他網站的腳本，它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript實施的安全限制，域名，端口，協議不同都會造成跨域。常見解決方案有nginx反向代理，jsonp，window.name結合iframe等等。后面我會整理一篇關於跨域的文章，留個坑。
11.什么是ajax?瀏覽器是怎樣完成一次ajax請求並執行回調函數的？
ajax遇到2次了，也是常考題型啊，ajax是一種無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。關於后面的問題，我是站在創建XHR對象，向服務器發送請求，判斷status狀態，對應處理回調。
12.請寫出react的組件聲明周期函數名稱，並說明發出異步請求應該在哪個函數內進行，為什么？
13.react內如何實現組件內的通信。
由於我只會angularjs，看了一部分vue，所以這兩道題沒回答上來，其實也無關要緊了。
筆試結束后便進入了面試環節，面試過程中也補充性問了一些問題，比如meta標簽有哪些屬性，比如this指向問題，這個在上面文章我也解釋過。再比如問我能否手寫一個bind函數，這個我講了大致實現思路，具體文章可看js 手動實現bind方法，超詳細思路分析！。
其余都是在閑聊，問我未來規划，一些項目細節問題，這里就不贅述了。總體來說，我覺得筆試面試問題算是不大的，但是很遺憾，對方目前想招聘一個對於移動端有豐富開發經驗的同學，並對canvas有一定要求，所以我的項目經驗就難以符合了- -。
在后面的溝通中，我也問了一些關於我職業發展建議的問題，所以說嘛，好的公司，面試官溝通都舒服很多，對於我想轉全棧的想法，讓我除了關心nodejs以外，可以看看go語言。對於我后面的面試，他的建議是，如果我想考慮國內公司，可以多關注vue，雖然他覺得vue較為簡單不適合用於考慮一個開發者的能力（我當時就想到了第上一家面試官的氣人話），如果我想去的公司主要針對海外市場，則可以多關注react，對於大型項目react還是要火一點。大致聊到這，我也知道沒戲了，所以厚着臉皮把我做的筆試題要回來了，不管怎么說，總得有所收獲，不是嗎？
肆 ❀ 總
我與之前拿到offer的公司人事有約好，周五給他答案是否去上班，所以到下午我和他通話時，深思熟慮后還是拒絕掉了。
其實心里還是害怕，怕這個offer拒絕了之后就找不到更好的了，可是內心也不甘心於此，與他溝通的過程中我也直說了這些想法，我說我年紀真的不小了，如果再年輕點，一定很樂意去貴公司（半外包性質）上班，薪資福利也還不錯，是個非常不錯的選擇，可我心里偏偏裝了個大廠夢，現在進不去，也得在這次找到一個技術型公司磨練自己。我說我心里真的有個坎，我跨不過去，我不想就這么平凡下去，可能我真的就很普通，只是自己不願意承認罷了。
沒想到他聽完便對我說很理解我，他很清晰的知道我想要什么，想得到什么，其實他那邊面試的這一個月的人選，確實發現只有我的溝通，想法以及技術是他最能接受的，我不能去真的很可惜，但如果我后面真的沒找到滿意的工作，讓我再聯系他，他再安排其它部門的機會讓我再試試；說真的，聽到這些，原本恐慌的內心有了些許慰藉，還是挺感謝這個人事。
這篇文章是我上上周星期五的面試，拖了這么久是因為上周一直在忙其它重要的事，所以也沒面試，也沒復習- -。從本周開始，我算是正式離職，真正投入找工作人群了，我對於未來也會迷茫，不知道自己的結果會怎樣，不過仔細一想，要是人生有劇本那也確實沒什么意思，后面我還會不斷分享面試經歷與知識點整理相關的文章，同時也期待自己最終能有一個好的結果，對自己說一聲，請繼續加油！
番外一
今天早上去公司辦理了離職手續，可以說從今天起真正自由了。在簽離職表格時與人事閑聊談到了對於外包的看法，她的意思也是千萬別去外包，我上家公司雖然不算很好（也是個上市公司），但是沒想到她說招聘第一步會刷掉有外包經歷的簡歷....理由是要價高，沒創造力，溝通基本都不行，這已經在她心中形成刻板印象了；同時她也強調面試回答問題一定要有拓展性，別對方問一句說一句，搞得跟審問似得，生怕自己的才能被對方發現了。我笑着說這點你不用擔心，我回答問題都是問A回答ABC的人，特別主動，因為迫切想着向對方證明自己，證明自己有一定才能。
對於外包，我之前也與抖音的同學聊過，大廠很看重你的出生背景，比如之前騰訊的獵頭就跟我聊到，今年大廠卡簡歷很嚴格，簡歷沒大廠經驗的一律刷掉，說的過分一點，外包經歷對於好點的公司就像一個人生污點，所以如果你對於未來的職業有所期盼，還是盡力讓自己的工作經驗豐富多彩一點，這對於日后換工作都會有極大的幫助。當然說了這么多，我也不是看輕外包的意思，只是自己年輕還是多打拼，多提升自己。
番外二
之前推掉的offer的人事又在今天早上聯系我了（確實是挺好一個人事），意思還是想問我有沒有找到工作，想我去他們公司，一番對話下來對我也算莫大的鼓勵了，至少自己也不是很差，心里稍微又有了一些勇氣和自信。
所以請繼續加油，期待一個好的結果。