總結兩個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
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

請注意那個set函數，當我們實現這個函數後，就可以像python一樣使用集合對象了，是不是很方便呢