2021年阿里巴巴前端工程師面試題

第1題：

 問答題

請列舉7種以上常用的HTML標簽，說明其語義。

 1.div標簽，是一個塊元素，就像一個大盒子，可以放各式各樣的東西，如：圖片....

2.p標簽，也是一個塊元素，它通常是用來放一段話的....

3. h1,h2....h6標簽，也是一個塊元素，常用來放標題

4.span標簽，是一個行內元素，常用來處理一段話中的某幾個字符

5.img標簽，用來加載圖片的標簽

6.table標簽，用來創建表格的標簽

7.br標簽，用來換行的標簽

8.hr標簽，用來畫線的標簽

9.a一個點擊跳轉的超鏈接標簽

10.ul一個用來做列表的標簽

第2題：

 請說明下面各種情況的執行結果，并注明產生對應結果的理由。

 

function doSomething() {

    alert(this);

}

 

① element.onclick = doSomething，點擊element元素后。

② element.onclick = function() {doSomething()}， 點擊element元素后。

③ 直接執行doSomething()。

 解析：

①彈出element object，通過函數賦值方式，this直接指向element對象

②彈出window  object，this是寫在doSomething這個函數里面的，而這種方式的事件綁定寫法并沒有將element對象傳遞給this，而在默認情況下this指向window

③彈出window object，沒有綁定對象的情況下this默認指向window

第3題：

 請用JavaScript語言實現 sort 排序函數，要求：sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100]。

如果你有多種解法，請闡述各種解法的思路及優缺點。（僅需用代碼實現一種解法，其它解法用文字闡述思路即可）

 

function sort(arr){

 for(var i=0;i<arr.length-1;i++){

 for(var j=0;j<arr.length-i-1;j++){

 if(arr[j]>arr[j+1]){

 var hand=arr[j];

 arr[j]=arr[j+1];

 arr[j+1]=hand;

 }

 }

 }

 return arr;

}

   

第4題：

 請根據下面的HTML和CSS代碼，畫出布局示意圖

<div id="page">

    <div class="main">

        <div class="sub"></div>

    </div>

    <div class="nav"></div>

</div>

<style type="text/css">

    #page { width: 520px; }

    .nav  { width: 200px; float: right; }

    .main { width: 200px; float: left; padding-left: 110px; }    

    .sub  { width: 100px; float: left; margin: 10px 0 10px -100px; }    

    .main { border: 1px solid #000; }

    .nav, .sub { border: 1px dashed #000; height: 300px; }    

    .sub { height: 280px; }

</style>

第5題：

 閱讀以下JavaScript代碼：

if (window.addEventListener) {

       var addListener = function(el, type, listener, useCapture) {

           el.addEventListener(type, listener, useCapture);

       };

   } else if (document.all) {

       addListener = function(el, type, listener) {

           el.attachEvent("on" + type, function() {

               listener.apply(el);

           });

       };

   }

   

請闡述 a) 代碼的功能; b) 代碼的優點和缺點; c) listener.apply(el) 在此處的作用; d) 如果有可改進之處，請給出改進后的代碼，并說明理由。

 a) 功能：事件注冊

b) 優點：跨瀏覽器，特性探測，性能優化。缺點：document.all

c) 作用：使得IE中listener的this 為 el，與其它瀏覽器一致

d) 改進：document.all改成window.attachEvent; useCapture的默認

 

第6題：

          請編寫一個JavaScript 函數toRGB，它的作用是轉換CSS中常用的顏色編碼。 要求：

 

alert(toRGB("#0000FF"));          // 輸出 rgb(0, 0, 255)

alert(toRGB("invalid"));          // 輸出 invalid

alert(toRGB("#G00"));              // 輸出 #G00

   

 

function toRGB(color) {

    var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/

    match = color.match(regex)

    return match ? 'rgb('+parseInt(match[1], 16)+','+parseInt(match[2], 16)+','+parseInt(match[3], 16)+')' : color

}

第7題：

 嘗試實現注釋部分的Javascript代碼，可在其他任何地方添加更多代碼（如不能實現，說明一下不能實現的原因）：

var Obj = function(msg){

    this.msg = msg;

    this.shout = function(){

        alert(this.msg);

    }  

    this.waitAndShout = function(){

        //隔五秒鐘后執行上面的shout方法

    }

}

 var Obj = function(msg){
    this.msg = msg;
    this.shout = function(){
        alert(this.msg);
    }    
    this.waitAndShout = function(){
        var that = this;
        setTimeout(that.shout, 5000);
        //隔五秒鐘后執行上面的shout方法
    }
    return this;
}
Obj("shouting").waitAndShout();

第8題：

 請編寫一個JavaScript函數，它的作用是校驗輸入的字符串是否是一個有效的電子郵件地址。要求： a)   使用正則表達式。 b)   如果有效返回true ，反之為false。

 

var checkEmail  = function(email){

var preg = 

        "(^[a-zA-Z]|^[\\w-_\\.]*[a-zA-Z0-9])@(\\w+\\.)+\\w+$"，,

    pregObj  =new RegExp(preg);

    return pregObj.test(email);

}

第9題：

 請分別列出HTML、JavaScript、CSS、Java、php、python的注釋代碼形式。

 <!-- HTML 注釋 -->

// JavaScript 注釋

/*

 *   JavaScript 多行注釋

 */

/* CSS 注釋 */

// Java 注釋

/**

 * Java 多行注釋

 */

// php 單行注釋

# php 單行注釋

/**

 * php多行注釋

 */

# Python 單行注釋

''' 

Python 多行注釋

'''

第10題：

 根據下圖，編寫HTML結構。要求：遵循xHTML 1.0規范且符合Web語義。
 

 

<div class="item">

    <div class="item-pic">

        <a href="path/to/item">

            <img src="path/to/img" alt="商品圖片" />

        </a>

    </div>

    <div class="item-desc">

        <a href="path/to/item/">聯想IdeaPad U130紅色至尊 高性價比</a>

    </div>

    <div class="item-price">

        <em>￥8888.00</em>

    </div>

</div>

第11題：

 請編寫一段JavaScript腳本生成下面這段DOM結構。要求：使用標準的DOM方法或屬性。

  

<div id=”example”>  

    <p class=”slogan”>淘！你喜歡</p>

</div>

   

  window.onload = function() {
            var div =  document.createElement('div');
            div.id =  "example";
            var p =  document.createElement('p');
            p.className =  "slogan";
            p.innerHTML = '淘！你喜歡';
             div.appendChild(p);
             document.body.appendChild(div);
        }

第12題：

 請用CSS定義p標簽，要求實現以下效果: 字體顏色在IE6下為黑色(#000000)；IE7下為紅色(#ff0000)；而其他瀏覽器下為綠色(#00ff00)。

 p{

    color:#0f0;

    _color:#000; /*ie6*/   

}

/*ie7*/

*+html p{

    color:#f00;

}

第13題：

 請簡化以下的CSS代碼，并給出簡單的說明。

div.container {

    width: 500px;

    background-image: url(/img/sprite.png);

        background-repeat: no-repeat;

        background-position: 0px -78px;

}

div.container ul#news-list, div.container ul#news-list li {

    margin: 0px;

    padding: 0px;

}

div.container ul#news-list li {

    padding-left: 20px;

    background-image: url(/img/sprite.png);

        background-repeat: no-repeat;

        background-position: -120px 0px;

}

A {

    font-size: 14px;

        font-weight：bold；

    line-height: 150%;

    color: #000000;

}

 

div.container {

    width: 500px;

    background: url(/img/sprite.png) no-repeat 0 -78px;

}

#news-list, #news-list li {

    margin: 0

    padding: 0;

}

#news-list li {

    padding-left: 20px;

    background: url(/img/sprite.png) no-repeat -120px 0;

}

A {

    font: bold 14px/150%;

    color: #000;

}

<p class="MsoNormal">

    如果div.container和#news-list li背景圖合并，使用

 

 

 

<p class="MsoNormal">

    div.container,#news-list

li{ background: url(/img/sprite.png)};

 

 

 

<p class="MsoNormal">

    也正確。

 

 

</p>

第14題：

 請編寫一個通用的事件注冊函數（請看下面的代碼）。

function addEvent(element, type, handler)

{

    // 在此輸入你的代碼，實現預定功能

}

 

function addEvent(element, type, handler)

{

    // 在此輸入你的代碼，實現預定功能

 

    if (element.addEventListener)

    {

        element.addEventListener(type, handler, false);

    }

    else if (element.attachEvent)     //for IE

    {

        element.attachEvnet(“on” + type, handler);

    }

    else

    {

        element[“on” + type] = handler;

    }

}

第15題：

 下面是個輸入框
當沒有獲取焦點時，顯示灰色的提示信息：  
當用戶輸入時，隱藏提示文字，且恢復為默認色：  
當輸入框失去焦點，如果輸入為空，需還原提示信息：  
要求： a) 寫出HTML和CSS代碼 b) 用JavaScript實現功能

 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> #content{ color:grey; }</style> <body> <input type="text" id="content" value="請輸入內容"></body><script> var input = document.getElementById("content"); input.onfocus = function(){ if(this.value == "請輸入內容"){ this.value = ""; this.style.color = "black"; } } input.onblur = function(){ if(this.value == ""){ this.style.color = "grey";  this.value = "請輸入內容"; } }</script></html>

第16題：

 請給JavaScript的String 原生對象添加一個名為trim 的原型方法，用于截取空白字符。要求

 

alert(" taobao".trim());     // 輸出 "taobao"

alert(" taobao ".trim());    // 輸出 "taobao"

   

 

String.prototype.trim = function() {          

    return this.replace(/^\s+|\s+$/g, "");     

};

第17題：

 請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象，如：

 

var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....”

var obj = parseQueryString(url);

alert(obj.key0)  // 輸出0

   

 

function parseQueryString ( name ){

  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

  var regexS = "[\\?&]"+name+"=([^&#]*)";

  var regex = new RegExp( regexS );

  var results = regex.exec( window.location.href );

  if( results == null )

    return "";

  else

    return results[1];

}

第18題：

請指出下面代碼中不符合xHTML 1.0規范的地方，說明理由，并寫出改善后的代碼：

  

<h1><p>小明的表白</p></h1>

<dl>

        <dt><p><div>小明說：</div></p></dt>

        <dd>”淘寶網，<i>天天上</i>?！?lt;/dd>

        <dd><b>”淘我喜歡！” </b></dd>

</dl>

   

 不合理的地方： 1、 h1元素包含p元素，理由：h1元素內不能包含其他塊級元素； 
2、 dt元素包含p元素和div元素，理由：dt元素內不能包含其他塊級元素； 
3、 p元素包含div元素，理由：p元素內不能包含其他塊級元素； 
4、 i元素，理由：i表樣式斜體，不符合語義化。 
5、 b元素，理由：b表樣式粗體，不符合語義化。 

第19題：

 請把以下用于連接字符串的JavaScript代碼修改為更有效率的方式

  

var htmlString =

    "<div class=”container”>" + "<ul id=”news-list”>";

for (var i = 0; i < NEWS.length; i++) {

    htmlString += "<li><a href=”"

        + NEWS[i].LINK + ">"

        + NEWS[i].TITLE + "</a></li>";

}

htmlString += "</ul></div>";

   

 

var htmlString  =  "<div class=”container”>"   +   "<ul id=”news-list”>";

for  (var i  =  0;  i  <  NEWS.length;  i++) 

{

    var newsItem = NEWS[i];

    htmlString  +=  "<li><a href=”"  + newsItem.LINK  + ">"  

        + newsItem.TITLE  + "</a></li>";

}

htmlString  +=  "</ul></div>";

第20題：

 請給Array本地對象增加一個原型方法，它用于刪除數組條目中重復的條目(可能有多個)，返回值是一個包含被刪除的重復條目的新數組。

 

Array.prototype.distinct = function() {

    var ret = [];

    for (var i = 0; i < this.length; i++)

    {

        for (var j = i+1; j < this.length;) {   

            if (this[i] === this[j]) {

                ret.push(this.splice(j, 1)[0]);

            } else {

                j++;

            }

        }

     }

     return ret;

}

//for test

alert(['a','b','c','d','b','a','e'].distinct());

第21題：

 請根據下面的描述，用JSON語法編寫一個對象: “小明今年22歲，來自杭州。興趣是看電影和旅游。他有兩個姐姐，一個叫小芬，今年25歲，職業是護士。還有一個叫小芳，今年23歲，是一名小學老師?！?
var person = ?

 

var person = {"name":"小明","age":"22","form":"杭州","interest":["電影","旅游"],"sister":

[{"name":"小芬","age":"25","job":"護士"},{"name":"小芳","age":"23","job":"小學老

師"}]};

第22題：

 請改善以下HTML代碼，使其符合xHTML 1.0規范

 

<A id='go-home'    

    onClick='doSomething();'>  

    <IMG src="http://www.taobao.com/logo.png">  

</A>

   

 

<a id='go-home'   

    onclick='doSomething();'>  

    <img src="http://www.taobao.com/logo.png" />  

</a>