阿里巴巴 2015 暑期实习前端笔试题

时间 2019-12-05

原文原文链接

前言

上周二在阿里暑期实习的前端笔试那里打了个酱油。题目说实话都很基础，但若是以前没有专门写过相似的东西，现想现写的话，一个小时压力仍是有些大的（固然了，大神除外）。
下面把题目分享给你们，欢迎你们一块儿探讨交流，共同进步。
我作了一些，后面的大题确定有没写完的。稍晚些贴上来吧。javascript

题目来了

第一题

下列符合规范的 AMD 模块 ID 有？（单选）
【A】../../foo/Boo/WoO;
【B】foo/boo/Woo;
【C】./foo/boo/woo;
【D】foo/boo/woo.js;html

不知道 AMD 是神马（个人第一反应怎么是作 CPU 和显卡的那个），当时也没仔细谷歌。。看着顺眼随便选了个【C】
后来找了找，...前端

第二题

如下说法正确的有：（单选）
【A】HTML5 规范中不建议在一个页面中使用多个 h1;
【B】table 标签是过期的，不建议使用；
【C】Ajax 请求不可能阻塞 UI 线程；
【D】在网页首次加载的时候，visibility 值为 hidden 的图片仍是会被浏览器请求java

应该是D吧。。git

第三题

javascriptvar a = 0;
function A(){
    this.a = 1; 
    setTimeout(function(){
        this.a = 2;
        try{
            this.b="b";
            throw '';
        }
        catch(e){
            this.b='bb';
        }
    },0);
    this.b="bbb";
}

var aa = new A();

setTimeout(function(){
    console.log(aa.a);
    console.log(window.a);
    console.log(aa.b);
    console.log(window.b)
},0);

选项没截图下来，应该分别输出
一、二、bbb、bb;
考察点应该是setTimeout()的做用域是全局对象，在浏览器中，即为 windowgithub

第四题

下面的说法哪些是正确的：web

【A】将打印出 true.ajax

javascriptfunction foo(x){
    x = x || 1;
    console.log(x);
}
foo(2);

【B】将打印出 Noexpress

javascriptx=1;
if(x===true){
    console.log("Yes");
}
else{
    console.log("No");
}

【C】将打印出 undefined 2数组

javascriptvar obj1 = {x:1},
    obj2 = {x:2};
(function(obj2){
    delete obj2.x
})(obj1);
console.log(obj1.x, obj2.x);

【D】会打印出2

javascriptvar x = 1;
setTimeout(function(){
    x = 2;
},0)
console.log(x);

选 B、C

第五题

下列哪些 web 安全措施用于防护 csrf 攻击：
【A】http 响应添加 Content-Security-Policy 头部
【B】表单提交时需带上 token 并在服务器端校验经过才行
【C】前端对用户输入的内容进行编码
【D】每次请求的 token 最好都不同
【E】禁用 OPTIONS 方法

Web 安全高大上，当时谷歌了一把，发现 csrf 攻击好像能够用 token 去对付，就选了有 token 的两个，B 和 D.

第六题

javascriptvar obj = {
    '1':'a',
    '2':'b',
    'length':2,
    push:Array.prototype.push
}
obj.push('c');

浏览器执行以上脚本后，说法正确的是：
【A】obj 的 length 属性会变为 3;
【B】obj 的 length 属性不会变;
【C】obj3 的值是 c;
【D】obj1 和 2 的值不会发生变化;
【E】obj2 的值是 c;
【F】obj3 的值是 undefined;

选 A、E、F

说一下Array.prototype.push。
js Array 的源码好像是这个
V8
Array.prototype.push的部分貌似是这个：

javascriptfunction ObservedArrayPush() {
  var n = TO_UINT32(this.length);
  var m = %_ArgumentsLength();

  try {
    BeginPerformSplice(this);
    for (var i = 0; i < m; i++) {
      this[i+n] = %_Arguments(i);
    }
    var new_length = n + m;
    this.length = new_length;
  } finally {
    EndPerformSplice(this);
    EnqueueSpliceRecord(this, n, [], m);
  }

  return new_length;
}

// Appends the arguments to the end of the array and returns the new
// length of the array. See ECMA-262, section 15.4.4.7.
function ArrayPush() {
  CHECK_OBJECT_COERCIBLE(this, "Array.prototype.push");

  if (%IsObserved(this))
    return ObservedArrayPush.apply(this, arguments);

  var array = TO_OBJECT_INLINE(this);
  var n = TO_UINT32(array.length);
  var m = %_ArgumentsLength();

  for (var i = 0; i < m; i++) {
    array[i+n] = %_Arguments(i);
  }

  var new_length = n + m;
  array.length = new_length;
  return new_length;
}

另外还有一些规范性的说明：

push 方法把值添加到数组中。
push 方法有意具备通用性。该方法和 call() 或 apply() 一块儿使用时，可应用在相似数组的对象上。push 方法根据 length 属性来决定从哪里开始插入给定的值。若是 length 不能被转成一个数值，则插入的元素索引为 0，包括 length 不存在时。当 length 不存在时，将会建立它。
惟一的原生类数组（array-like）对象是 Strings，尽管如此，它们并不适用该方法，由于字符串是不可改变的。
当调用该方法时，新的 length 属性值将被返回。

因此说，push会根据对象length属性的值去肯定插入的位置，即this[i+n] = %_Arguments(i)。
因此在原题中obj.length值为2，调用obj.push("c")时，会发生obj[2]="c"的状况，因此最后 obj[2]就变成了'c'，而不是原来的'b'。
固然了，push方法最后会根据传入的参数个数多少，即arguments.length来返回new_length，并赋值给obj.length。

ECMAScript 5
里面详细介绍了 push 方法调用时候的步骤。能够研究一下。

第七题

输入你的github、技术博客或微博的网址：

这道题目告诉咱们，须要有一个技术博客。

第八题

不借助第三方库，请编码完成:给一个超连接元素绑定一个鼠标单击的事件。要求单击该元素后，提示用户“用户名不能为空”。注意：请尽量兼容给多的浏览器

考察原生 js 事件绑定，在JavaScript高级程序设计那本书的事件章节有详细讲述。不过话说有空去看看 jQuery 那货是怎么作的确定大有帮助。

html<a id= "hyper" href="#">我是一个超连接</a>

javascriptvar a = document.getElementById("hyper"),
    handler =function(e){
        alert("用户名不能为空");
    }
if (window.addEventListener){
    a.addEventListener("click",handler,false);
}
else if(window.attachEvent){
    a.attachEvent("onclick",handler);
}
else{
    a["onclick"]=handler;
}

第九题

请使用至少两种方案实现左中右三栏布局，左栏固定宽度 100px，右栏固定宽度 100px，中栏宽度不固定，三栏宽度加起来正好是 100%。

考察 CSS 布局。

第十题

使用 HTML、CSS 代码实现一个九宫格的页面布局。要求内边框宽度为 1px，无外边框。

话说“九宫格”是神马。。我只能想到是火锅= =

第十一题

请你使用多种方式实现一个 IOS 样式的开关

就想到了切图和CSS3的方式

第十二题

用 JS 来实现一个函数，用来判断一个字符串中出现次数最多的字符，并统计出这个次数

codewar 里头全是这种相似的题，惋惜当时作的时候时间太急，写错了个地方TAT。代码略丑，还望各位赐教。

javascript
function judge(str){
    var arr = str.toLowerCase().split("");
    arr.sort();
    var pre = "";
    var max = 1;
    var num = 1;
    var most = "";
    arr.forEach(function(item,index,arr){
        if (index === 0){
            pre = item;
        }
        else{
            if (item === pre){
                num++;
                if (max<=num){
                    max = num;
                    most = item;
                }
            }
            else{
                num = 1;
            }
            pre = item;
        }
    });
    console.log("最多的字符为:" + most +";次数为：" + max);
}

//judge("addqbcabceddqeeffjjjqqqq");

第十三题

给定一个http接口，传入一个员工id，返回员工的详细信息，接口形式为 http://localhost/query?id=。要求在前端实现一个根据一批员工id，经过 ajax 查询员工信息的功能。

实际上是考察 ajax 的内容。昨天才看的 ajax，sigh。

HTML:

html<input id = "btn" type="button" value="get data from server" />
<div id = "data">Here is the data</div>

客户端JS:

javascript
var btn = document.getElementById('btn');
btn.onclick = function(){
    var idList=[1,2,3,4,5,6,7,8,9,10],
        ul = document.createElement("ul");
    idList.forEach(function(index,item,array){
        if (XMLHttpRequest){//IE7 以前会不存在的
            var xhr = new XMLHttpRequest(),
                url = "http://localhost:3030/query?id=" + item;
            xhr.open("get", url, true);
            xhr.onreadystatechange = function(){
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                    if (xhr.readyState == 4 ){
                        ul.innerHTML += '<li>' + item + ":" + xhr.responseText +'</li>';
                    }
                }
                else{
                    console.log("error");
                    console.log(xhr.status);
                }
            };
            xhr.send(null);
        }
    });
    document.getElementById("data").appendChild(ul);
}

简单用 Nodejs 和 Express 模块写了个服务器，轻拍，只是作测试用的

javascriptvar express = require('express');
var app = express();

app.get('/query',function(req,res){
  var url = req.url;
  var id = url.substring(url.indexOf('=')+1);
  res.send(id);
});
app.use(express.static(__dirname));
app.listen(3030);