作家
登录

总结两个Javascript的哈稀对象的一些编程技巧

作者: 来源:www.28hudong.com 2013-03-30 03:32:48 阅读 我要评论

我喜欢从最基础的内容讲起,然后慢慢深入,高手可能要给点耐心啊。 先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址 复制代码 代码如下:<input type="button" value="百度" onclick="javascript:showUrl(this)"> <input type="button" value="Google" onclick="javascript:showUrl(this)"> <input type="button" value="微软" onclick="javascript:showUrl(this)"> <input type="button" value="博客园" onclick="javascript:showUrl(this)"> <input type="button" value="阿舜的博客" onclick="javascript:showUrl(this)">那么。怎么写这个 showUrl函数呢? 我想大多数人可能会这样写. <script type="text/javascript"> // by Go_Rush(阿舜) from http://ashun.cnblogs.com/ function showUrl(element){ var url; switch (element.value){ case "百度": url="http://www.baidu.com/" ;break; case "Google": url="http://www.google.com/" ;break; case "微软": url="http://www.microsoft.com/";break; case "博客园": url="http://www.cnblogs.com/" ;break; case "阿舜的博客": url="http://ashun.cmblogs.com/" ;break; default: url="" } alert(url) } </script>这样写不太好,原因有二: 1.写太长,很麻烦,用if, switch 语句来写,如果有100个条件,那岂不要写100个语句 2.不便于维护和扩展,如果需求经常变化,那些数据从数据库来怎么办,每变一下都要改程序的逻辑结构 对JavaScript比较有经验的程序员肯定不会这样写,一般用数组来实现。 可以是二维数组,也可以是双数组 1.双数组方法 复制代码 代码如下:<script type="text/javascript"> // by Go_Rush(阿舜) from http://ashun.cnblogs.com/ var arrText=["百度","Google","微软","博客园","阿舜的博客"]; var arrUrl=["http://www.baidu.com/","http://www.google.com/","http://www.microsoft.com/","http://www.cnblogs.com/","http://ashun.cmblogs.com/"] function showUrl(element){ //用双数组方法 var value=element.value; for(var i=0;i<arrText.length;i++){ if (arrText[i]===value) return alert(arrUrl[i]) } } </script> 2. 二维数组方法 复制代码 代码如下:<script type="text/javascript"> // by Go_Rush(阿舜) from http://ashun.cnblogs.com/ var arr=[ ["百度" ,"http://www.baidu.com/"], ["Google" ,"http://www.google.com/"], ["微软" ,"http://www.microsoft.com/"], ["博客园" ,"http://www.cnblogs.com/"], ["阿舜的博客" ,"http://ashun.cmblogs.com/"] ]; function showUrl(element){ //用二维数组方法 var value=element.value; for(var i=0;i<arr.length;i++){ if (arr[i][0]===value) return alert(arr[i][1]) } } </script> 以上两种方法借用数组作为数据结构,实现了程序要求的功能,而且为以后的扩展,变动做好了充分的准备 但是,效率呢? 每次都要遍历数组,每次都要判断。。。。 下面,我来介绍一种不用数组,不用循环遍历,也不要判断比较的方法。 先来一段: 复制代码 代码如下:<script type="text/javascript"> // by Go_Rush(阿舜) from http://ashun.cnblogs.com/ var hash={ "百度" :"http://www.baidu.com/", "Google" :"http://www.google.com/", "微软" :"http://www.microsoft.com/", "博客园" :"http://www.cnblogs.com/", "阿舜的博客" :"http://ashun.cmblogs.com/" }; function showUrl(element){ //使用哈稀对象 alert(hash[element.value]) } </script> 看到没有,以前要用循环的,要用判断的函数,现在只要一行代码就OK了,而且扩展性还是最好的。 如果您对JavaScript比较熟悉,您一定会对数组情有独钟,因为它确实是一种非常方便,应用非常广泛的 数据结构,但是对于哈稀对象这个青苹果,哪怕您只啃过它一口,你一定永远不会忘记它的甜美。 他作为一种数据结构,在许多场合可以简化编程,在海量数据面前,他的性能要远远高于数组。(这个在 我日后的po文里面会提到的,请关注) 他作为一种对象,可以在JavaScript实现类,模拟面向对象编程。 以上讲得非常简单,仅作为抛砖引入,大家有兴趣的可以在回复里面谈谈自己的应用心得啊。 临走之前再讲个例子----判断上传的文件是否为图像文件. // by Go_Rush(阿舜) from http://ashun.cnblogs.com/ //获取扩展名 function getExtName(url){ if (!/./.test(url)) return ""; var arr=url.split("."); return arr[arr.length-1].toLowerCase(); } /*********方法1*******/ function isImageFile1(url){ var ext=getExtName(url) return ext=="jpg" || ext=="bmp" ||ext=="gif" || ext=="png" || ext=="jpeg" } /*********方法2********/ function set(){ for(var i=0,hash={};i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]请注意那个set函数,当我们实现这个函数后,就可以像python一样使用集合对象了,是不是很方便呢

  推荐阅读

  javascript 控制弹出窗口

前言:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息 、警告、欢迎光顾之类的话或者作者想要特别提示的信息。>>>详细阅读


本文标题:总结两个Javascript的哈稀对象的一些编程技巧

地址:http://www.17bianji.com/kaifa2/JS/30588.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)