總結兩個Javascript的哈稀對象的一些編程技巧

更新時間：2007年04月12日 00:00:00 作者：

我喜歡從最基礎的內容講起，然后慢慢深入，高手可能要給點耐心啊。
先看一個最簡單的應用。在下面的代碼中，我們需要實現(xiàn)一個功能，就是點擊每個按鈕顯示相應的網(wǎng)址

<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函數(shù)呢? 我想大多數(shù)人可能會這樣寫.  
<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.不便于維護和擴展，如果需求經常變化，那些數(shù)據(jù)從數(shù)據(jù)庫來怎么辦，每變一下都要改程序的邏輯結構
對JavaScript比較有經驗的程序員肯定不會這樣寫，一般用數(shù)組來實現(xiàn)。可以是二維數(shù)組，也可以是雙數(shù)組
1.雙數(shù)組方法

復制代碼代碼如下:

<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){    //用雙數(shù)組方法  
    var value=element.value;  
    for(var i=0;i<arrText.length;i++){  
        if (arrText[i]===value) return alert(arrUrl[i])  
    }  
}  
</script> 

2. 二維數(shù)組方法

復制代碼代碼如下:

<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){    //用二維數(shù)組方法  
    var value=element.value;  
    for(var i=0;i<arr.length;i++){  
        if (arr[i][0]===value) return alert(arr[i][1])  
    }  
}  
</script> 

以上兩種方法借用數(shù)組作為數(shù)據(jù)結構，實現(xiàn)了程序要求的功能，而且為以后的擴展，變動做好了充分的準備
但是，效率呢？每次都要遍歷數(shù)組，每次都要判斷。。。。
下面，我來介紹一種不用數(shù)組，不用循環(huán)遍歷，也不要判斷比較的方法。
先來一段：

復制代碼代碼如下:

<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> 

看到沒有，以前要用循環(huán)的，要用判斷的函數(shù)，現(xiàn)在只要一行代碼就OK了，而且擴展性還是最好的。
如果您對JavaScript比較熟悉，您一定會對數(shù)組情有獨鐘，因為它確實是一種非常方便，應用非常廣泛的
數(shù)據(jù)結構，但是對于哈稀對象這個青蘋果，哪怕您只啃過它一口，你一定永遠不會忘記它的甜美。
他作為一種數(shù)據(jù)結構，在許多場合可以簡化編程，在海量數(shù)據(jù)面前，他的性能要遠遠高于數(shù)組。(這個在
我日后的po文里面會提到的，請關注)
他作為一種對象，可以在JavaScript實現(xiàn)類，模擬面向對象編程。
以上講得非常簡單，僅作為拋磚引入，大家有興趣的可以在回復里面談談自己的應用心得啊。
臨走之前再講個例子－－－－判斷上傳的文件是否為圖像文件.

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

請注意那個set函數(shù)，當我們實現(xiàn)這個函數(shù)后，就可以像python一樣使用集合對象了，是不是很方便呢

您可能感興趣的文章: