zoukankan      html  css  js  c++  java
  • 三道JS试题(遍历、创建对象、URL解析)

         最近在网上看到了三道不错的JS试题,还是很基础(一直认为学好前端基本功很重要。。。),现在记录如下:

         原帖地址:http://www.w3cfuns.com/forum.php?mod=viewthread&tid=2264&extra=page%3D1%26filter%3Dtypeid%26typeid%3D177%26typeid%3D177

         前两道有人答的不错,这里借用下,最后一道题自己码的,没有用正则   

     1 //Q1:实现一个遍历数组或对象里所有成员的迭代器。
     2 
     3 var each = function(obj, fn){
     4         //+++++++++++答题区域+++++++++++
     5           if(obj instanceof Array){
     6               for(var i=0,j=obj.length;i<j;i++){ 
     7             
     8                   var temp=fn.call(obj[i],i+1);          
     9                   if(temp===false){
    10                     break;        
    11                   };
    12               }
    13          }else{
    14              if(! obj instanceof Object) return false;
    15                   for( e in obj){
    16                   fn.call(obj[e],obj[e],e);
    17                   }
    18              }             
    19         //+++++++++++答题结束+++++++++++
    20 };
    21 
    22 try{
    23         var data1 = [4,5,6,7,8,9,10,11,12];
    24         var data2 = {
    25                 "a": 4,
    26                 "b": 5,
    27                 "c": 6
    28         };
    29                 
    30         each(data1, function(o){
    31                 if( 6 == this )
    32                         return true;
    33                 else if( 8 == this )
    34                         return false;
    35                 console.log(o + ": "" + this + """);
    36         });
    37         
    38         /*------[执行结果]------
    39 
    40         1: "4"
    41         2: "5"
    42         4: "7"
    43 
    44         ------------------*/
    45                
    46         each(data2, function(v, n){
    47                 if( 5 == this )
    48                         return true;
    49                 console.log(n + ": "" + v + """);
    50         });
    51         
    52         /*------[执行结果]------
    53 
    54         a: "4"
    55         c: "6"
    56 
    57         ------------------*/
    58         
    59 }catch(e){
    60         console.error("执行出错,错误信息: " + e);
    61 }
      1 //Q2:实现一个叫Man的类,包含attr, words, say三个方法。
      2 var Man;
      3 //+++++++++++答题区域+++++++++++
      4 Man = function (info) {
      5         if (!(this instanceof Man)) {
      6                 // Man方法作为普通函数被调用
      7                 return new Man(info);
      8         }
      9         else {
     10                 // Man方法作为构造函数被调用
     11                 this.attr(info);
     12         }
     13 }
     14 
     15 Man.prototype = {
     16         attr : function(a, v) {
     17                 // 如果是一个键值集合, 则遍历该集合, 逐个调用attr().
     18                 if (typeof a === 'object')
     19                         for (var i in a)
     20                                 this.attr(i, a[i]);
     21                 else {
     22                         // 通过attr获取或设置的变量都为私有变量, 私有变量的变量名具有'_'前缀.
     23                         a = '_' + a;
     24 
     25                         // 设置参数的值
     26                         if (arguments.length === 2)
     27                                 this[a] = v;
     28 
     29                         // 访问参数的值
     30                         var r = this[a];
     31                         if (r === undefined || r === null)
     32                                 r = '<用户未输入>';
     33 
     34                         return r;
     35                 }
     36         },
     37         words : function(word) {
     38                 // 获取对象中的短语集合, 如果不存在了, 就创建一个.
     39                 var w = this._wordArray;
     40                 if (!w) {
     41                         this._wordArray = w = [];
     42                 }
     43 
     44                 if (word) {
     45                         w.push(word);
     46                 }
     47         },
     48         say : function() {
     49                 var name = this['_fullname'];
     50                 var words = this['_wordArray'];
     51                 var limit = this['_words-limit'];
     52                 var emote = this['_words-emote'] || '说';
     53 
     54                 var r = name + emote + ': "';
     55                 for (var i = 0; i < words.length && (typeof limit === 'number' ? i < limit : true); i++) {
     56                         r += words[i];
     57                 }
     58                 r += '"';
     59 
     60                 return r;
     61         }
     62 
     63 }
     64 
     65 
     66 
     67 
     68 //+++++++++++答题结束+++++++++++
     69 
     70 try{
     71         
     72         var me = Man({ fullname: "小红" });
     73         var she = new Man({ fullname: "小红" });
     74         
     75         console.info("我的名字是:" + me.attr("fullname") + "
    我的性别是:" + me.attr("gender"));
     76         /*------[执行结果]------
     77 
     78         我的名字是:小红
     79         我的性别是:<用户未输入>
     80 
     81         ------------------*/
     82 
     83         me.attr("fullname", "小明");
     84         me.attr("gender", "男");
     85         me.fullname = "废柴";
     86         me.gender = "人妖"; 
     87         she.attr("gender", "女");
     88         
     89         console.info("我的名字是:" + me.attr("fullname") + "
    我的性别是:" + me.attr("gender"));
     90         /*------[执行结果]------
     91 
     92         我的名字是:小明
     93         我的性别是:男
     94 
     95         ------------------*/
     96         
     97         console.info("我的名字是:" + she.attr("fullname") + "
    我的性别是:" + she.attr("gender"));
     98         /*------[执行结果]------
     99 
    100         我的名字是:小红
    101         我的性别是:女
    102 
    103         ------------------*/
    104 
    105         me.attr({
    106                 "words-limit": 3,
    107                 "words-emote": "微笑"
    108         });
    109         me.words("我喜欢看视频。");
    110         me.words("我们的办公室太漂亮了。");
    111         me.words("视频里美女真多!");
    112         me.words("我平时都看优酷!");
    113         
    114         console.log(me.say());
    115         /*------[执行结果]------
    116 
    117         小明微笑:"我喜欢看视频。我们的办公室太漂亮了。视频里美女真多!"
    118 
    119         ------------------*/
    120 
    121         me.attr({
    122                 "words-limit": 2,
    123                 "words-emote": "喊"
    124         });
    125 
    126         console.log(me.say());
    127         /*------[执行结果]------
    128 
    129         小明喊:"我喜欢看视频。我们的办公室太漂亮了。"
    130 
    131         ------------------*/
    132         
    133 }catch(e){
    134         console.error("执行出错,错误信息: " + e);
    135 }
     1 //Q3:实现一个URI解析方法,把url里#之后的参数解析成指定的数据结构。
     2 function urlParser(s){
     3         //+++++++++++答题区域+++++++++++
     4         var formatUrl = [];
     5         var obj = {};
     6         if(typeof s == "string" || Object.prototype.toString.call(s).slice(8,-1).toLowerCase() == "string"){       
     7            //判断是否含有“#”
     8            if(s.split("#")[1] != null) {
     9               var argArr = s.split("#")[1].split("?");
    10               var hasFlag = (argArr[argArr.length-1].indexOf("&") == -1);
    11               //含有?时
    12               if(argArr.length > 1 ||  hasFlag){
    13                   var temp1 = argArr[0].split("/");
    14                   for(var i in temp1) (temp1[i] ==  '') || formatUrl.push(temp1[i]);
    15               }
    16               
    17               if(!hasFlag){
    18                   var temp2 =   argArr[argArr.length-1].split("&");                 
    19                   for(var i in temp2){
    20                       obj[temp2[i].slice(0,temp2[i].indexOf("="))] = temp2[i].slice(temp2[i].indexOf("=")+1);
    21                   }
    22                   formatUrl.push(JSON.stringify(obj));
    23               }
    24          }
    25         }
    26 
    27         return formatUrl;  
    28         //+++++++++++答题结束+++++++++++
    29 }
    30 
    31 try{
    32         var url1 = "http://www.abc.com/m/s/#page/2/?type=latest_videos&page_size=20";
    33         var url2 = "http://www.abc.com/m/s/#type=latest_videos&page_size=20";
    34         var url3 = "http://www.abc.com/m/s/#page?type=latest_videos&page_size=20";
    35         var url4 = "http://www.abc.com/m/s/#page/2";
    36 
    37         console.log( urlParser(url1) );
    38         console.log( urlParser(url2) );
    39         console.log( urlParser(url3) );
    40         console.log( urlParser(url4) );
    41         /*------[执行结果]------
    42 
    43         ["page", "2", { "type": "latest_videos", "page_size": 20 }]
    44         [{ "type": "latest_videos", "page_size": 20 }]
    45         ["page", { "type": "latest_videos", "page_size": 20 }]
    46         ["page", "2"]
    47         ------------------*/
    48         
    49 }catch(e){
    50         console.error("执行出错,错误信息: " + e);
    51 }
  • 相关阅读:
    传的参数乱码
    Tp5.0中分页加搜索的用法!!!
    TP5.0循环更新数据问题
    TP5.0中foreach里面使用save方法变成更新问题
    TP5.0中软删除的用法
    TP5.0中save方法加主键id的用法!!!
    用宝塔的定时任务写shell命令会以root执行的解决方法
    兆易创新RISC-V开发板评测
    使用vsCode配合IAR搭建arm开发环境
    Vue 路由导航解析流程
  • 原文地址:https://www.cnblogs.com/missuu/p/3780126.html
Copyright © 2011-2022 走看看