阿里巴巴2017秋招前端笔试题

1、下面的 JSX 代码中，哪一个无法达到预期的效果？
正确答案: C

Hello World

{msg}

Leo

解：react中的知识。
2、正则表达式 /a+(bab)?(caac)*/ ，下列选项中是该正则表达式的子集是？
正确答案: C 
/(bab)(caca)/
/a(bab){2}(caac)*/
/a{2}/
/a+(bab){0,1}(ca)+(ca)/
/a(^bab)+(caac){1,}/
/a+(babc){2,}(acc){1,}/
解：考正则的知识。
a+：1个或多个a
(bab)?：零个或一个bab
(caac)*：零个或多个caac
3、下列说法错误的是：
正确答案: C
在Blink和WebKit的浏览器中，某个元素具有3D或透视变换（perspective transform）的CSS属性，会让浏览器创建单独的图层。
我们平常会使用left和top属性来修改元素的位置，但left和top会触发重布局，取而代之的更好方法是使用translate，这个不会触发重布局。
移动端要想动画性能流畅，应该使用3D硬件加速，因此最好给页面中的元素尽量添加translate3d或者translateZ(0)来触发3D硬件加速。
解决浏览器渲染的性能问题时，首要目标就是要避免层的重绘和重排。
解：移动端知识。
C选项：滥用硬件加速会导致严重性能问题，因为它增加了内存使用，且导致移动端电池寿命减少。
由于GPU的参与，现在用来做动画的最好属性是如下几个：
* opacity
* translate
* rotate
* scale
4、将数组 var a=[1,2,3] 变成数组 [4,3,2,1] 下面的方式正确的是？
正确答案: A C 
a.reverse().unshift(4)
a.push(4).reverse()
a.push(4); a.reverse()
a.splice(3,1,4).reverse()
解：切记一点：数组的push方法返回的是新数组的长度。
5、目前 HTTP2 协议已经逐渐普及到日常服务器中，以下对于 HTTP2 协议描述正确的是：
正确答案: A B C D
所有http请求都建立在一个TCP请求上，实现多路复用
可以给请求添加优先级
服务器主动推送 server push
HTTP2的头部会减小，从而减少流量传输
6、请问下面哪种方式可以在不改变原来数组的情况下，拷贝出数组 b ，且满足 b!=a 。例如数组 a 为 [1,2,3] 。
正确答案: B D
let b=a;
let b=a.slice();
let b=a.splice(0,0);
let b=a.concat();
解：直接将数组赋值给一个变量，其实是地址的引用，还是同一个数组。
7、以下代码，分别给节点 #box 增加如下样式，问节点 #box 距离 body 的上边距是多少？

如果设置 position: static ; 则上边距为 ____px
如果设置 position: relative ; 则上边距为 ____px
如果设置 position: absolute ; 则上边距为 ____px
如果设置 position: sticky ; 则滚动起来上边距为 ____px
正确答案：
(1) 20
(2) 30
(3) 30
(4) 10
解：
position: static ; 则上边距为20px  静态定位top值无效
position: relative ; 则上边距为30px 移动的时候会包括margin
position: absolute ; 则上边距为30px 移动的时候会包括margin
position: fixed ; 则上边距为30px 固定定位的margin也会生效 移动的时候也会包括margin
position: sticky ; 则上边距为20px，页面滚动起来为10px，margin会无效；页面没滚动的 时候是静态定位
8、我们需要实现动态加载一个JavaScript资源，但是有几处不知道如何处理，需要您的帮助完成这一项工作
var script = document.createElement(“script”);
var head = document.getElementsByTagName(“head”)[0];
script.type = “text/javascript”;
script.src = “//i.alicdn.com/resource.js”;
// 绑定资源加载成功事件
script.____= function( ){
// 判断资源加载状态是否为加载成功或加载完成
if( ____.test(script.____)) {
script.onreadystatechange = null;
. . . .
}
};
// 绑定资源加载失败事件
script. ____= function( ) {
. . . .
};
head.insertBefore (script , head.firstChild)
正确答案：
(1) onreadystatechange
(2) /^(loaded|complete)$/
(3) readyState
(4) onerror
解：资源加载成功后readyState的状态为loaded或complete
9、请使用两种不同的CSS方法（要求dom结构不同）实现下图所示的条形图。从左到右的条形分别记为A,B,C,D,E。A的高度为30%，颜色为#f00；B的高度为80%，颜色为#ddd；C的高度为70%，颜色为#0fd；D的高度为60%，颜色为#ff0；E的高度为90%，颜色为#234，每个条形之间的距离可以任意设置（可以考虑使用CSS3新属性来实现）。

答案：
方法一：
html：

css：

#box{
height:200px;
border-left: 2px solid #000;
border-bottom: 2px solid #eee;
position: relative;
}
.tiaoxing{
position: absolute;
width:20px;
}
#A{
height:30%;
background-color:#f00;
left: 5px;
top: 70%;
}
#B{
height:80%;
background-color:#ddd;
left: 30px;
top: 20%;
}
#C{
height:70%;
background-color:#0fd;
left: 55px;
top: 30%;
}
#D{
height:60%; 
background-color:#ff0;
left: 80px;
top: 40%;
}
#E{
height:90%;
background-color:#234;
left: 105px;
top: 10%;
}

方法二：
HTML：

css：

ul{
    height: 200px;
    border-left: 2px solid #000;
    margin-bottom: 2px solid #eee;
    margin: 0;
    padding: 0;
}
ul li{
    width: 20px;
    margin-left: 10px;
    display: inline-block;
    list-style: none;
}
li:nth-child(1){
height: 30%;
background-color: #f00;
}
li:nth-child(2){
height: 80%;
background-color: #ddd;
}
li:nth-child(3){
height: 70%;
background-color: #0fd;
}
li:nth-child(4){
height: 60%;
background-color: #ff0;
}
li:nth-child(5){
height: 90%;
background-color: #234;
}

10、题目描述
请实现方法 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
答案：
方法一：利用递归，空间复杂度O(1)

function parse(obj,str){
if (str==null||str.length==0) {
return -1;
}
return parseObj(obj,str);
}
function parseObj(obj,str){
var match=null;
if (match=str.match(/^[a-z0-9]+$/)) {
return obj[match[0]];
}
if (match=str.match(/([a-z0-9]+)\[([0-9]+)\]\.([a-z0-9]+(\.[a-z0-9]+)*)/)) {
return parseObj(obj[match[1]][match[2]],match[3]);
}
if (match=str.match(/([a-z0-9]+)\.([a-z0-9]+(\.[a-z0-9]+)*)/)) {
return parseObj(obj[match[1]],match[2]);
}
}

以上方法不够灵活，如果对象的属性变了，就死翘翘了。。
方法二：利用数组的map方法遍历数组【推荐~掌握】

function parse(obj, str) {
if (str==null||str.length==0) {
return -1;
}
    str.replace('[','.').replace(']','').split('.').map(item=>obj=obj[item.trim()]);
    return obj||'undefined';
}

11、请问何为混合应用 (Hybrid APP) ，与原生 Native 应用相比它的优劣势。
解：Hybrid APP是Native APP上结合使用了Web View（Native APP 的模块或称组件，用来加载Web资源），采用了Web技术的APP，本质上属于原生应用（APP外壳）。
优势：
兼容性良好，“一次开发，多处运行”，能够减少原生APP开发在多平台带来的问题
代码移植性高
开发者社区活跃，能够及时应用最新适合的Web技术来解决问题，提高用户体验
APP更加轻便， 内容更新方便，部分更新不用从 APP Store 下载
劣势：
性能：相对不如 Native APP 性能良好、体验流畅
Web技术在APP中操作权限有限，需要APP同步支持