2015年9月阿里校招前端工程师笔试题

前一段时间参加了阿里的9月校招，为了贯彻及时总结的精神，今天就来总结一下我做的这套题目吧。

1.下面哪段css代码通常用于页面水平居中：

A:site-align:center;
B:margin:center;
C:margin:auto 0;
D:margin:0 auto;

这题很简单，水平居中答案选D。每个选项来剖析一下, A选项在我做开发两年来，完全没有见到过，初略百度一下也没看到相关的东西；B选项，明显错误；D，其实D可以做到页面垂直居中，要怎么做呢，如下图，默认是horizental的，如果改变书写模式，改成vertical，就可以实现垂直居中了，不妨试试

-webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
writing-mode: tb-rl; /* for ie */ 

 

2.下列关于http协议状态码描述错误的是：

A:200 请求成功
B:302 URL临时性替代
C:304 页面未修改
D:403 页面未找到

关于状态码，百度可以有很详细的介绍，这里简单说说，1开头表示消息，2开头表示成功请求，3开头表示重定向，意思是你请求的这个资源在服务器指向另一个地址，需要再请求，4开头表示客户端的错误，可能是url地址错误或者参数错误，5开头表示的是服务器错误，服务器挂了（？）之类的。所以，我们可以判断，200是OK，请求成功没问题。302的意思是Move temporarily，暂时性移动了，符合题意。304是Not Modified，没有被修改，符合题意。403是Forbidden，字面意思是禁止，服务器已经理解请求，但是拒绝执行它。所以D错误。另外提一下，页面未找到是我们见得最多的404。

 

3.以下关于盒子模型描述正确的是

A：标准盒子模型中：盒子的总宽度=左右margin+左右border+左右padding+width
B：IE盒子模型中：盒子总宽度=左右margin+左右border+width
C：标准盒子模型中：盒子的总宽度=左右margin+左右border+width
D：IE盒子模型中：盒子总宽度=width

盒子模型有两种，假如我们设置有以下设置：

width:100px;
margin:20px;
border:5px solid #fff;
padding:10px;

在IE盒子模型(box-sizing:border-box)中里面，这个容器的宽度就是100px=内容的width+左右border+左右padding，所以内容的width为40px,盒子宽度为100px。

而标准盒子模型（box-sizing:content-box）里，width就指的是内容的width，所以容器的宽度是width+左右border+左右padding，总共是160px;

所以答案是A，答案D很接近，IE盒子总宽度应该是width+左右margin。

 

4、对于事件委托（事件代理）描述不正确的是：

A：事件委托实现原理利用了冒泡的机制
B：事件委托提高了页面的性能
C：事件委托并不能提高性能，只是简化了事件管理成本
D：一般在JQuery中个利用delegate方法来进行事件委托

首先要知道什么是事件委托，就比如，onclick,onmouseover,onmouseout这些js事件本来是加在一个元素上面的，现在我不加，我让其他元素来实现。事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

$(function(){ 
    $('#ul12').delegate('li','click',function(){ 
        alert(123);
    }) 
});

像上面这样的就运用了事件委托。事件委托有什么好处呢？

1、提高性能。

2、新添加的元素还会有之前的事件。

所以到这里，我们知道了，答案是C。另外值得一提的是，现在jquery也可以用on方法来进行事件委托。

 

5、关于HTML语义化，以下哪个说法是正确的？

A：语义化的HTML有利于机器的阅读，如PDA手持设备，搜索引擎爬虫；但不利于人的阅读
B：Table属于过时的标签，遇到数据列表时，需尽量使用div来模拟表格
C：语义化是HTML5带来的新概念，此前版本的HTML无法做到语义化
D：Header、article、address都属于语义化明确的标签

这题显然B,C错误，那么A的后半句有点问题，语义化并不会造成阅读有问题的，所以答案选D。

 

6、编码判断一个对象obj自身是否包含某属性“render”

for(var propName in obj){
        if(){
            console.log(true);
        }
    }

直接答案：propName=='render'。因为题目自带遍历了，所以就不用obj.hasOwnProperty();

 

7、使用递归的方式实现一个求和函数

function sum(num){
        if(num>1){
           
        }else{
            return 1;
        }
    }

答案：return num+sum(num-1);

 

8、输出对象中值大于2的key的数组

var data={a:1,b:2,c:3,d:4};
Object.keys(data).filter(function(x){return       });
期待输出：["c","d"]

解析：首先，Object.keys(obj)返回一个数组，数组里是该obj可被枚举的所有属性。

console.log(Object.keys(data));//返回["a", "b", "c", "d"]

而filter的作用是从数组中找到适合条件的元素（比如说大于某一个元素的值）

var arr=[1,23,5,78,34,55,13];
        console.log(arr.filter(function(x){
            return x>23;
        }))
//返回[78, 34, 55]

回到题目，在得到了["a", "b", "c", "d"]这个数组后，我们要找出它们所对应的值大于2的，就应该拿着这些值回去data数组里面找，所以判断if(data[x]>2)，true的话就return，由于题目只有一行，所以用一个三目运算符即可。

答案：data[x]>2?x:null;

 

9、使用尽量多的方式实现一个块元素在容器中水平垂直居中，可以使用css3特性

这题就不细说了，网上很多，关键在于自己动手多实践，去理解，只是看是永远记不住的。

 http://www.3lian.com/edu/2014/07-09/154729.html

http://blog.sina.com.cn/s/blog_5177c22601012ooj.html

http://www.dbpoo.com/css3-transform-vertical-center/

 

10、请将下面的对象

{"react":100,"angular":75,"javascript":116,"backbone":15}

排序后输出为

{"backbone":15,"angular":75,"react":100,"javascript":116,}

 

答案：

var obj={"react":100,"angular":75,"javascript":116,"backbone":15}
        var obj2={};

        var json=[
            {name:"react",value:100},
            {name:"angular",value:75},
            {name:"javascript",value:116},
            {name:"backbone",value:15}
        ]

        json.sort(function(x,y){
            return (x.value>y.value)?1:-1;
        })

        for(var i=0,j=json.length;i<j;i++){
            Object.defineProperty(obj2,json[i].name,{
                value:json[i].value
            });
        }

        console.log(obj2);