記錄一次螞蟻金服的前端面試

座標成都，大專，4年前端，分享一次本身在螞蟻金服的面試經歷。

一面

• 1.自我介紹

答：我是XXX,經歷。。。。

• 2.vue data響應式的實現

答:啪啦啪啦說了一大堆，感受我很興奮。

• 3.vue computed的實現

答:好吧到這裏我就卡住了，由於我當時比較緊張了，儘管我心裏不停的勸告本身，而後腦海一片空白。

• 4.你在css方面的擅長?

答:我擅長的是css中的定位。

• 5.請詳細介紹下定位?

答:static,fixed,relative,absolute,sticky,inherit。而後就它們的用法分別作了介紹。

• 6.你知道瀏覽器緩存嗎？

• 7.你還有什麼想問的嗎?

略。

二面

• 1.webpack的配置方式和編譯過程。

答:這個題比較大，我感受我答的也不是很好。

• 2.解析URL參數。

我當時的思路就是這樣，經過截取到字符串後面的參數，而後經過正則去進行匹配，分別匹配參數名和參數值，它們必定是匹配到二個數組，而後遍歷其中一個數組，就能夠了。如下是我面試完以後根據思路實現的完整代碼，固然面試的時候是確定寫不到這麼完整的。

var getURLParam = function(url){
        let res = {};
        if(url.lastIndexOf("?") === -1)return res;
        let param = decodeURIComponent(url.slice(url.lastIndexOf("?") + 1));
        let keys = param.match(/\w+\=|\=/g);
        keys && (keys = keys.map(k => k.replace(/\=/g,"")));
        let values = param.match(/(\=(\w+|\s*)\&)|(\=(\w+|\s*))/g);
        values && (values = values.map(v => v.replace(/\&|\=/g,"")));
        keys && keys.forEach((k,i) => res[k] = values[i]);
        return res;
    }
複製代碼

• 3.實現通用的批量更新策略。

let notifyFn;
    function fn1(){
        notifyFn();
        statement1;
        statement2;
    }
    function fn2(){
        statement3;
        notifyFn();
        statement4;
    }
    function fn3(){
        statement5;
        statement6;
        notifyFn();
    }
    async function onMount(){
        notifyFn = update(() => {
            //在statement6執行完以後執行
        })
        fn1();
        await Promise.resolve();
        fn2();
        await Promise.resolve();
        fn3();
    }
複製代碼

這道題，我第一次看到的時候是一臉懵逼的狀態，徹底看不懂這道題的考察點是什麼，儘管我問了一下面試官，面試官給我講了一番，我仍是沒有聽明白。面試官說咱們先跳過這一道題，來分析下一道題。

• 4.React基於單向數據流。對於組件間的通訊支持不夠好。現須要模擬一個全局的EventStore。使得能夠知足如下條件，以支持組件間的通訊。

class Event {

    }
複製代碼

// 用法
const loader = new Event();
loader.bind("loaded",event => console.log(event));//註冊事件
loader.trigger("loaded",{ data:"data" });//觸發事件
loader.unbind("loaded");//註銷事件
複製代碼

這道題，我看着就像是實現一個事件派發器，也給面試官說了本身的實現思路。

• 5.你還有什麼想問的嗎?

略。

一面我其實仍是作足了準備的，二面因爲我本身都以爲個人表現不是很好，因此很顯然二天後的我就收到了面試沒經過的郵件，我詳細分析了一番，最後作出以下總結。

面試總結：

個人二面太急切倉促，沒作準備，而後二面面試也沒有很好的表現出本身的亮點和能力，最後問問題一環我居然還沒問問題，只是要求面試官可不能夠把題記錄下來（我本意就想下來研究一番，尤爲是第三題）。

事實上，除了第四題我算是之前寫過一個相似的，其餘題我都是沒有準備過而臨場發揮。所以，我掉分的關鍵不在於作題，而是個人表現。我直接讀不懂題，而後面試官給我講了一番，我仍然沒有明白，也沒有去思考爲何，因此可能這就讓面試官覺得我放棄了這道題。

整場二面，我在其餘三道題上分析的還算中規中矩，但在第三道題，我就很慌張，沒有表現出冷靜思考的樣子，因此這裏應該就是我掉分的關鍵點。

整場螞蟻金服面試就這樣結束了，通過這一次面試也讓我知道了本身的不足之處，那就是很容易緊張，心慌。

做爲一個程序員，最應該有的態度，就是不停專研，不懼困難，遇事沉着冷靜，臨危不亂，才能更好的展示本身。而我並無作到，因此我將在接下來的時間好好準備，充分提高本身，我想但願我能在半年後繼續參加面試。

學無止境，路還很長，我還會有很長的路要走。面試事後，通過本身的總結和反思，我終於明白麪試官想要考察的不是題的答案自己，而是我有沒有解決問題的決心，有沒有冷靜分析問題的能力，還有本身的思考和理解。

我天天也在練習一道算法題，督促本身好好學習，並記錄下來本身的思路，而後整理成了文檔網站，歡迎查看劍指offer算法題。

個人開源項目一個使用原生JavaScript編寫的顏色選擇器，靈活自定義擴展，修改配置對象還能自動更新ew-color-picker。

個人文檔已經完善了很多，詳細介紹了各個api的使用，但願可以我提issue，這個項目還有不少不完善的地方。ewColorPicker文檔網站。

我在思否錄製上線的課程玩轉typescript1，玩轉typescript2適用於有必定基礎的前端，還望你們多多支持，謝謝。