面试分享：三年经验面试阿里前端失败总结(附面试真题及答案)

前言

大家好，我是来自驾考宝典及掌游天下的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、2、undefined，在node.js下相同。而第二段代码，输出的分别是1、2、1，但在node.js下，仍然是undefined、2、undefined。
• 具体原因，第一段代码中，let默认不挂在到window下，所以是undefined、2、undefined。第二段代码，原因各位可以想想为什么在node.js下仍然是undefined、2、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());

答案又是什么呢？分别是2、1、1、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.判断数据类型，大概有几种方式，区别是什么？精确判断数组，又有哪些方式？

结语

暂时先写这些吧，有时间接着更新，这几天面试其实挺心力交瘁的，还打击人。而我还得接着约面试，巩固基础知识点(背概念)和刷点编程题。想要跳槽的朋友要想清楚了，尤其是年底了，好工作确实不好找。最后，祝大家早日升职加薪，祝自己早日入职新公司干活了。