|
|
先看一個最簡單的應用。在下面的代碼中，我們需要實現一個功能，就是點擊每個按鈕顯示相應的網址
復制代碼 代碼如下:
<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實現類，模擬面向對象編程。
以上講得非常簡單，僅作為拋磚引入，大家有興趣的可以在回復里面談談自己的應用心得啊。
臨走之前再講個例子－－－－判斷上傳的文件是否為圖像文件.
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]請注意那個set函數，當我們實現這個函數后，就可以像Python一樣使用集合對象了，是不是很方便呢
JavaScript技術：總結兩個Javascript的哈稀對象的一些編程技巧，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
