2014阿里前端线上笔试题解答

No. 1

题目：

下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

已知HTML结构是：

<div class="box">
    <div class="item">column 1</div>
    <div class="item">column 2</div>
    <div class="item">column 3</div>
</div>

解答：

.box {
    background-color: #619B99;
    display: -webkit-box;
    height: 40px;
    padding: 10px 0px 10px 210px;
    width: 100%;
}
.box>div {
    height: 40px;
    background-color: #EEEEEE;
    margin-right: 10px;
}
.box div:first-of-type {
    width: 200px;
    margin-left: -200px;
}
.box div:nth-of-type(n+2) {
    -webkit-box-flex: 1.0;
}

这个题目感觉十分有趣，让在div中显示三个框，第一个宽度固定，后面两个宽度一致。自然想到了使用 margin-left ，让框1脱离出来，使外部box真正的宽度仅仅为框2和框3的宽度，使之便于均分。但是在均分框2和框3的问题上我百思不得其解，因为如果要使用 width: 50% 的话，一旦采用margin 的方法使之产生边距，就会把框3挤下去，不可能实现图中的效果。

这里看了原帖发现 -box-flex 的属性，去查了一下发现不得了，这是css3的一个属性（请忽略我的无知），查了一下mdn，里面有句话说：

Content elements that have the same flex grow by the same absolute amounts.

这个并不是设定元素的绝对宽度，而是一个相对的概念，而我个人理解， width: a% 实际上仅仅是继承了上层元素宽度的百分比而已。使用了flex后，这个题目就得以良好的显示了。

由于盒子中的元素css属性并不相同，而其类名却都是一样的，因此有必要通过css选择器的方式来确定不同框之间的样式。这里就要提到css3里面新增的nth选择器（可以参见一下W3Cschool中的CSS选择器），在本例中使用的 div:first-of-type 就是用来选取父元素box中的div子元素，当然也可以使用 item:first-child 来代替，效果是一样的。但是这里的 div:nth-of-type(n+2) 就比较玄幻了，这里n是一个计数器，从0开始记，而其内部的序号又是从1开始的，也就是说框1对于box来说，是第一个，框2是第二个。这里的n+2的意思，就是从第二个开始算，直到最后一个元素。所以就把2、3的样式调整的一致了。当然，也可以使用 nth-child(n+2) 来代替。将上述的type-of转变为普通的nth，也即使用item类的代码如下：

.box {
    background-color: #619B99;
    display: -webkit-box;
    height: 40px;
    padding: 10px 0px 10px 210px;
    width: 100%;
}
.item {
    height: 40px;
    background-color: #EEEEEE;
    margin-right: 10px;
}
.item:first-child {
    width: 200px;
    margin-left: -200px;
}
.item:nth-child(n+2) {
    -webkit-box-flex: 1.0;
}

No.2

题目：

有两个盒子 A、B，B 在 A 盒子中，它们的 CSS 是这么定义的：

.A {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: green;
}

.B {
    position: absolute;
    max-width: 300px;
    max-height: 300px;
    background-color: blue;
}

如何实现 B 在 A 中水平方向和垂直方向居中？

解答：

作者在原文里表示可以使用CSS3的 box-align 和 box-pack 的方法（W3C链接如下box-align，box-pack），但是在实际测试中发现，如果B的定位不是 absolute （而是 relative 或者static）那么如下追加的代码是有效的：

.A {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
} 

但是当B的定位是绝对定位时，使用CSS3的box进行定位就起不到应有的效果。这里我们可以简单的看以下CSS的四种定位的原理（可参见mdn的解释：css position 以及quicksmode的这篇博文：the position declaration）。

• static ：默认定位，不可使用 top right bottom left 四种属性（以下简称TRBL）；
• relative ：相对定位，指的是针对默认定位的位置而产生偏移，可以使用TRBL调整定位的偏移量，但是元素本身还在文档流中占据位置；
• absolute ：绝对定位，指针对上一级非默认定位的位置（即上一级非 static 定位的父元素的位置）而产生的偏移，可用TRBL调整偏移量，与相对定位不同的是，元素本身漂出文档流，不再占据位置；
• fix ：固定定位，锚定浏览器窗口的一种定位方式，可用TRBL调整偏移量。

这里B元素使用了绝对定位，也就是其偏移是针对A元素而计算的，可以使用TRBL进行调整。所以说莫非这里出题人是想让我们采用原始的div居中方法？

在CSS2的时代，要将div水平垂直居中也算是个挺让人头疼的问题，其大致的方法有如下几种：

1. 外层元素宽度不固定，内层元素宽度固定：使用自动外边距或负值外边距两种方式；

   • 自动外边距，这里要求内层元素不能采取绝对定位：

     .B {
         width: 100px;
         margin: 0 auto;
     }

   • 负值外边距，用到了TRBL属性，要求内层元素采取绝对定位：

     .B { width: 200px; position: absolute; left: 50%; margin-left: -100px; }

2. 外层元素宽度固定，内层元素宽度不固定，采用表格法，要求内部元素不能采取绝对定位：

       A. {
           display: table;
       }
       .B {
           display: table-cell;
           vertical-margin: center;
       }

3. 增添HTML元素、使用Hack、使用JS等，不详述之。

然而观察上面的方法，题目中的限定条件是：外部元素宽度固定、内部元素宽度变动且绝对定位，这样就导致上述的方法没有一个可以满足所需要求的。我认为如果不改变题目中的限定，可以使用负值外边距的方法，用JS设置内层元素的margin值；或者直接在后面的CSS中修改内层元素的定位（设置为非绝对定位），然后使用CSS3的 box-align 和 box-pack 来实现，而这也是目前我认为实现效果最好，实现代码最为简洁的实现方式。

其中如果附加JS，代码如下：

<script>
    var b = document.getElementsByClassName('B')[0]
    ,   l = b.offsetWidth
    ,   h = b.offsetHeight

    b.style.marginLeft = -l/2 + 'px';
    b.style.marginTop = -h/2 + 'px';
</script>

No.8

题目：

现有代码如下：

var foo = 1;
function main(){
    console.log(foo);
    var foo = 2;
    console.log(this.foo)
    this.foo = 3;
}

1. 请给出以下两种方式调用函数时，输出的结果，并说明原因。

   var m1 = main();
   var m2 = new main();

2. 如果想要 var m1 = main() 产生的m1和前面的m2完全一致,又该如何改造main函数?

解答：

看到全局变量与函数内局部变量重名时，一定要先想到 hoisting （变量声明提升规则）！

在第一种调用方式里，函数内部声明了局部变量 foo ，因此其声明被提升至最前。因此该段代码等价于：

function main(){
    var foo;
    console.log(foo);
    foo = 2;
    console.log(this.foo)
    this.foo = 3;
}

在调用的时候，第一次输出为undefined，因为局部变量 foo 还没有被赋值，第二次输出为1，因为此时在非严格模式下 this 指代 window 对象。this.foo 即为全局变量的 foo 。

在第二种调用方式里，使用了原型链继承的方法，可以参见我的这篇文章：JavaScript原型继承工作原理，其中 new 运算符的作用等价于如下函数：

function New (f) {
    var n = { '__proto__': f.prototype };
    return function () {
        f.apply(n, arguments);
        return n;
    };
}

则在进行 new 运算时，函数中的 this 实际上指代的是运算符后面所跟的构造函数的原型链。因为在 new 运算的时候，实际上执行构造函数的是这一步： f.apply(n, arguments); 也就是说在构造函数中的 this 实际上指向的是变量 n ，而 n 是一个除了原形链指向 f 的原形链之外一无所有的空对象，所以这里的 this 实际上是指向了构造函数 f 的原形链。

所以这里的输出也就不难理解：因为构造函数 main() 本身的原形链为空，所以输出 this.foo 的结果为 undefined。

然后是第二问：使m1与m2的结果完全一致。我们知道m2所得到的是类 main 的一个实例化对象，这里要使得达到题目中的要求，就只能手工编写原形链继承，使 main 函数的返回结果为一个继承自其本身的对象。这里可以参考上面代码中 new 运算符的具体实现，编写 main 函数如下：

function main(){
    console.log(foo);
    var foo = 2;
    console.log(this.foo)
    this.foo = 3;

    //返回一个main的实例化对象
var n = {'__proto__': main.prototype};
    //main.apply(n, arguments);
n.foo = 3;
    return n;
}

这里因为在 main 函数里有 this.foo = 3 这一项，为原型添加了成员变量，但如果在这里使用apply 的方式为n添加这一属性的话，将进行无限递归导致栈溢出。而采取其他的方式都不可避免的会带来一些问题，所以直接给返回值n的属性foo进行了赋值，也起到了同样的效果。

No.9

题目：

实现如下图所示的布局，要求：

1. sidebar 固定宽度200px，content和header宽度自适应；
2. 当window宽度小于600px时，变成三行布局。

默认如下

宽度小于600px时如下

下面是html结构：

<div class='header'>
    <h1>header</h1>
</div>
<div class="sidebar>
    <h1">sidebar"</h1>
</div>
<div class="content">
    <h1>content</h1>
</div>

请写出其css代码：（提示，可以使用media query来检测浏览器窗口宽度）

解答：

这里涉及到CSS的media query检测，这里有篇文章详细介绍了其中的参数类型，而这篇文章则饶有性质的探讨了不同设备下应该如何编写media query，有兴趣的读者可以详细看一下。针对这个题来说，只要用到 screen and (min-width) 即可。代码如下：

h1 {
    margin: 0;
}
section div{
    height: 100px;
}
section div:nth-of-type(n+2) {
    margin-top: 20px;
}
.header {
    background-color: red;
}
.sidebar {
    background-color: green;
}
.content {
    background-color: blue;
}

@media screen and (min-width: 600px) {
    .sidebar {
        width: 200px;
        position: absolute;
    }
    .content {
        margin-left: 220px;
    }
}

这里还需要注意一个问题：sidebar的宽度固定，而content填充剩余的全部。针对这种一边固定而一边液态的情况，最好的解决办法就是将固定的部分浮动出来，然后将液态的部分使用margin来填充固态部分浮动而产生的空隙。这里使用了绝对定位，以满足题目中的要求。

No.10

题目：

写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推。

解答：

起初做这个题目的时候简单的认为所有链接应该指的就是 <a> ，所以很快写出了代码如下：

var body = document.getElementsByTagName("body")[0]
,   links = document.getElementsByTagName("a")
,   len = links.length
,   foo = function(e){
    if (e.target.tagName.toLowerCase() !== 'a') //注意这里的tagName是大写
        return
    for (var i = 0; i < len; i++) {
        if (links[i] === e.target) 
            alert(i + 1)
    }
}

body.addEventListener('click', foo, false)

但是后来看到网上有一个本题的解答：最英俊的程序员 阿里巴巴2013年校园招聘前端工程师笔试题详解，解答中使用了 document.links 的方法，查了一下发现这个数组返回的是所有有 href 的和标签，才知道链接不止有一种，那么可以把代码改成如下的样式：

var body = document.getElementsByTagName("body")[0]
,   links = document.getElementsByTagName("a")
,   len = links.length
,   foo = function(e){
    var tagName = e.target.tagName.toLowerCase()
    if ((tagName === 'a' || tagName === 'area') && e.target.href) {
        for (var i = 0; i < len; i++)
            if (links[i] === e.target) {
                alert(i + 1)
            }
    }
}

body.addEventListener('click', foo, false)

当然也可以采用网上最英俊的程序员的解答，在页面中每一个链接都绑定事件监听，只不过这样显得有些效率不高，特别是在页面链接过多的情况下。个人认为相同效果的事件监听还是在父级元素上绑定为好，要不就可惜了JS冒泡的监听机制啊。

No.14

题目：

(new Date).getTime() 和 +new Date() 都可以取到当前时间戳，它们的实现原理是什么，哪个效率更高？

解答：

这个题目挺有趣，起初我认为应该是第二个写法的效率更高……因为写起来更容易，但是经过实际的检验我意识到了我的错误，第一种写法所耗的时间基本上只有第二种写法的一半。后来查阅了MDN：Date.getTime 发现这个函数本身实际上等价于 valueOf ，那么结论也呼之欲出了。因为第一种方法实际上直接调用了 valueOf ，而第二种方法涉及到JS内部的类型转换（可以参见我的这篇文章：【WEB前端】百度前端面试经历小研究1——JavaScript 类型转换），尽管最终的结果也是调用了 valueOf 函数，但是毕竟有个转换的过程，所以效率理应比前者要来的低下吧。

No.16

题目：

请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点。

解答：

第一反应就是想到jQuery里面的 getParents() ，自己想了一下JS中可以获取 parentNode ，所以应该循环获取就可以了。解答如下：

function getParents(ele) {
    var matched = []
    // 防止获取 document
    while ( (ele = ele.parentNode) && ele.nodeType !== 9) {
        matched.push(ele)
    }
    return matched
} 

No.20

题目：

有一个数组，其中保存的都是小写英文字符串，现在要把它按照除了第一个字母外的字符的字典顺序(字典顺序就是按首字母从a-z顺序排列，如果首字母相同则按第二个字母……)排序，请编写代码

例：["abd","cba","ba",]，排序后["ba","cba","abd"]

解答：

这个题目是专门凸显JS函数式编程特点的题目，结果原作者居然用C语言解答了……捂脸。这里给出JS的写法，十分简洁明了。

var bySecLetter = function(x, y) {
    if (typeof x === 'string' && typeof y === 'string') {
        var a = x.slice(1)
        ,   b = y.slice(1)
        if (a > b) return 1
        if (a < b) return -1
    }
    return 0
}

var a = ["abd","cba","ba"]
a.sort(bySecLetter)

这里只需要调用sort的比较函数，大于返回正数，小于返回负数，等于返回0即可。而作为字符串，本身的比较顺序就是字典顺序，所以只需要截取从第二个字符开始的字串进行比较，就可以得出比较结果。更多关于sort函数的信息可以参见MDN的链接。

转自：http://www.ituring.com.cn/article/56881#  http://www.ituring.com.cn/article/57466#