阿里巴巴 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);