前端笔试题及资料集锦（一）（持续更新....）

2014-09-11 13:54 大额_skylar 阅读(2094) 评论(12) 编辑收藏举报

我也是在学习中喔，如果大家有好的方法，或者我的解答中有不对的不合理的效率不好的地方，请大家踊跃留言一起学习喔~

1、（2014年春季阿里巴巴实习生笔试）题目：有一个大数组，var a = ['1','2','3',...];a数组的长度是100，内容填充随机整数的字符串，请先构造此数组a，然后设计一个算法，将其内容去重。

分析要点：随机生成数组，数组去重。

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset=utf-8>
 5     <title>demo</title>
 6 </head>
 7 <body>
 8   <span>题目：有一个大数组，var a = ['1','2','3',...];a数组的长度是100，内容填充随机整数的字符串，请先构造此数组a，然后设计一个算法，将其内容去重。（解答见控制台）</span>
 9       
10   
11  <script>
12    /*生成长度为100，内容为随机整数构成的字符串的函数*/
13    var newArr = function(){
14       var a = [];
15       var i = 0;
16       var num = [];
17       for(i=0;i<100;i++){
18         num[i] = Math.floor(Math.random()*100) + "";
19         a.push(num[i]);
20       }
21       return a;
22    }
23    var arr = newArr();
24    console.log('随机生成的长度为100的数组a[]为：')
25    console.log(arr);
26    /* 删除数组a中的重复元素，并返回已删除的元素*/
27     var singleNum = function(arr){
28        var result = [];
29        for(var i=0;i<arr.length;i++){
30          for(var j=i+1;j<arr.length;){
31             if(arr[j] == arr[i])
32             {
33               result.push(arr.splice(j,1));
34             }else{
35               j++;
36             }
37          }
38        }
39        return result;
40     }
41     singleNum(arr);
42     /*log出删除重复元素后的a数组，成功去重*/
43     console.log('去重后的数组a[]为：')
44     console.log(arr);
45  </script>   
46 </body>
47 </html>

谢谢大家的留言，鉴于上面的方法是最基本的最无趣的最没有新意的，必须改进哇..

改进版一：

分析：利用对象中的key唯一这个原理来对数组去重，（但是在某些数组元素比较复杂的情况下可能会有些问题喔，大家可以根据情况自行改进）。

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset=utf-8>
 5     <title>demo</title>
 6 </head>
 7 <body>
 8   <span>题目：有一个大数组，var a = ['1','2','3',...];a数组的长度是100，内容填充随机整数的字符串，请先构造此数组a，然后设计一个算法，将其内容去重。（解答见控制台）</span>
 9       
10   
11  <script>
12    /*生成长度为100，内容为随机整数构成的字符串的函数*/
13    var arr = [];
14    var num = [];
15    for(var i=0;i<100;i++){
16      num[i] = Math.floor(Math.random()*100) + "";
17      arr.push(num[i]);
18    }
19    console.log('随机生成的数组为：');
20    console.log(arr);
21    /*删除重复元素后的arr数组*/
22    function singleNum(arr){
23     var tmp,tmpObj = {};
24     for(var i=0;i<arr.length;i++){
25       tmp = arr[i];
26       if(typeof tmpObj[tmp] === 'undefined'){
27         tmpObj[tmp] = tmp;
28       }else{
29         arr.splice(i,1);
30         i--;
31       }
32     }
33     return arr;
34    }
35     singleNum(arr);
36     /*log出删除重复元素后的a数组，成功去重*/
37     console.log('去重后的数组arr[]为：');
38     console.log(arr);
39  </script>   
40 </body>
41 </html>

2、（2014年春季阿里巴巴实习生笔试）

题目：给定如下的一段字符串和javascript对象字面量，需要将字符串中所有使用花括号括起来的关键词，统一替换为对象字面量中对应的键值，请使用正则表达式实现字符串的模板替换操作。
字符串：<a href="{href}">{text}</a>
对象字面量：
{href:'//www.taobao.com/',text:'淘宝网'}

要求：
1.请给出用于配所有花括号关键词的正则表达式；
2.请尽可能考虑正则表达式的兼容性，匹配效率问题；
3.使用原生javascript语言，不依赖任何框架或类库。
正则表达式参考资料：<a href="http://blog.csdn.net/zaifendou/article/details/5746988">http://blog.csdn.net/zaifendou/article/details/5746988</a>

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset=utf-8>
 5     <title>demo</title>
 6 </head>
 7 <body>
 8 
 9   <span>题目：给定如下的一段字符串和javascript对象字面量，需要将字符串中所有使用花括号括起来的关键词，统一替换为对象字面量中对应的键值，请使用正则表达式实现字符串的模板替换操作。
10   <p>字符串：<textarea><a href="{href}">{text}</a></textarea></p>
11   <p>对象字面量：
12     <textarea>{href:'//www.taobao.com/',text:'淘宝网'}</textarea>
13   </p>
14   <p>要求：</p>
15   <p>1.请给出用于配所有花括号关键词的正则表达式；</p>
16   <p>2.请尽可能考虑正则表达式的兼容性，匹配效率问题；</p>
17   <p>3.使用原生javascript语言，不依赖任何框架或类库。</p>
18   <p>正则表达式参考资料：<a href="http://blog.csdn.net/zaifendou/article/details/5746988">http://blog.csdn.net/zaifendou/article/details/5746988</p>
19   </span>
20       
21   
22  <script>
23    var list = {
24     href:'//www.taobao.com/',
25     text:'淘宝网'
26    };
27    var str = '<a href="{href}">{text}</a>';
28    console.log(str.replace(/\{(\w+)}/g,function(i,id){return list[id];}));
29 
30     
31  </script>   
32 </body>
33 </html>

分析：replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的字符串。

stringObject.replace(regexp/substr,replacement);

题目这样出，不禁想到模板的问题，看很多大公司网站源码都有这样的用法，无非是为了与后端模板的复用。模板引擎就是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，可以大大提高开发效率，同时也使代码复用变得更加容易。

十分感谢@萝卜奸商的留言不过还只是换一个正则匹配而已．．优劣问题，还需指点．．．

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset=utf-8>
 5     <title>demo</title>
 6 </head>
 7 <body>
 8       
 9   
10  <script>
11    var list = {
12     href:'//www.taobao.com/',
13     text:'淘宝网'
14    };
15    var str = '<a href="{href}">{text}</a>';
16    console.log(str.replace(/\{([\s\S]+?)}/g,function(i,id){return list[id];}));
17 
18     
19  </script>   
20 </body>
21 </html>

3、（2014年春季阿里巴巴实习生笔试）

题目：在页面上的这样的一个区块，区块中展示的数据都是页面加载后从后端ajax接口获取的，请实现该区块的数据请求与渲染的逻辑。

要求：

1.进行当前区块的样式布局。

2.设计当前区块所适合的json格式、或者xml的数据格式（要包含商品图片、商品原价、商品折扣价、商品标题、商品标签）并模拟接口data.json/data.xml

3.自行选择框架（KISSY，YUI，JQ）或者原生代码编写与设计好的后端接口通信和渲染的过程。

分析：

看到这一题不禁让我想到了上一个题目，像模板匹配一样的。取来我自己定义的json格式的数据，放到我自己写的简易模板中，匹配就是了。

一开始，我企图真的写个data.json来存放我的数据，像这样

1 $.getJSON("data.json", function(data){
2                     ........
3                 });

但是根本是读不到的，据说是安全问题，这方面还不太懂....

其实在实际开发中，php会给个接口，像module/filter/data类似这样的，我们用的时候只要像这样

$.post('module/filter/data',function(data){
   alert(data);
})

把我们想要的数据拿来就是了.....

于是乎，我开窍了，我写个data.js把我的数据放进去,然后导入到我的页面中不就行了嘛~

data.js

 1 var JSON = {
 2   "url" : "www.baidu.com",
 3   "data":[
 4   {
 5       "blockid" : "1",
 6       "img"  : "images/1.jpg",
 7       "name" : "连衣裙1",
 8       "ju" : "images/bao.png",
 9       "oldPrace" : "￥255",
10       "juPrace" : "￥180",
11   },
12   {
13       "blockid" : "2",
14       "img"  : "images/2.jpg",
15       "name" : "连衣裙2",
16       "ju" : "images/bao.png",
17       "oldPrace" : "￥255",
18       "juPrace" : "￥180",
19   },
20   {
21       "blockid" : "3",
22       "img"  : "images/3.jpg",
23       "name" : "连衣裙3",
24       "ju" : "images/bao.png",
25       "oldPrace" : "￥255",
26       "juPrace" : "￥180",
27   },
28   {
29       "blockid" : "4",
30       "img"  : "images/4.jpg",
31       "name" : "连衣裙4",
32       "ju" : "images/bao.png",
33       "oldPrace" : "￥255",
34       "juPrace" : "￥180",
35   },
36   {
37       "blockid" : "5",
38       "img"  : "images/5.jpg",
39       "name" : "连衣裙5",
40       "ju" : "images/bao.png",
41       "oldPrace" : "￥255",
42       "juPrace" : "￥180",
43   },
44   {
45       "blockid" : "6",
46       "img"  : "images/6.jpg",
47       "name" : "连衣裙6",
48       "ju" : "images/bao.png",
49       "oldPrace" : "￥255",
50       "juPrace" : "￥180",
51   },
52   {
53       "blockid" : "7",
54       "img"  : "images/7.jpg",
55       "name" : "连衣裙7",
56       "ju" : "images/bao.png",
57       "oldPrace" : "￥255",
58       "juPrace" : "￥180",
59   },
60   {
61       "blockid" : "8",
62       "img"  : "images/8.jpg",
63       "name" : "连衣裙8",
64       "ju" : "images/bao.png",
65       "oldPrace" : "￥255",
66       "juPrace" : "￥180",
67   },
68   {
69       "blockid" : "9",
70       "img"  : "images/9.jpg",
71       "name" : "连衣裙9",
72       "ju" : "images/bao.png",
73       "oldPrace" : "￥255",
74       "juPrace" : "￥180",
75   },
76   {
77       "blockid" : "10",
78       "img"  : "images/10.jpg",
79       "name" : "连衣裙10",
80       "ju" : "images/bao.png",
81       "oldPrace" : "￥255",
82       "juPrace" : "￥180",
83   },
84  ]
85 }

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4 <meta charset=utf-8>
 5 <title>demo</title>
 6 </head>
 7 <script src="js/jquery-1.11.1.js" type="text/javascript"charset="utf-8"></script>
 8 <script src="data.js" type="text/javascript"charset="utf-8"></script>   
 9 <style>
10   ul {
11     margin-right: auto;
12     margin-left: auto;
13   }  
14   li {
15     display: inline-block;
16     padding-right: 25px;
17     padding-left: 15px;
18   }
19   a {
20     text-decoration: none;
21   }
22 </style>  
23     
24 <body>
25 
26   <ul>
27     <textarea style="display:none;">
28     <li>
29         <a href="javascript:" data-id="$blockid$">
30             <p class="name">$name$</p>
31             <div>
32                 <del class="old">$oldPrace$</del>
33                 <strong class="juPrice">$juPrace$</strong>
34             </div>
35         </a>
36     </li>
37     </textarea>
38   </ul>
39 
40     <script>
41        
42        /*扩展的模板方法,用来匹配dom结构中的$..$这样的表达式，并进行替换*/
43        String.prototype.temp = function(obj){
44         return this.replace(/\$\w+\$/gi,function(matches){
45             var returns = obj[matches.replace(/\$/g,"")];
46             return(returns+"") == "undefined"?"":returns;
47         });
48        };
49        var htmlList = '';
50        /*获得包括<li>元素在内的整个模板*/
51        var htmlTemp = $('textarea').val();
52        JSON.data.forEach(function(object){
53           htmlList += htmlTemp.temp(object);      
54        }); 
55        /*由于图片存在url因此直接在htnl中写$img$会报错，于是选择动态写进去的方式，但是要等dom加载完再插入，不然会找不到要插入的位置*/
56        $(document).ready(function(){
57            console.log(htmlList);
58            var imgPic=[];
59            var bao = [];
60            for(var i=0;i<JSON.data.length;i++){
61              imgPic[i] = '<img height="180" width="200" src="'+JSON.data[i].img+'"/></br>';
62              console.log(imgPic[i]);
63              bao[i] = '<img height="12" width="20" src="'+JSON.data[i].ju+'"/>'
64              /*要注意到这里获取到i的值得方法，要让它可以取到*/
65              var indexImg = 'li:eq("'+i+'") p';
66             $(indexImg).prepend(imgPic[i]);
67              var indexBao = 'li:eq("'+i+'") p';
68              $(indexBao).after(bao[i]);
69            }
70        });          
71        $('ul').html(htmlList);
72     </script>
73     
74 </body>  
75 </html>

然后就可以实现如下图的效果。（当然，实现的过程中我是踩到了无数个坑的....囧）

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？

大额大额哼歌等日落主业程序媛，副业文艺逗逼女青年...