快捷導(dǎo)航

總結(jié)兩個(gè)Javascript的哈稀對(duì)象的一些編程技巧

更新時(shí)間：2007年04月12日 00:00:00 作者：

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

復(fù)制代碼代碼如下:

<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)">那么。怎么寫這個(gè) showUrl函數(shù)呢? 我想大多數(shù)人可能會(huì)這樣寫.  
<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.寫太長(zhǎng)，很麻煩，用if, switch 語(yǔ)句來(lái)寫,如果有100個(gè)條件，那豈不要寫100個(gè)語(yǔ)句
2.不便于維護(hù)和擴(kuò)展，如果需求經(jīng)常變化，那些數(shù)據(jù)從數(shù)據(jù)庫(kù)來(lái)怎么辦，每變一下都要改程序的邏輯結(jié)構(gòu)
對(duì)JavaScript比較有經(jīng)驗(yàn)的程序員肯定不會(huì)這樣寫，一般用數(shù)組來(lái)實(shí)現(xiàn)。可以是二維數(shù)組，也可以是雙數(shù)組
1.雙數(shù)組方法

復(fù)制代碼代碼如下:

<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ù)組方法

復(fù)制代碼代碼如下:

<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ù)結(jié)構(gòu)，實(shí)現(xiàn)了程序要求的功能，而且為以后的擴(kuò)展，變動(dòng)做好了充分的準(zhǔn)備
但是，效率呢？每次都要遍歷數(shù)組，每次都要判斷。。。。
下面，我來(lái)介紹一種不用數(shù)組，不用循環(huán)遍歷，也不要判斷比較的方法。
先來(lái)一段：

復(fù)制代碼代碼如下:

<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){    //使用哈稀對(duì)象  
    alert(hash[element.value])  
}  
</script> 

看到?jīng)]有，以前要用循環(huán)的，要用判斷的函數(shù)，現(xiàn)在只要一行代碼就OK了，而且擴(kuò)展性還是最好的。
如果您對(duì)JavaScript比較熟悉，您一定會(huì)對(duì)數(shù)組情有獨(dú)鐘，因?yàn)樗_實(shí)是一種非常方便，應(yīng)用非常廣泛的
數(shù)據(jù)結(jié)構(gòu)，但是對(duì)于哈稀對(duì)象這個(gè)青蘋果，哪怕您只啃過(guò)它一口，你一定永遠(yuǎn)不會(huì)忘記它的甜美。
他作為一種數(shù)據(jù)結(jié)構(gòu)，在許多場(chǎng)合可以簡(jiǎn)化編程，在海量數(shù)據(jù)面前，他的性能要遠(yuǎn)遠(yuǎn)高于數(shù)組。(這個(gè)在
我日后的po文里面會(huì)提到的，請(qǐng)關(guān)注)
他作為一種對(duì)象，可以在JavaScript實(shí)現(xiàn)類，模擬面向?qū)ο缶幊獭?
以上講得非常簡(jiǎn)單，僅作為拋磚引入，大家有興趣的可以在回復(fù)里面談?wù)勛约旱膽?yīng)用心得啊。
臨走之前再講個(gè)例子－－－－判斷上傳的文件是否為圖像文件.

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

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

您可能感興趣的文章: