JavaScript 哈希对象编程技巧：从数组到键值对的优化

本文从基础概念入手，逐步深入讲解，建议有经验的开发者保持耐心阅读。

传统方法的局限性

首先来看一个基础应用场景：点击不同按钮时，显示对应的网址链接。

<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 个时，代码量将急剧增加。

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>

可以看出，原本需要循环和判断的逻辑，现在只需一行代码即可完成，且扩展性极佳。

如果您对 JavaScript 比较熟悉，您一定会对数组情有独钟，因为它确实是一种非常方便，应用非常广泛的

数据结构，但是对于哈稀对象这个青苹果，哪怕您只啃过它一口，你一定永远不会忘记它的甜美。

他作为一种数据结构，在许多场合可以简化编程，在海量数据面前，他的性能要远远高于数组。(这个在

我日后的po文里面会提到的，请关注)

他作为一种对象，可以在JavaScript实现类，模拟面向对象编程。

以上讲得非常简单，仅作为抛砖引入，大家有兴趣的可以在回复里面谈谈自己的应用心得啊。

临走之前再讲个例子－－－－判断上传的文件是否为图像文件.

<script type="text/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 

请注意那个set函数，当我们实现这个函数后，就可以像python一样使用集合对象了，是不是很方便呢