阿里2014实习生笔试题

前言

最近过了一遍犀牛书，但是感觉自己好像没什么记得住的，于是决定刷刷各公司的面试题，希望可以有些方向。

试题

1请在触摸屏下实现一个按钮，当按快速触碰按钮并放开手时，立刻弹出“成功”二字的提示框。

这题首先想到的是touch功能，页面上实现了一把

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 5 <meta name="apple-mobile-web-app-capable" content="yes">
 6 <title>Document</title>
 7 </head>
 8 <body>
 9     <span id="button">点击这里</span>
10 <script>
11     
12     var obj = document.getElementById('button');
13     
14     obj.addEventListener('touchend',function (e) {
15        alert('ok');18     });
19     
20 </script>
21 </body>
22 </html>

但是总觉得有点问题，觉得它不仅仅考这些。正巧，读到了叶小钗的博客。有如下的方法

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 5 <meta name="apple-mobile-web-app-capable" content="yes">
 6 <title>Document</title>
 7 </head>
 8 <body>
 9     <span id="button">点击这里</span>
10 <script>
11     var el = null;
12     var obj = document.getElementById('button');
13     function getEvent(el,e,type){
14         e = e.changedTouches[0];
15         var event = document.createEvent('MouseEvents');
16         event.initMouseEvent(type,true,true,window,1,e.screenX,e.screenY,false,false,false,false,0,null);
17         event.forwardedToucheEvent = true;
18         return event;
19     }
20     
21     obj.addEventListener('touchstart',function (e) {
22         var firstTouch = e.touches[0];
23         el = firstTouch.target;
24         tl = e.timeStamp;
25     });
26     obj.addEventListener('touchend',function (e) {
27         e.preventDefault();
28         var event = getEvent(el,e,'click');
29         el.dispatchEvent(event);
30     });
31     obj.addEventListener('click',function(e){
32         obj.style.display ='none';
33         setTimeout(function(){
34             obj.style.display = '';
35         },1000);
36     })
37 </script>
38 </body>
39 </html>

解决了在处理移动端快速点击的问题。

请封装一个名叫Counter的计数器Class，只有两个公有成员：

a) 完成计数动作

b) 输出计数总数

这道题不多说，直接上代码

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 5 <meta name="apple-mobile-web-app-capable" content="yes">
 6 <title>Document</title>
 7 </head>
 8 <body>
 9     <button id="button1">点击这里1</button>
10     <button id="button2">点击这里2</button>
11     <span id="sum"></span>
12 <script>
13 var obj1 = document.getElementById('button1');
14 var obj2 = document.getElementById('button2');
15 var sum = document.getElementById('sum');
16 function Counter () {
17     this.sum = 0;
18 }
19 Counter.prototype.add=function(){
20     this.sum++;
21 }
22 Counter.prototype.output=function(){
23     return this.sum;
24 }
25 
26 var c = new Counter();
27 obj1.addEventListener('click', function(){
28     c.add();
29     sum.innerHTML = c.output();
30 });
31 obj2.addEventListener('click', function(){
32     c.add();
33     sum.innerHTML = c.output();
34 });
35 
36 </script>
37 </body>
38 </html>

使用原生JavaScript给下面列表中的结点绑定点击事件，点击时创建一个Object对象，兼容IE和标准浏览器。

HTML:

</ul>

Object:

{

“index” : 1, // 序号

“name” : “品牌团”,

“link” :“http://ju.taobao.com/tg/brand.htm”

}

这题其实就考了闭包的知识点

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 5 <meta name="apple-mobile-web-app-capable" content="yes">
 6 <title>Document</title>
 7 </head>
 8 <body>
 9 
10 
11 <p>使用原生JavaScript给下面列表中的结点绑定点击事件，点击时创建一个Object对象，兼容IE和标准浏览器</p>
12 
13 <ul id = "nav">
14     <li><a href="http://ju.taobao.com/tg/brand.html">品牌团</a></li>
15     <li><a href="http://ju.taobao.com/tg/point_list.html">整点聚</a></li>
16     <li><a href="http://ju.taobao.com/jusp/jiazhuang/tp.html">聚家装</a></li>
17     <li><a href="http://ju.taobao.com/jusp/liangfan/tp.html">量贩团</a></li>
18 </ul>
19 <script>
20 var li_class = document.getElementById('nav').getElementsByTagName('li');
21 
22 for (var i = li_class.length - 1; i >= 0; i--) {
23     (function(i){
24         li_class[i].addEventListener('click',function(e){
25             console.log({index:i,name:li_class[i].firstElementChild.innerHTML,link:li_class[i].firstElementChild.href});
26             e.preventDefault();
27         });
28     })(i)
29 };
30 
31 </script>
32 </body>
33 </html>

有一个int型数组，里面有若干数字。要求统计出一共有多少种不同的数字？每种数字出现的频率从少到多排列，频率相同则从小到大排列。

这道题目最开始想到的是类似php中的关联数组，于是我谢了个｛｝作为数组存放｛key:count｝,但是，js可能自动优化了，排序自动是根据key从小到大排的，查了下一个叫php.js的方法，也没有好的解决方法。后来用个二维数组解决了，但是总觉得有点效率低，代码如下

 1 var arr = [1, 3, 2, 4, 2, 4, 9, 7, 2];
 2 //arr.sort();
 3 var obj = [];
 4 arr.forEach(function(i, index) {
 5     //console.log(i);
 6     var count = 0;
 7     for (var j = index, len = arr.length; j < len; j++) {
 8         if (arr[index] == arr[j]) {
 9             count++;
10         }
11     }
12 
13     obj.push([i, count])
14 
15 });
16 obj.sort(function(a,b){
17     if(a[1] == b[1]){
18         return a[0]-b[0];
19     }else{
20         return a[1]-b[1];
21     }
22 })