2017阿里巴巴秋招前端笔试题总结
1.正则表达式/a+(bab)?(caac)*/，下列选项中是该正则表达式的子集的是？
A. /(bab)(caca)/
B. /a(bab){2}(caac)*/
C. /a{2}/
D. /a+(bab){0,1}(ca)+(ca)/
E. /a(^bab)+(caac){1,}/
F. /a+(babc){2,}(acc){1,}/
答案：C
2.下列说法错误的是：
A. 在Blink和WebKit的浏览器中，某个元素具有3D或透视变换的CSS属性，会让浏览器创建单独的图层。
B. 我们平常会使用left和top属性来修改元素的位置，但乐翻天和top会触发重布局，取而代之的更好方法是使用translate，这个不会触发重布局。
C. 移动端要想动画性能流畅，应该使用3D硬件加速，因此最好给页面中的元素尽量添加translate3d或者translateZ(0)来触发3D硬件加速。
D. 解决浏览器渲染的性能问题时，首要目标就是要避免图层的重绘和重布局。
答案：C
可通过这种方法优化CSS3的动画效果。在一个没有特效的普通页面中，一个页面中只有一个图层，当图层中的大小位置等发生变化时，整个页面都要重布局，可能出现卡顿。使用3D、透视变换的属性时能强迫浏览器单独生成一个图层，由GPU来重绘动画，能减少卡顿的情况。然而使用GPU可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命，因此使用时要小心。
3.将数组var a = [1,2,3] 编程数组 [4,3,2,1] 下面的方法正确的是？
A. a.reverse().unshift(4)
B. a.push(4).reverse()
C. a.push(4);a.reverse()
D. a.splice(3,1,4).reverse()
答案：A C
reverse()改变数组自身并返回；push()和unshift()改变数组自身，返回新数组的长度；splice()改变数字自身，返回被删除项组成的新数组。
3.目前HTTP2协议已经逐渐普及到日常服务器中，以下对于HTTP2协议描述的正确的是：
A. 所有http请求都简历在一个tcp请求上，实现多路复用
B. 可以给请求添加优先级
C. 服务器主动推送sever push
D. HTTP2的头部会减小，从而减少流量传输
答案：ABCD
前端应该了解的HTTP2
4.下列哪种方式可以在不改变原来数组的情况下，拷贝出数组到b，且满足b!=a。例如数组a为[1,2,3]。
A. let b = a;
B. let b = a.slice();
C. let b = a.splice(0,0);
D. let b = a.concat();
答案：B D
要满足b!=a那么操作应该是深拷贝。A显然是浅拷贝，b和a的内存地址相同；C中splice()方法返回删除的元素构成的新数组，b=[]。
splice()和concat()两种方法可以实现深拷贝，但如果数组中有元素是引用对象其实现的仍然是浅拷贝，遇到这种情况可以以下方法实现深拷贝：(对象的深拷贝也可用)
let b = [].concat(JSON.parse(JSON.stringify(arr)));5.以下代码，分别给出节点#box增加如下样式，问节点#box距离body的上边距是多少？
<body style="margin:0;padding:0;">
<div id="box" style="top:10px;margin:20px 10px;">
div>
body>如果设置position: static，则上边距为(20)px
如果设置position: relatvie，则上边距为(30)px
如果设置position: absolute，则上边距为(30)px
如果设置position: sticky，则上边距为(10)px
分析：static：不脱离文档流，偏移属性设置无效；relative：不脱离文档流，相对自身在文档流中的位置进行偏移，不影响文档流中的其他元素；absolute：脱离文档流，相对离自身最近的定位的祖先元素进行偏移，如果没有定位的祖先元素则一直追溯到body，不影响文档流中的其他元素。sticky：在屏幕范围内时相当于static，不受偏移属性的影响；当元素被滚动到超出屏幕范围时相当于fixed，偏移属性有效，但margin无效。此特性现在的兼容性不好，也并不在W3C标准中，还处于试验阶段。
6.我们需要实现动态加载一个Javascript资源但是有几处不知道如何处理，需要您的帮助完成这一项工作：
var script = document.createElement('script');
var head = document.getElementByTagName('head')[0];
script.type="text/javascript";
script.src='//i.alicdn/resource.js';
//绑定资源加载成功事件
script.(1) = function(){
//判断资源加载状态是否为加载成功或加载完成
if((2).test(4)){
script.onreadystatechange = null;
}
}
//绑定资源加载失败事件
script.(4) = function(){
...
}
head.insertBefore(script,head.firstChild);答案：1. onreadystatechange
2. /^(complete|loaded)$/
3. readyState
4. onerror
7.请实现方法parse，作用如下：
var object = { b: { c: 4 }, d: [{ e: 5 }, { e: 6 }] }; console.log( parse(object, ‘b.c’) == 4 ) //true
console.log( parse(object, ‘d[0].e’) == 5 ) //true
console.log( parse(object, ‘d.0.e’) == 5 ) //true
console.log( parse(object, ‘d[1].e’) == 6 ) //true
console.log( parse(object, ‘d.1.e’) == 6 ) //true
console.log( parse(object, ‘f’) == ‘undefined’ ) //true我的代码：
function parse(obj,loca){
var arr = loca.split(/\[|\]|\./).filter(function(item){
return item;
});
arr.forEach(function(item,index){
obj = obj[item];
})
return obj||undefined
}注：split使用多个分隔符时参数是一个正则表达式，此时用|分割开每个分隔符就可以了。需要注意的用”[“，”]”，”(“，”)”，”+”，”?”，”*”这类在正则表达式中具有特殊含义的字符做分隔符时，要加/转义。
大神的代码：
function parse(obj,str){
str.replace('[','.').replace(']','').split('.').map(function(item){
obj = obj[item];
})
return obj||undefined;
}