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

所属分类: 网络编程 / JavaScript 阅读数: 2015
收藏 0 赞 0 分享
我喜欢从最基础的内容讲起,然后慢慢深入,高手可能要给点耐心啊。
先看一个最简单的应用。在下面的代码中,我们需要实现一个功能,就是点击每个按钮显示相应的网址
复制代码 代码如下:

<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实现类,模拟面向对象编程。
 以上讲得非常简单,仅作为抛砖引入,大家有兴趣的可以在回复里面谈谈自己的应用心得啊。
临走之前再讲个例子----判断上传的文件是否为图像文件.
请注意那个set函数,当我们实现这个函数后,就可以像python一样使用集合对象了,是不是很方便呢 
更多精彩内容其他人还在看

layui table 复选框跳页后再回来保持原来选中的状态示例

今天小编就为大家分享一篇layui table 复选框跳页后再回来保持原来选中的状态示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue-Cli项目优化操作的实现

这篇文章主要介绍了Vue-Cli项目优化操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

这篇文章主要介绍了解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题,本文给大家总结的非常详细,需要的朋友可以参考下
收藏 0 赞 0 分享

vue 父组件通过v-model接收子组件的值的代码

这篇文章主要介绍了vue 父组件通过v-model接收子组件的值的代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue 全局环境切换问题

小编在开发使经常会碰到全局切换问题,今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

element-ui 本地化使用教程详解

这篇文章主要介绍了element-ui 本地化使用教程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

在Vue项目中,防止页面被缩放和放大示例

今天小编就为大家分享一篇在Vue项目中,防止页面被缩放和放大示例,具有很好的参考 价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue h5移动端禁止缩放代码

今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue 3.0双向绑定原理的实现方法

这篇文章主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

nest.js 使用express需要提供多个静态目录的操作方法

这篇文章主要介绍了nest.js 使用express需要提供多个静态目录的操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多