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


前言

上周二在阿里暑期实习的前端笔试那里打了个酱油。题目说实话都很基础,但如果之前没有专门写过类似的东西,现想现写的话,一个小时压力还是有些大的(当然了,大神除外)。
下面把题目分享给大家,欢迎大家一起探讨交流,共同进步。
我做了一些,后面的大题肯定有没写完的。稍晚些贴上来吧。

题目来了

第一题

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


不知道 AMD 是神马(我的第一反应怎么是做 CPU 和显卡的那个),当时也没仔细谷歌。。看着顺眼随便选了个 【C】
后来找了找,…

第二题

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


应该是D吧。。

第三题

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); 

选项没截图下来,应该分别输出
1、2、bbb、bb;
考察点应该是setTimeout()的作用域是全局对象,在浏览器中,即为 window

第四题

下面的说法哪些是正确的:

【A】将打印出 true.

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

【B】将打印出 No

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】obj12 的值不会发生变化;
【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 样式的开关
阿里巴巴 2015 暑期实习前端笔试题


就想到了切图和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); 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>