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

jiezi

5 年前

大家好，我是来自驾考宝典及掌游天下的 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。

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 布局。

15. 左边固定，右边自适应的布局，有哪些方式实现？各自的原理又是什么？重点讲清楚原理。

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

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

前言

以下是阿里面试过程

第一轮，电话面试 + 在线编程面试

以下是伴鱼口语、好未来等其他公司的笔试题

结语