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

時間 2019-11-08

原文原文鏈接

我也是在學習中喔，若是你們有好的方法，或者個人解答中有不對的不合理的效率很差的地方，請你們踊躍留言一塊兒學習喔~javascript

一、（2014年春季阿里巴巴實習生筆試）題目：有一個大數組，var a = ['1','2','3',...];a數組的長度是100，內容填充隨機整數的字符串，請先構造此數組a，而後設計一個算法，將其內容去重。php

分析要點：隨機生成數組，數組去重。html

 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>

謝謝你們的留言，鑑於上面的方法是最基本的最無趣的最沒有新意的，必須改進哇..java

改進版一：jquery

分析：利用對象中的key惟一這個原理來對數組去重，（可是在某些數組元素比較複雜的狀況下可能會有些問題喔，你們能夠根據狀況自行改進）。ajax

 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>

二、（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()方法用於在字符串中用一些字符替換另外一些字符，或替換一個與正則表達式匹配的字符串。json

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>

三、（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>