总结两个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个条件，那岂不要写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实现类，模拟面向对象编程。

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

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

< 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 < arguments.length;i ++ ) hash[arguments[i]] = 1
     return  hash
}

function  isImageFile2(url){
     return   getExtName(url)  in  set( " jpg " , " gif " , " pnp " , " jpeg " , " bmp " )    
}
/* ********方法2******* */

var  url = " go_rush.gif "
alert(isImageFile1(url))
alert(isImageFile2(url))
script >

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