2015阿里巴巴前端實習生在線筆試題

　　參加阿里巴巴前端實習生在線比試是15年三月底的事情，作的時候偷偷截圖了，如今有時間了拿出來分享給你們，而且附上本身的思路，若是有錯誤歡迎你們指出！

　　1.考慮如下程序輸出的結果：

　　　　 var x='a';
        function printX(){
            console.log(x);
            var x='b';
            console.log(x);
        }
        printX();
        var y='c';
        function printY(){
            console.log(y);
            y='d';
            console.log(y);
        }
        printY();

　　A a b c d　　B b b d d　　C undefined b undefined d　　D undefined b c d

　　在printX函數中，因爲再次聲明瞭var x='b'，x爲函數內的局部變量，因爲聲明提高，第一次打印時x的值爲undefined。

---

　　2.請選擇結果爲真的表達式：

　　A null instanceof Object　　B null==undefined　　C NaN==NaN　　D false==undefined

　　null是JavaScript基本類型Null的惟一值，它並不是以Object爲原型建立出來的，因此null insranceof Object返回的是false，可是須要注意typeof null返回的是「object」。

Table — typeof Operator Results

Type of val	Result
Undefined	"undefined"
Null	"object"
Boolean	"boolean"
Number	"number"
String	"string"
Object (native and does not implement [[Call]])	"object"
Object (native or host and does implement [[Call]])	"function"
Object (host and does not implement [[Call]])	Implementation-defined except may not be "undefined", "boolean", "number", or "string".

　　上表摘自ECMAScript-5規範，The typeof Operator。

　　ESMAScript中對相等操做有如下說明：

　　這裏有上面規則的中文翻譯：詳解一下 javascript 中的比較。

　　對於選項B，直接跳入第2步返回true；對於選項C，因爲typeof NaN返回「number」，依次進入 1-c-i 返回false；對於選項D，首先進入第6步，返回「0==undefined」，而後進入第10步，返回false。雖然Boolean(false)和Boolean(undefined)都爲false，可是他們二者並不相等。

---

 　　3.下面代碼的執行結果是哪一個？

　　　　 function foo(a){
            var a;
            return a;
        }
        function bar(a){
            var a = 'bye';
            return a;
        }
        [foo('hello'),bar('hello')]

　　A ["hello","hello"]　　B ["hello","bye"]　　C ["bye","bye"]　　D 都不是

　　在JavaScript的函數中，參數是由數組形勢傳遞的，但也能夠顯式地使用命名參數，命名參數能夠理解成此函數運行時的局部變量，變量的值爲傳遞來的值，若是未傳遞，則值爲undefined。

　　根據變量聲明提高的規則，題目中的foo("hello")和bar("hello")能夠理解爲：

　　　　function foo(){
　　　　　　var a;
　　　　　　var a;//僅聲明，未賦值。不影響原值。
　　　　　　a = "hello";
　　　　　　return a;   
　　　　}
　　　　function bar (){
　　　　　　var a;
　　　　　　var a;//聲明提高
　　　　　　a = "hello";
　　　　　　a = "bye";//新值將原值覆蓋。
　　　　　　return a;
　　　　}

　　這也是爲何在JavaScript中沒有函數重載的緣由：

　　　　function a(){return 1;}
　　　　function a(){return 2;}
　　　　//等價於
　　　　var a = function(){return 1;}
　　　　var a = function(){return 2;}
　　　　//變量聲明提高
　　　　var a;var a;
　　　　a = function(){return 1;}
　　　　a = function(){return 2;}//新值將原值覆蓋

　　　　=>> a();// 2

---

　　4.下面哪些是ES6的新特性？

　　A var[a,b]=[1,2];     　　B const a={};　　

　　C var a='foo${a}bar';　　D [1,2,3].map(function(item){return item<3;});

　　阮一峯博士對ES6有深入的認識，他的著做《ECMAScript6入門》是一本開源的JavaScript語言教程，全面介紹ECMAScript 6新引入的語法特性。網址：ECMAScript6入門。

---

　　5.下面哪些是HTML5新標籤？

　　A audio　　B address　　C optgroup　　D progress

　　W3Shool HTML參考手冊——標籤列表（功能排序）。

---

　　6.一般HTML標籤都須要特別的書寫來閉合，例如<a>標籤的閉合就是</a>，那麼下列哪些標籤不須要相似的閉合？

　　A <br>　　B <hr>　　C <command>　　D <meta>

　　咱們根據已有的編程經驗能夠選出正確的答案，可是如今咱們要考慮這樣一個問題：爲何有的標籤有閉合，而有的沒有？

　　簡單來講就是無內容元素（Void Elements）不須要閉合，比較常見的無內容元素有：<br> <hr> <img> <input> <link> <meta>，不太常見的無內容元素有：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>。

　　伯樂在線上的這篇譯文《HTML標籤，閉合仍是不閉合？》 對此有更深刻的探討。

---

　　7.你的博客或GitHub地址？（略）

　　8.使用HTML+CSS實現如下圖形（不能用圖片）

　　如上圖，作題的時候我一直覺得最右側的插入圖片是個功能按鈕，出題人真的好奸詐啊！後來我才發現，題目就是讓實現這樣一個圖標，多麼痛的領悟！

　　我在上篇博客CSS十問——好奇心+刨根問底=CSSer提到過使用CSS繪製圖標，我試着用一個標籤還原這個圖標，不過結果差強人意。感興趣的能夠看此DEMO：圖片圖標。若是你有更好的思路，不妨留言咱們一塊兒討論。

---

　　9.經過代碼或僞代碼實現以下要求：

　　已知x="3.1415926..."（圓周率前10萬位），查詢你手機號碼後4位在「x」字符串中所在的位置。儘量提高查詢效率，能夠優化原始數據的數據結構，讓重複查詢效率提升。

　　　　//遞歸調用原生JS方法進行查找
　　　　var str="3.1415926...",result=[];
        function getAllIndex(test,from){
            var index=str.indexOf(test,from);
            if(index!=-1){
                result.push(index);
                from=index+1;
                getAllIndex(test,from);
            }
        }
        getAllIndex("9823",0);
        console.info(result);

　　PI是一個無限不循環小數，那麼它的原始結構並無任何規律可言。當咱們須要屢次檢索這個10萬位的字符串時，必需要對其數據結構進行優化。最經常使用的優化就是排序，這樣在查找時就可使用更加高效的方法。每一個人都會有不少想法，我也有一個並不周到的設想：

        //排序
        PI="1415926……"//共10萬項
        =>>每4項生成一個鍵值對，分別爲4位數數字和起始索引。//{1415:1},{4159:2},{1592:3}……共99997項
        =>>根據大小對4位數數字進行排序 造成有序列表orderList// ……{1415,1}……{1592:3}……{4159:2}……共99997項

        //查找
        假如要查找的字符串爲"9823"
        =>>轉爲整型9823
        =>>使用折半查找等方法查找orderList。
        =>>查出N個知足條件項 {9823:?}……
        =>>從這些鍵值對中獲得索引位置

---

　　10.請先閱讀以下代碼：

　　　　 function fn(input){
            input=parseInt(input,10);
            return isPrime(input)?"is prime":"not prime";
        }

　　請實現上面代碼中調用的isPrime這個函數，判斷傳入參數是否爲質數（也叫素數）。

　　　　　function isPrime(num){if(num <= 3) return num > 1;//特殊值處理
            if(num > 3){
                for(var i = 2,j = Math.sqrt(num);i <= j;i++){//減小循環次數
                    if(num % i === 0) return false;
                }
                return true;
            }
            return false;
        }

---

 　　11.背景：

　　a.對象A直接調用對象B的某個方法，實現交互邏輯。可是致使的問題是A和B緊密耦合，修改B可能致使A調用B的方法失效。

　　b.爲了解決耦合致使的問題，咱們能夠設計成：

　　對象A生成消息->將消息通知給一個事件消息處理器（Observable）->消息處理器將消息傳遞給B

　　具體調用過程變成：A.emit('message',data); B.on('message',function(data){});

　　請實現這一事件消息代理功能

　　//請將事件消息功能補充完整

　　function EventEmitter(){　　...　　}

　　在設計模式中，這是一個典型的觀察者模式。這道題對我來講有點抽象，我也不在各位面前班門弄斧了，湯姆大叔對觀察者模式有精彩的講解，你們能夠圍觀一下：深刻理解JavaScript系列（32）：設計模式之觀察者模式。

---

　　12.請完成如下三個cookie操做，分別爲設置、獲取和刪除cookie。

　　$.cookie.set('name','你的名字');

　　$.cookie.get('name');

　　$.cookie.del('name');

　　　　　(function(globle){
            function getCookie(key){//獲得一個cookie
                var cookies=document.cookie,len=cookies.length;
                if (len > 0) {
                    var c_start = cookies.indexOf(key + "=");
                    if (c_start != -1) {
                        c_start = c_start + key.length + 1;
                        var c_end = cookies.indexOf(";", c_start);
                        if (c_end == -1)
                            c_end = len;
                        return cookies.substring(c_start, c_end);
                    }
                }
                return null;
            }
            //設置一個cookie @days:保留期限，不設置則默認爲會話結束時刪除。
            function setCookie(key,value,days){
                var exdate = new Date();
                exdate.setDate(exdate.getDate() + days||0);
                document.cookie = key + "=" + value + (!Boolean(days) ? "" : ";expires=" + exdate.toGMTString());
            }
            function deleCookie(key){//刪除一個cookie
                setCookie(key,"",-1);
            }
            globle["$"]={
                cookie:{
                    get:getCookie,
                    set:setCookie,
                    del:deleCookie
                }
            }
        })(window);

---

　　13.

　　<style>
　　　　.a,.b,.c{position: relative;}
　　</style>
　　<div class="a">
　　　　A<div class="c">C</div>
　　</div>
　　<div class="b">B</div>

 　　請補全上面代碼中的CSS部分，讓三個圖層的層級爲C>B>A。

 　　在我以前一篇博客《使用CSS3的box-shadow實現雙透明遮罩層對話框》中，曾經探討過z-index。z-index是一個拼爹的屬性，要想知足C>B>A，那麼A不管如何都不能建立新的層疊上下文，由於C是A的子元素，一旦A有了層疊上下文，當B>A時，C的z-index不管設置多大也不可能再超過B了。請看Demo：z-index不可跨越的鴻溝。

　　不爲定位元素顯式指定z-index，則不會建立新的層疊上下文。下面這段代碼能夠知足題目要求：

　　　　.a,.b,.c{ position: relative;}
　　　　.b{z-index:1;}
　　　　.c{z-index:2;}

　　可是正如以前的博客中提到的，這種寫法在IE6-7下會產生bug——B會擁有最高的層級。一個簡單的修復方法是讓元素A恢復標準流。戳我查看Demo。

 總結

　　筆試一共13道題，不知道你們是否盡興了？若是意猶未盡，TimTsang在他的GitHub上向咱們分享了20道阿里巴巴的在線筆試題，我和他參加的應該是同一次筆試，其中會有幾個重複的題目。這裏是博客的地址：2015阿里巴巴前端實習生在線筆試題。

　　我當時答的不好，稀裏糊塗就進面試了，如今回過頭認認真真作一遍真的感受受益不淺。同時也但願這篇博客能對你們有所幫助。

　　PS：個人上一篇博客CSS十問——好奇心+刨根問底=CSSer進入了博客園精華區，很意外。我我的水平真的通常，只是樂於把本身的知識和體會分享給你們。假如發現文中不妥，請您務必評論指正，很是感謝！若是你對於文中觀點持不一樣意見，咱們能夠在評論區多多交流，讓更多的人感覺到知識的魅力。

　　（完）