面試分享：三年經驗面試阿里前端失敗總結(附面試真題及答案)

前言

你們好，我是來自駕考寶典及掌遊天下的WckY，目前離職，正在找新工做。我在掌遊天下一直負責h5遊戲這塊的業務，離職後我在github裏建立了一個h5遊戲大全，可直接點擊 此處 瞭解。從上週二開始面試至今，期間意外收到杭州阿里的電話面試和在線編程測試。因爲我一直沒刷過題，包括leetcode，也沒怎麼複習基礎，因此一週面試下來，offer慘不忍睹。但無論怎樣，知恥然後勇，接下來我將爲你們分享下除了阿里，還有其餘公司的面試題。各位記住必定要刷面試題哦！！！

如下是阿里面試過程

第一輪，電話面試+在線編程面試

1.不須要我作自我介紹...

阿里打電話給我時，晚上八點多，我正坐在房間裏發呆，電話接通後對方告知我是杭州阿里巴巴花唄借唄部門，而後說會往個人郵箱裏發個在線測試連接，裏面有兩道編程題，大概20分鐘作完便可。雖然我很手足無措，但仍是趕忙照作了，而後就看到了令我無從下手印象深入的在線測試題。

2(算法題).  想辦法先隨機生成100個隨機字符串整數扔到一個數組裏，好比var arr = ['1'，'2'，'3' ....]，arr的長度是100，再設計一個算法去重，不容許用new set。

我寫了八分鐘，也糾結了八分鐘，最後仍是沒寫出正確的代碼。阿里的小哥卻是很溫柔，還一步步引導我，再次感謝。面試結束後我找個人做業幫前端朋友聊了下這道題，這是他最後給出的答案。

var arr = Array.from({ length: 100 }).map(() =>
    String(Math.floor(Math.random() * 100))
)
var newArr = [];

arr.forEach((val) => {
    if (newArr.indexOf(val) < 0) {
        newArr.push(val)
    }
})
console.log('sucess', newArr)

3.實現一個具備簡單的觀察者模式的類，在類中有on、off、trigger方法。

在向對方確認是讓我用原生JS實現on、off、trigger等方法後，我選擇了直接放棄。我是真的不會。以後我和個人360在職前端好友聊了下，他說當初去自如面試面試官也要求他手寫，不過如今也忘光了......

4(算法題).遊戲中的碰撞檢測你是如何實現的？碰撞檢測有個固定的方法是什麼？A星尋路算法具體的原理是？

碰撞檢測我說了本身實現的方式，阿里小哥貌似以爲太麻煩了...因此問我是否知道有個簡單固定的方法，我固然是不知道。A星同樣，我只會照着文檔用。

5.Pixi.js和create.js相比，它的優缺點是什麼？緣由是什麼？Phaser聽過沒，阿里的遊戲框架知道叫什麼嗎？大家掌遊天下團隊爲何會選擇create.js？

爲何選擇create.js，當時我leader確實沒說，就說你們之後用create.js吧，而後他做爲主程，開始了對create.js的二次封裝。不過我私下仍是仔細調研了不一樣引擎的區別，並在內部作了分享。主要參考資料：zhuanlan.zhihu.com/p/32392153。

阿里總結

問完基本的技術問題之後，阿里小哥開始向我介紹他們這個崗位大概想招怎樣的前端，並耐心給了我點建議。不過除了技術題說實話我徹底忘記他以後說的是什麼了。一心只想結束對話的我，在掛掉電話以後如釋負重。至此阿里面試告一段落，而且我決定，不給阿里其餘前端簡歷了，我實在太菜雞了。

如下是伴魚口語、好將來等其餘公司的筆試題

1.Event Loop 具體會輸出什麼

console.log('1');
async function async1(){
     console.log('2');
     await console.log('3');
     console.log('4');
}
setTimeout(function(){
     console.log('5');
},0);
async1();
new Promise(function(resolve){
     console.log('6');
     resolve();
}).then(function(){
     console.log('7');
});
console.log('8');

這段呢？題目出自360筆試題

setTimeout(function(){
      console.log(1);
})

Promise.resolve(function(){
      console.log(2)
})

new Promise(function(resolve){
      console.log(3);
      resolve();
}).then(function(){
      console.log(4)
})
console.log(5)

360的筆試題是我借貸寶的朋友發給我看的，而後我倆第一步就作錯了，各位能夠在瀏覽器和node環境下各跑跑，有不一樣。

2(算法題).使用 原地排序 將var arr = [2,0,1,0,2,1] 變成var arr = [0,0,1,1,2,2]，禁止使用sort和reverse函數。

看到原地排序我就懵逼了，沒聽過。面試官來了之後也沒解釋到底什麼意思，我也忘問了，尷尬。回來一查發現原地其實就是冒泡排序，好傢伙我也沒背過冒泡排序。

for(var i = 0; i < arr.length - 1; i++){
    for(var j = 0; j < arr.length - i - 1 - j;j++){
        if(arr[j] > arr[j+1]){
        var temp = arr[j];
        arr[j] = arr[j+1];
         arr[j+1] = temp;
    }
    }
}

3.宏任務和微任務的出現是由於什麼致使的？又是由於什麼，致使了目前的執行順序？

懵逼中的我.... 你要是問我剛纔Event Loop那道題爲何輸出那些答案，我能說出來，至於優先級爲何是微任務在前、宏任務在後，我表示沉默....

4.說下你對this指向問題的理解以及四種綁定規則

this是動態變化的，誰調用它，就指向哪裏。

• 默認綁定（嚴格/非嚴格模式）嚴格是undefined；非嚴格獨立函數調用時this指向window。
• 隱式綁定，當函數引用有上下文對象時，隱式綁定會把函數中的this綁定到這個上下文對象。

var obj = {
  name: "wcky",
  foo: function() {
    console.log(this.name); //wcky
  }
};
obj.foo();

• 顯示綁定，經過call()或者apply()方法，第一個參數是一個對象。

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2
};
foo.call(obj); // 2

• new綁定，若是有new關鍵字，this指向new出來的那個對象。

5(算法題).   寫一個快速排序吧。

猝！我把冒泡記下了，快排和選擇、插入等排序當時蜻蜓點水看了一遍，沒記下來。

6.箭頭函數和function的區別？this指向問題具體分析。經過如下代碼，分別輸出什麼？緣由又是爲何？在node.js環境下，結果是否相同？

let a = 1;
const obj = {
    a: 2,
    b: () => {
        console.log(this.a);
    },
    c: function() {
        console.log(this.a);
    }
}
obj.b();
obj.c();
console.log(this.a);

var a = 1;
const obj = {
    a: 2,
    b: () => {
        console.log(this.a);
    },
    c: function() {
        console.log(this.a);
    }
}
obj.b();
obj.c();
console.log(this.a);

• 首先，第一段代碼輸出的分別是undefined、二、undefined，在node.js下相同。而第二段代碼，輸出的分別是一、二、1，但在node.js下，仍然是undefined、二、undefined。
• 具體緣由，第一段代碼中，let默認不掛在到window下，因此是undefined、二、undefined。第二段代碼，緣由各位能夠想一想爲何在node.js下仍然是undefined、二、undefined。

6.2 增強版this的判斷

var a = 1;
var obj = {
    a: 2,
    c: function() {
        console.log(this.a);
    },
    b: () => {
        console.log(this.a);
    }
}
obj.c();
obj.b();
console.log(this.a);
var foo = obj.c;
console.log('111',foo());

答案又是什麼呢？分別是二、一、一、undefined。若是我直接foo()，結果又是什麼呢？答案固然是1了。

7(遞歸) a1 = 1，a2 = 2，a3 = a1 + a2，a4 = 4，a5 = a3 + a4，a6 = 6  .... 用遞歸求an。

這道題並不難，確實稍微想一下就能夠作出來，不過我當時不假思索，不知道爲何只想到用遞歸求1 X 2 X 3 X4 X 5 X n這個思路，而後就放棄了，是個人錯。

function f (n) {
    if (n === 1) {
        return 1
    } else if (n % 2 === 0) {
        return n
    } else if (n % 2 === 1) {
        return f(n-1) + f(n-2)
    }
}

8.對於強制緩存和協商緩存的瞭解？對應的英文名是什麼？

cache-control和last-modified expired e-tag

9.如下代碼輸出什麼，爲何？

var arrData = [1,2,3,4,5,6];
for (var i = 0; i < arrData.length; i++) {
    setTimeout(function(){
        console.log(arrData[i]);
    }, 0);
}

若是想正常打印出1，2，3，4，5，6，該怎麼處理。

10.隨機遍歷數組。一個長度爲n的數組，每次隨機挑選一個元素，儘量快地遍歷到所有元素，最終返回一個新的數組。

我用的是二分查找，我覺得這樣能夠，但面試官告訴我不對，我是惟一一個沒有作正確的人...

11(算法題) 消息隊列實現。實現一個消息隊列，知足以下功能：

• 能夠添加任務，任務包括任務數據，任務觸發的北京時間點。
• 在任務到達觸發時間點，觸發執行任務。

看到這題我也直接放棄了，猝....

12.使用promise對象實現axios的基本功能，例如傳入url、data、type等，換言之Ajax操做。

13.聊聊promise.all()原理。

14.使用flex佈局實現頭部吸頂，底部吸底，中間可滾動佈局，必須使用flex佈局。

面試官非得讓我用flex實現，來判斷個人flex熟練度，服了。最重要的是給父元素設置display: flex;flex-direction: column便可。

15.左邊固定，右邊自適應的佈局，有哪些方式實現？各自的原理又是什麼？重點講清楚原理。

16.說說你對原型、原型對象、原型鏈、prototype和_proto_的理解。

17.判斷數據類型，大概有幾種方式，區別是什麼？精確判斷數組，又有哪些方式？

結語

暫時先寫這些吧，有時間接着更新，這幾天面試其實挺心力交瘁的，還打擊人。而我還得接着約面試，鞏固基礎知識點(背概念)和刷點編程題。想要跳槽的朋友要想清楚了，尤爲是年末了，好工做確實很差找。最後，祝你們早日升職加薪，祝本身早日入職新公司幹活了。