zoukankan      html  css  js  c++  java
  • 前端笔试题及资料集锦(一)(持续更新....)

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

    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(/{([sS]+?)}/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>

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

  • 相关阅读:
    Good Bye 2014 B. New Year Permutation(floyd )
    hdu 5147 Sequence II (树状数组 求逆序数)
    POJ 1696 Space Ant (极角排序)
    POJ 2398 Toy Storage (叉积判断点和线段的关系)
    hdu 2897 邂逅明下 (简单巴什博弈)
    poj 1410 Intersection (判断线段与矩形相交 判线段相交)
    HDU 3400 Line belt (三分嵌套)
    Codeforces Round #279 (Div. 2) C. Hacking Cypher (大数取余)
    Codeforces Round #179 (Div. 2) B. Yaroslav and Two Strings (容斥原理)
    hdu 1576 A/B (求逆元)
  • 原文地址:https://www.cnblogs.com/skylar/p/3966318.html
Copyright © 2011-2022 走看看