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

头像
Lemures
    阅读 6 分钟
    4

    前言

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

    题目来了

    第一题

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

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

    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);
    前端笔试javascriptcss
    Lemures
    1.7k 声望23 粉丝

    伪工科男。努力学前端中。

    « 上一篇
    Block Formatting Context (Flow Root)
    下一篇 »
    Javascript的异步和回调

    引用和评论

    推荐阅读
    头像
    Javascript的异步和回调

    Lemures赞 13阅读 15.5k评论 7

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.5k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    0 条评论
    得票最新