资讯专栏INFORMATION COLUMN

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

zhangxiangliang / 666人阅读

摘要:前言上周二在阿里暑期实习的前端笔试那里打了个酱油。当不存在时,将会创建它。要求单击该元素后,提示用户用户名不能为空。要求内边框宽度为,无外边框。要求在前端实现一个根据一批员工,通过查询员工信息的功能。其实是考察的内容。

前言

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

题目来了 第一题
  

下列符合规范的 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】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;
}

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

MDN

  

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我是一个超链接
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
Here is the data

客户端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 += "
  • " + item + ":" + xhr.responseText +"
  • "; } } 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);
    

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/111037.html

    相关文章

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

      摘要:前言上周二在阿里暑期实习的前端笔试那里打了个酱油。当不存在时,将会创建它。要求单击该元素后,提示用户用户名不能为空。要求内边框宽度为,无外边框。要求在前端实现一个根据一批员工,通过查询员工信息的功能。其实是考察的内容。 前言 上周二在阿里暑期实习的前端笔试那里打了个酱油。题目说实话都很基础,但如果之前没有专门写过类似的东西,现想现写的话,一个小时压力还是有些大的(当然了,大神除外)。...

      aboutU 评论0 收藏0
    • 2017暑期实习面试总结(前端方向)

      摘要:的暑期实习面试到现在差不多都结束了,算下来自己也投了十几家简历,经历的差不多十场笔试,现场和电话面试也差不多有五六家公司。阿里三面三面不知道是不是交叉面,不过这次面试面试官说他是北京的之前都是杭州。 2017的暑期实习面试到现在差不多都结束了,算下来自己也投了十几家简历,经历的差不多十场笔试,现场和电话面试也差不多有五六家公司。虽然最后只拿到两个offer,所幸是自己期待的公司,下面从...

      worldligang 评论0 收藏0
    • 俩年的这五十篇技术博客,送给不忘初心的你。

      摘要:年开始的前三个学期有篇的产出。从技术角度来看,编程节奏加紧。十年文学,我等你。写给即将二十岁的你此你非彼你,写给一直伴我的你。巧合遇到你后的这段光阴,无比的充实与激情饱满。编程技术独立的挑战鼓励你。希望足以承担我爱你。 showImg(https://segmentfault.com/img/remote/1460000011417994); 这俩年通过体验博客园、常驻简书、甚至搭建静...

      tuantuan 评论0 收藏0
    • 前端开发-从入门到Offer - 收藏集 - 掘金

      摘要:一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。 工欲善其事必先利其器-前端实习简历篇 - 掘金 有幸认识很多在大厂工作的学长,在春招正式开始前为我提供很多内部推荐的机会,非常感谢他们对我的帮助。现在就要去北京了,对第一份正式的实习工作也充满期待,也希望把自己遇到的一些问题和...

      sf_wangchong 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <