|
|
先看一個(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)">那么。怎么寫(xiě)這個(gè) showUrl函數(shù)呢? 我想大多數(shù)人可能會(huì)這樣寫(xiě).
<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>
這樣寫(xiě)不太好，原因有二:
1.寫(xiě)太長(zhǎng)，很麻煩，用if, switch 語(yǔ)句來(lái)寫(xiě),如果有100個(gè)條件，那豈不要寫(xiě)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ì)這樣寫(xiě)，一般用數(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è)青蘋(píng)果，哪怕您只啃過(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ù)勛约旱?a href=/pingce/yingyong/ target=_blank class=infotextkey>應(yīng)用心得啊。
臨走之前再講個(gè)例子－－－－判斷上傳的文件是否為圖像文件.
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]請(qǐng)注意那個(gè)set函數(shù)，當(dāng)我們實(shí)現(xiàn)這個(gè)函數(shù)后，就可以像Python一樣使用集合對(duì)象了，是不是很方便呢
JavaScript技術(shù)：總結(jié)兩個(gè)Javascript的哈稀對(duì)象的一些編程技巧，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
