【前端】2015阿里前端实习生在线笔试题

网上找的题，自己做了做。

...

2015阿里巴巴前端实习生在线笔试题

1. （单项选择）对于下列程序运行结果，符合预期的是

function f1() {

　　console.time('time span');

}

function f2() {

　　console.timeEnd('time span');

}

setTimeout(f1, 100);

setTimeout(f2, 200);

function waitForMs(n) {

　　var now = Date.now();

　　while (Date.now() - now < n) {

　　}

}

waitForMs(500);

A. time span:700.077ms       B. time span:0.066ms

C. time span:500.077ms       D. time span:100.077ms

答：

• console.time() 和 console.timeEnd() 这两个方法用于计时，可以算出一个操作所花费的准确时间。

time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。

调用timeEnd方法之后，console窗口会显示“计时器名称: 所耗费的时间”。

(详情见我的博客《Web前端学习笔记【1】》第23条)

 

• 引用《JavaScript高级程序设计》里的一段话：

第100ms和200ms的时候，f1 和f2 就已经被装进消息队列里了。

而 waitForMs() 占用了主线程500ms，导致这500ms内主线程没有取消息，导致f1 和 f2被装进消息队列里以后并没有立即被取出来，而500ms之后f1 和f2 几乎是同时连续地被取出来的。

所以，f1 和 f2 几乎就同时执行了。

如图：

2. （单项选择）请选择结果为真的表达式:

A. null instanceof Object         B. null == undefined

C. NaN == NaN                     D. false == undefined

答：

undefined:

undefined是全局对象（window）的一个特殊属性，其值是未定义的。但typeof undefined返回undefined。 

未定义的值和定义未赋值的为undefined.

null:

null是一种特殊的object，所以typeof null 返回的应该是object。但是null instanceof Object返回的是false, 原因就是null是个特殊的Object类型的值 ，表示空引用的意思 。instanceof 表示某个变量是否是某个对象的实例 ,所以为false 。

null是一个对象，但是为空。因为是对象，所以typeof null返回object 。null是JavaScript保留关键字。 null参与数值运算时其值会自动转换为0，因此，下列表达式计算后会得到正确的数值： 表达式：123 + null 结果值：123 表达式：123 * null 结果值：0 

undefined == null是正确的，但null和undefined并不是等价的。每个作为其独特的类型的唯一成员,undefined是Undefined类型和null是Null类型。所以undefined === null是不正确的，因为他们虽然值相等，但是类型不相等。区分这两个值，可以认为undefined代表一个意想不到的没有值而null作为预期没有值的代表。

NaN是一个值类型,同是也是一个数值.意思是Not A Number,这个都知道是什么意思.值比较特殊,特殊在于NaN是一个数字,是一个与任何数值都不相等的数字。所以NaN == NaN返回false。

undefined被转换为布尔值为false，Boolean(undefined)返回的是false，但是undefined不等于false。所以false == undefined返回false。 

 

3. （单项选择）下面程序的执行结果是：

var name = 'World!';

(function () {

    if (typeof name === 'undefined') {

        var name = 'Jack';

        console.log('Goodbye '+ name);

    } else {

        console.log('Hello ' + name);

    }

})();

A. Goodbye Jack          B. Hello Jack

C. Hello undefined       D. Hello World

答：

变量提升。函数内的name是局部变量

4. （不定项选择）以下关于DOM事件流的表述哪些是正确的

A. 事件流包括两个阶段：事件捕获阶段、事件冒泡阶段。

B. IE跟标准浏览器对于DOM事件流实现不一样

C. 假设parentEle是childEle的父节点，绑定事件：

　　parentEle.addEventListener(“click”, fn1, false)和

　　childEle.addEventListener(“click”, fn2, false),当点击childEle的时候fn1将先于fn2触发。

D. addEventListener第三个参数true代表支持捕获，false代表不支持捕获

答：

当一个事件发生以后，它会在不同的DOM节点之间传播（propagation）。这种传播分成三个阶段：
第一阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）。
第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
第三阶段：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）。

“DOM2级事件流”规定的事件流包括三个阶段：事件捕获阶段、事件处于目标阶段、事件冒泡阶段。

addEventListener第三个参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。  

IE只支持事件冒泡，通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

详情见我的博客《Web前端学习笔记》第24、25、26条

5. （不定项选择）通过下面的哪些方法可以获取页面的html元素

A. document.getElementById

B. document.getElementsByClassName

C. document.querySelector

D. document.querySelectorAll

答：

详情参见《JavaScript参考教程》第5.2 document节点 （http://javascript.ruanyifeng.com/dom/document.html#toc11)  的第3.3

6. （不定项选择）下面选项中，对javascript事件的描述不正确的是：

A. IE使用attachEvent/detachEvent方法来添加和删除事件监听器；w3c使用addEventListener/removeEventListener方法。

B. IE是将event对象作为参数传递给监听器,w3c事件监听器内使用的是一个全局的Event对象。

C. IE提供了对事件捕获阶段的支持。

D. 要停止事件的传递，IE的做法是设置event对象的cancelBubble为true，而w3c的做法是设置执行stopPropagation方法。

答：

B 写反了。C 无中生有。

7. （单项选择）

var array1 = [1,2];

var array2 = array1;

array1[0] = array2[1];

array2.push(3);

console.log(array1);

console.log(array2);

执行上面的代码array1和array2的值分别是什么？

A. Array1的值为[2,2];Array2的值为[1,2,3]

B. Array1的值为[2,2,3];Array2的值为[1,2,3]

C. Array1的值为[2,2,3];Array2的值为[2,2,3]

D. Array1的值为[1,2,3];Array2的值为[1,2,3]

答：

数组对象是引用的关系。

array1 和 array2 指向的是同一个数组对象。一个改变，另一个也会改变。

8. （不定项选择）有如下代码：

function Test(name,age){

    this.name = name;

    this.age = age;

};

Test.prototype = {

    name:’aliyun’,

    hasOwnproperty:function(){

    return false;

}

};

var instance = new Test(‘alibaba’,102);

以下关于原型链的说法正确的是：

A. JavaScript对象有两种不同的属性，一种是对象自身的属性，另一种是继承于原型链上的属性

B. instance.name == ‘aliyun’为true

C. instance.hasOwnproperty(‘age’)结果将是false

D. 所有对象都继承自Object.prototype

答：

instance.name 将会覆盖掉 Test.prototype.name, 所以B错。

9. 实现函数range([start,]stop[,step])返回一个数组（step大于1）

> range(1,11); => [1,2,3,4,5,6,7,8,9,10]

> range(0); => []

> range(10); => [0,1,2,3,4,5,6,7,8,9]

> range(0,30,5); => [0,5,10,15,20,25]

答：

function range() {
    var arr = [],
        start = 0,
        stop = 0,
        step = 1;
    switch(arguments.length) {
        case 1:
            stop = arguments[0];
            break;
        case 2:
            start = arguments[0];
            stop = arguments[1];
            break;
        case 3:
            start = arguments[0];
            stop = arguments[1];
            step = arguments[2];
            break;
        default:
            throw Error('number of arguments must be 1, 2 or 3');
    }
    if (step < 1) 
        throw Error('step must >= 1');
    for (var i = start; i < stop; i += step) {
        arr.push(i);
    };
    return arr;
}

 

10. 背景：

①. 对象A直接调用对象B的某个方法，实现交互逻辑。但是导致的问题是A和B紧密耦合，修改B可能导致A调用B的方法失效。

②. 为了解决耦合导致的问题，我们可以设计成：

对象A生成消息 -> 将消息通知给一个消息处理器（Observable）-> 消息处理器将消息传递给B

具体的调用过程变成：

A.emit(‘message’,data); B.on(‘message’,function(data){});

请实现这一事件消息代理功能

//请将事件消息功能补充完整

function EventEmitter(){

   

}

答：

暂时不会

11. 实现下图的布局

<main>

    <div>

        A

    </div>

    <div>

        B

    </div>

    <div>

        C

    </div>

</main>

答：

div {
    /* important: */
    height: 50px;
    line-height: 50px; /* line-height一定要等于height */
    width: 50px;
    background-color: black;
    display: inline-block;
    color: white;
    text-align: center;
    
    /* not important: */
    margin-left: 10px;
    font-size: 20px;
}

 

12. 有一个包含数据列表的页面，数据行数不确定。每一行数据都有一个删除按钮，单击删除按钮删除该列数据，请用JavaScript实现该功能。

答： 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        <li>一<button>删除一</button></li>
        <li>二<button>删除二</button></li>
        <li>三<button>删除三</button></li>
        <li>四<button>删除四</button></li>
        <li>五<button>删除五</button></li>
        <li>六<button>删除六</button></li>
    </ul>
    <script>
        window.addEventListener('load', function () {
            var ul = document.getElementsByTagName('ul')[0];
            ul.addEventListener('click', function (ev) {
                ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                // 当点击的元素===button元素时，移除此button所属的li元素
                if (target.tagName.toLowerCase() === 'button') {
                    var li = target.parentNode;
                    li.parentNode.removeChild(li);
                }
            });
        });
        // 另一种写法(不推荐)：
        // window.onload = function () {
        //     var btnArr = document.getElementsByTagName('button');
        //     for (var i in btnArr) {
        //         btnArr[i].onclick = function (ev) {
        //             var ev = ev || window.event;
        //             var target = ev.target || ev.srcElement;
        //             var li = target.parentNode;
        //             li.parentNode.removeChild(li);
        //         };
        //     }
        // };
    </script>
</body>
</html>

 

 

13. 编写CSS让一个已知宽高的DIV, 在PC/手机端水平垂直居中

答：

div {
    /* important: */
    position : absolute;
    top : 50%;
    left : 50%;
    margin-top : -150px; /* margin-top的大小一定要是height的一半 */
    margin-left : -150px; /* margin-left的大小一定要是width的一半 */ 

    /* not important: */
    width : 300px;
    height : 300px;
    border : 1px solid red;
}

  

14. 使用语义化的 HTML 标签及css完成以下布局

 

• 容器默认宽度320px，图片100*100

• hover 时容器宽度变为400px

• 右侧文字宽度自适应，考虑模块化和扩展性

答：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    div {
        width: 320px;
    }
    div:hover {
        width: 400px;
    }
    img {
        float : left;
        width : 100px;
        height : 100px;
    }
    h1 {
        color : #333;
        margin-bottom : 8px;
        font-size : 20px;
    }
    p {
        color : #666;
        font-size : 12px;
        line-height: 1.2em;
    }
    </style>
</head>
<body>
<div>
    <img src="/Users/zhaokang/Desktop/c.jpg">
    <h1>第一行<br>第二行</h1>
    <p>some text some text some text some text some text some text some text some text some text some text </p>
</div>
</body>
</html>

15. 写一个可以暂停执行的JS函数

答：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <input type="button" value="继续" onclick='bar();'/>
    <script>
        function foo(x){
            return function(){
                console.log(x++);
            }
        }
        var bar = foo(10);
    </script>
</body>
</html>

 

16. 用JavaScript写一个Ajax的get请求

答：

var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}
// 发送请求:
request.open('GET', 'some url...', true);
request.send();
alert('请求已发送，请等待响应...');
// ======用来处理结果的函数======
function success(text) { /* ... */ }
function fail(code) { /* ... */ }

 17. 使用html+css实现以下图形（不能用图片）

 

答：

<!DOCTYPE html>
<html>
<head>
    <title>picture</title>
    <style type="text/css">
        #rectangle {
            height: 120px;
            width: 200px;
            border: 10px solid #999999;
            padding: 10px;
            
            /* not important: */
            background: #fff;
        }
        .innerShape {
            position:absolute;
        }
        #circle {
            margin-left: 140px;
            margin-top: 10px;
            width: 40px;
            height: 40px;
            background: #999999; 
            border-radius: 20px;

            /* not important: */
            -moz-border-radius: 20px; 
            -webkit-border-radius: 20px; 
        }
        .triangle {
            width: 0; 
            height: 0; 
        }
        #triangleLeft {
            /* 40 + 80 = 120 */
            margin-top: 40px;
            border-bottom: 80px solid #999999; 

            border-left: 50px solid transparent; 
            border-right: 70px solid transparent; 
        }
        #triangleRight {  
            margin-left: 90px;

            /* 60 + 60 = 120 */
            margin-top: 60px;
            border-bottom: 60px solid #999999;

            border-left: 30px solid transparent; 
            border-right: 70px solid transparent; 
        }
    </style>
</head>
<body>
    <div id="rectangle">
        <span id="circle" class="innerShape"></span>
        <span id="triangleLeft" class="triangle innerShape"></span>
        <span id="triangleRight" class="triangle innerShape"></span>
    </div>
</body>
</html>

 

 

18. 数组去重，然后使数组元素按降序排序 

答：

Array.prototype.unique = function () {
    var newArray = [];//结果数组
    for (var i = 0; i < this.length; i++) {
        if (newArray.indexOf(this[i]) === -1) {
            newArray.push(this[i]);
        }
    }
    return newArray;
}

或者：（速度更快）

Array.prototype.unique = function () {
    var arrayMap = {}, newArray = [];
    for (var i = 0; i < this.length; i++) {
        if (!arrayMap[this[i]]) {
            arrayMap[this[i]] = true;
            newArray.push(this[i]);
        }
    }
    return newArray;
}

最后：

arr = arr.unique();
arr.sort(function (a, b) {
    return a - b;
});

19. 已知：

    var data = {
        name: 'xiaoming',
        age: '18'
    };
    var template = "My name is {$name}, my age is {$age}";

    //写一个函数，实现：
    foo(template, data) => "My name is xiaoming, my age is 18."

 答：

function templateReplace(template, data) {
    for (var i in data) {
        oldRe = new RegExp('\\{\\$' + i + '\\}', 'g');
        newStr = data[i].toString();
        template = template.replace(oldRe, newStr);
    }
    return template;
}

20. 利用闭包，实现点击<p>时，被点击的p的背景色变为#eee

答：（暂时没有利用闭包...）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <p>第一个</p>
    <p>第二个</p>
    <p>第三个</p>

    <script>
        window.addEventListener('load', function () {
            var body = document.body;
            body.addEventListener('click', function (ev) {
                if (ev.target.tagName.toLowerCase() === 'p') {
                    ev.target.style.backgroundColor = '#eee';
                }
            })
        });
    </script>
</body>
</html>

 

====================================

1. 

var arr = [1,2,3,4,5];
arr.splice(1,2,3,4,5);
arr = ?

答：

 arrayObject.splice(index,howmany,item1,.....,itemX) 

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

 

 

 

...