前端筆試題及資料集錦（一）（持續更新....）

本文轉載自查看原文 2014-09-11 13:54 1749 前端筆面試/ 前端

我也是在學習中喔，如果大家有好的方法，或者我的解答中有不對的不合理的效率不好的地方，請大家踴躍留言一起學習喔~

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>

然后就可以實現如下圖的效果。（當然，實現的過程中我是踩到了無數個坑的....囧）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端筆試題及資料集錦（二）坑爹的JS筆試題（持續更新） SQL 筆試題集錦筆試題匯總，含參考答案（持續更新中。。。） Latex 資料匯總（持續更新） 2021前端面試題--（持續更新）頭條前端面試題匯總，會持續更新 HTML前端面試題大全（持續更新） an網（TOR）相關資料集錦 2020.8更新 web前端筆試題（一）