三道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") + "\n我的性别是：" + 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") + "\n我的性别是：" + me.attr("gender")); 90 /*------[执行结果]------ 91 92 我的名字是：小明 93 我的性别是：男 94 95 ------------------*/ 96 97 console.info("我的名字是：" + she.attr("fullname") + "\n我的性别是：" + 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 }
