阿里巴巴2017届实习生笔试题反思

今天去面了阿里巴巴广州UC总部的前端工程师职位，感觉这份笔试题还是出的挺有意思的，考完趁热反思一下自己做题过程的一些问题，稍作总结

如我一开始想的，笔试的题目果然没有考所谓的计算机网络，数据逻辑那些要太多去背的东西，下面列出的题目不按顺序，想到哪写到哪~有想法的欢迎在评论区指正

第一题

假设存在a数组，假定数组内的元素均为Number，a如果长度为0，则添加1，否则按先进先出原则去掉一个元素，考虑性能与代码长度（字符<30满分），尽量用最优的代码实现。

代码逻辑很简单

return a.length>0?a.splice(0,1):a.push(1)

写到这里想到了一个很偏的性能优化，下标方式添加数组在chrome上比用push快43%，不过这里只有一个元素，无所谓啦~

第二题

一道比较有关闭包的题目，本来以为自己是对的…栽坑了(后面不记得有没有参数)

var func = (function(a){
this.a = a;
return function(a){
a+=this.a;
return a;
}
})(function(a,b){
return a;
}(1,2));
func(4)

我开始的思路判断两个闭包是对的，后面想太多以为里面的第二个闭包

function(x,y){return x+y}(2,3)

应该会抛出一个错误然后被接收，然后数字加上一个不为数字的值等于NaN…天真了，抛开这点这只是一个简单的闭包，答案应该是5，可以复制到控制台上看一下输出

第三题

在一个body中插入十个

<ul><li>第1项</li></ul>

,考虑效率和性能

这里我本来想用DocumentFragment的方式来创建元素然后插入，不过想起之前看过的一篇文章提到在现代浏览器上已经对重流和重绘做出了延迟，性能已经不能有什么优化了，直接插入html更加高效。

var str='<ul>',$body;
for(var i = 1;i<=10;i++){
str+='<li>第'+i+'项</li>'
}
str+='</ul>'
$body=typeof document.querySelectorAll=='function'?document.querySelectorAll('body')[0]:document.getElementsByTagName('body')[0];
$body.innerHtml+=str;

第四题

创建一个长度为100的数组array，值等于其下标

so easy,不用push还是考虑下标性能更好

for(var i = 0;i<100;i++)
array[i]=i

第五题

对上数组乱序排序

写得时候我用了两个random来操作，现在想想一个就够了

var i ,j,temp;
for(i =0;i<100;i++){
j=Math.floor(Math.random()*100);
temp=array[i];
array[i]=array[j];
array[j]=temp;
}

第六题

优雅的方式对前十个数组元素相加

优雅…想了想，可以用柯里化函数来做…测了一下又发现自己写错了,心疼(┬＿┬)

function sum(x){
function add(y){
x+=y
return add
}
add.toString=add.valueOf=function(){
return x
}
return add
}
for(var i =0;i<10;i++)
sum=sum(array[i])
console.log(sum)

第七题

列出你知道的继承父类的方式，以及平时你喜欢用的方式，有什么优点？

考察了面向对象编程的一些东西，笔试的时候我只想到了三种，列了两种，提了自己比较喜欢的一种

分别为拷贝继承(写得时候记成寄生模式…)和直接继承prototype,还有其他几种，感兴趣的可以自己查一下，还有通过空对象继承，我写了个extend的方法

function extend(Child, Parent) {
　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
}

最后提了一下TypeScript和ES6里面的Class

第八题

根据雅虎前端优化法则，对html，css，js，图片资源应该做出怎么样的处理

写得时候想不起雅虎定律，只记得刚学前端的时候看了下，后来的后来就不记得了…所以这题我随便扯了一些自己平时在部署前端上线前对资源做的处理，大体就是对资源文件的合并压缩混淆以及加载策略的选择，减少HTTP请求数量，spring图，内联图片转base64，gzip压缩，优化图片，对不同设备提供不同大小质量图片，提到了很多，不过少了一些服务端配置的东西

第九题

上面的流程能不能自动化？

我提到了webpack，systemjs等模块加载器来打包应用，或者使用像gulp，grunt，fls等前端自动化构建工具来配置自动化构建架构，不过还是少说了一点服务端的东西。

第十题

正则匹配 *.9game.cn,如在

内容内容 http://www.9game.cn/home/page 内容内容

替换为

内容内容 <a>http://www.9game.cn/home/page</a> 内容内容

,($1)写一段正则

写的时候写的很简单…回来查了一下还是要考虑挺多东西的，错的一塌糊涂,应该这样写

^(f|ht)(tp)(s)?(:\/\/)\w+(\.\w+)*?(\.9game\.com)(/[^\s]*)*?$

—-晚上又想了想,补充一下—-

如果这里匹配的是所有URL的话应该怎么写,看了一下万网关于域名的定义

域名可由英文字母(a-z，不区分大小写),数字(0-9),中文汉字以及连字符

-

(即中横线)构成，不能使用空格及特殊字符(如！、$、&、?等).

-

不能单独注册或连续使用,不能放在开头或结.

((f|ht)(tp)(s)?(:\/\/))?([a-z0-9\x7F-\xFF]+(-)?\.)+(com|edu|org|biz|info|\name|museum|coop|aero|[a-z][a-z])(:\d+)?(\/[^.!,?;"'<>*()\[\]{}\s\u4E00-\u9FA5]+([.!,?][^.!,?;"'<>*()\[\]{}\s\u4E00-\u9FA5]+)*)?

写了半天~后来发现有一种很短很方便的通用匹配方法

[a-zA-z]+://[^\s]*

不过这样的正则匹配比较宽松,而且是通过空格匹配分界,遇到中文中嵌入链接的时候没法准确匹配~而我上面写的匹配则相对严谨,而且结尾不能为几种特殊字符外还不能是中文和空格,就是长了点~

第十一题

如果上面的代码对性能要求很高，如何让其发布的时候错误率尽可能低，对代码质量做出有效性指标

我提到了引入PDD测试驱动，提高测试的覆盖率，还有多分支开发，避免在主分支上产生问题，出现问题也能及时回滚

第十二题

网页开发出现问题的时候你如何定位问题，中你常用的调试工具或者其他辅助工具

我开发的时候用的是chrome控制台调试定位问题，调试IE兼容性时用的是Edge新提供的调试工具，辅助工具如jshint代码质量保证以及开发Angular,React时还会用到对应的调试插件，还有就是在代码中打log。

第十三题

偏偏在本地测试页面完全正常，偏偏(出题人之幽默)上线网页的时候出现异常，如何来解决

我看到这个题目马上想起自己之前部署页面遇到的很多奇葩问题，有感而发写了自己认为比较合理的排查问题的顺序。

首先先查看一下服务器是否能正常启动，接口能否正常访问，静态资源是否正常加载，如果没有问题，这个时候我们可以看看控制台有什么比较隐蔽的报错没有(其实也没所谓隐蔽，通常来说在检验前面步骤的时候也会看到)，根据错误来定位一下具体是什么问题，例如像我之前遇到的严格模式不能重复定义变量的问题~

如果控制台一片洁白，没有什么报错，资源也正常加载，这个时候你可能进入了某些奇怪的坑中了，面对这种疑难杂症，我一般采取试试google一下用到东西的关键词以及遇到的问题，或者请教一下前辈。

第十四题

解决回调地狱的方式，一句话概括一下优势

我提到了promise.then链式调用的方式，还有封装回调函数来精简回调的逻辑，最后也说了一下ES6中的yeild语句，用同步的语法写异步。

第十五题

总共十五道题~还有一题忘记了

整理完发现自己在几道有明确答案的题目上都错了，基础还是不够扎实，岌岌可危…求后续，我回去哭了(┬＿┬)