2015阿里巴巴前端实习生在线笔试题

时间 2019-11-09

原文原文链接

　　参加阿里巴巴前端实习生在线比试是15年三月底的事情，作的时候偷偷截图了，如今有时间了拿出来分享给你们，而且附上本身的思路，若是有错误欢迎你们指出！javascript

　　1.考虑如下程序输出的结果：html

　　　　 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。
java

　　2.请选择结果为真的表达式：git

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

　　null是JavaScript基本类型Null的惟一值，它并不是以Object为原型建立出来的，因此null insranceof Object返回的是false，可是须要注意typeof null返回的是“object”。
github

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中对相等操做有如下说明：
segmentfault

　　这里有上面规则的中文翻译：详解一下 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进入了博客园精华区，很意外。我我的水平真的通常，只是乐于把本身的知识和体会分享给你们。假如发现文中不妥，请您务必评论指正，很是感谢！若是你对于文中观点持不一样意见，咱们能够在评论区多多交流，让更多的人感觉到知识的魅力。

　　（完）