前端開發面試快速覆盤，不標準的面試經驗分享（二）

壹 ❀ 引

我在前端開發面試快速覆盤，不標準的面試經驗分享一文中，記錄了以前兩家公司的面試經歷，並順利拿到了其中一家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]。

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拒絕了以後就找不到更好的了，但是心裏也不甘心於此，與他溝通的過程當中我也直說了這些想法，我說我年紀真的不小了，若是再年輕點，必定很樂意去貴公司（半外包性質）上班，薪資福利也還不錯，是個很是不錯的選擇，可我內心恰恰裝了個大廠夢，如今進不去，也得在此次找到一個技術型公司磨練本身。我說我內心真的有個坎，我跨不過去，我不想就這麼平凡下去，可能我真的就很普通，只是本身不肯意認可罷了。

沒想到他聽完便對我說很理解我，他很清晰的知道我想要什麼，想獲得什麼，其實他那邊面試的這一個月的人選，確實發現只有個人溝通，想法以及技術是他最能接受的，我不能去真的很惋惜，但若是我後面真的沒找到滿意的工做，讓我再聯繫他，他再安排其它部門的機會讓我再試試；說真的，聽到這些，本來恐慌的心裏有了些許慰藉，仍是挺感謝這我的事。

這篇文章是我上上週星期五的面試，拖了這麼久是由於上週一直在忙其它重要的事，因此也沒面試，也沒複習- -。從本週開始，我算是正式離職，真正投入找工做人羣了，我對於將來也會迷茫，不知道本身的結果會怎樣，不過仔細一想，要是人生有劇本那也確實沒什麼意思，後面我還會不斷分享面試經歷與知識點整理相關的文章，同時也期待本身最終能有一個好的結果，對本身說一聲，請繼續加油！