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

來源:互聯網
上載者:User

我喜歡從最基礎的內容講起,然後慢慢深入,高手可能要給點耐心啊。
先看一個最簡單的應用。在下面的代碼中,我們需要實現一個功能,就是點擊每個按鈕顯示相應的網址 複製代碼 代碼如下:<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一樣使用集合對象了,是不是很方便呢

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.