4-3 嚙緝嚙賢物嚙踝蕭

一般的陣列是以循序的數值來進行索引,但是字典物件(Dictionary)是以字串來進行索引(或是以字串為鍵值),所以我們可以將字典物件看成是由字串到字串的函數關係,就像是一本字典一樣,我們可以先找到一個字(或詞彙),然後跟著就找到字(或詞彙)的解釋。

要產生一個字典物件,必須先使用 new ActiveXObject("Scripting.Dictionary") 產生一個空的字典物件,然後再使用 Add() 方法來將對應關係一個一個加進去,例如:

Example(dict01.htm):

此範例原始碼如下:

原始檔(dict01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>字典物件的建構方法</h2>
<hr>

<script>
capitalOf = new ActiveXObject("Scripting.Dictionary");	// 建構一個空的字典物件
capitalOf.Add("Taiwan", "Taipei");		// 加入第 1 個對應關係
capitalOf.Add("USA", "Washington");		// 加入第 2 個對應關係
capitalOf.Add("Korea", "Seoul");		// 加入第 3 個對應關係
document.writeln("capitalOf(\"Taiwan\") = " + capitalOf("Taiwan") + "<br>");
document.writeln("capitalOf(\"USA\") = " + capitalOf("USA") + "<br>");
document.writeln("capitalOf(\"Korea\") = " + capitalOf("Korea") + "<br>");
</script>

<hr>
</body>
</html>

在上述範例中,每個字典物件的索引是一個字串,例如 "Taiwan" 就對應到 "Taipei",因此 capitalOf("Taiwan") 的值就是 "Taipei"。請注意是 capitalOf("Taiwan") 是用小括弧,不是用中括弧(中括弧是用在陣列物件)。

Hint
字典物件又稱為關聯陣列(Associative Arrays),代表兩個字串之間的關聯關係,這和 Perl 的 Hash 資料結構是一樣的。

在以下的範例中,我們會反覆的檢查字典物件的各個對應關係,所以我們先定義一個印出字典物件的函數,如下:

原始檔(listDict.js):(灰色區域按兩下即可拷貝)
// 列印字典變數
function listDict(dict, dictName){
	allKeys = (new VBArray(dict.Keys())).toArray();   // 取出鍵值
	for (var i=0; i<dict.Count; i++)
		document.writeln(dictName+"(\"<font color=blue>"+allKeys[i]+"</font>\") = <font color=red>"+dict(allKeys[i])+"</font><br>");
}

其中 dict.Count 代表此字典物件的項目個數,而 dict.Keys() 將會在下文說明。根據這個函數,我們就可以很方便地印出一個字典物件的對應關係。

與字典物件相關的方法還有 Remove()(刪除鍵值,同時也刪除對應的字串)、Key()(改變鍵值)和 Item()(改變對應值),請見下列範例:

Example(dict02.htm):

此範例原始碼如下:

原始檔(dict02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>字典物件的 Remove()、Key() 和 Item() 方法</h2>
<hr>

<script src=listDict.js></script>
<script>
countryOf = new ActiveXObject("Scripting.Dictionary");	// 建構一個空的字典物件
countryOf.Add("Taipei", "Taiwan");	// 加入第 1 個對應關係
countryOf.Add("San Francisco", "USA");	// 加入第 2 個對應關係
countryOf.Add("Tokyo", "Japan");	// 加入第 3 個對應關係
countryOf.Add("Seoul", "Korea");	// 加入第 4 個對應關係
countryOf.Remove("Tokyo");		// 移除 Tokyo 鍵值(及對應的字串)
countryOf.Key("Taipei") = "Hsinchu";	// 將 Taipei 鍵值改成 Hsinchu
countryOf.Item("Tokyo") = "Nippon";	// 將 Tokyo 所對應的字串改成 Nippon
listDict(countryOf, "countryOf");
</script>

<hr>
</body>
</html>

我們也可以使用 Keys() 和 Items() 來取出一個字典物件的鍵值和對應值,例如:

Example(dict03.htm):

此範例原始碼如下:

原始檔(dict03.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 Keys() 和 Items() 取出字典物件的鍵值和對應值</h2>
<hr>

<script>
capitalOf = new ActiveXObject("Scripting.Dictionary");	// 建構一個空的字典物件
capitalOf.Add("Taiwan", "Taipei");		// 加入第 1 個對應關係
capitalOf.Add("USA", "Washington");		// 加入第 2 個對應關係
capitalOf.Add("Korea", "Seoul");		// 加入第 3 個對應關係

document.writeln("<p>使用 Keys() 取出鍵值:<br>");
allKeys = (new VBArray(capitalOf.Keys())).toArray();   // 取出鍵值
for (i=0; i<capitalOf.Count; i++)
	document.writeln(allKeys[i]+"<br>");
	
document.writeln("<p>使用 Items() 取出對應值:<br>");	
allItems = (new VBArray(capitalOf.Items())).toArray();   // 取出對應值
for (i=0; i<capitalOf.Count; i++)
	document.writeln(allItems[i]+"<br>");
</script>

<hr>
</body>
</html>

在上述範例中,由 Keys() 或 Items() 所傳回的物件並不能直接使用,必須轉成 VBArray 之後,再用 toArray() 轉成 JavaScript 的陣列,這種拐彎抹角的作法,筆者猜測是因為字典物件本來就是 VBScript 的內建物件,在 JavaScript(嚴格地說,應該是微軟的JScript)反而是新進才加入的物件,因而很多支援都還籠罩在 VBScript 的陰影下,所以也只好將就一下。

常用到字典物件的方法還有 Exists()(測試某鍵值是否存在)和 RemoveAll(刪除所有的項目),請見下列範例:

Example(dict04.htm):

此範例原始碼如下:

原始檔(dict04.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用 Exists() 和 RemoveAll() 的字典物件的方法</h2>
<hr>

<script src=listDict.js></script>
<script>
capitalOf = new ActiveXObject("Scripting.Dictionary");	// 建構一個空的字典物件
capitalOf.Add("Taiwan", "Taipei");		// 加入第 1 個對應關係
capitalOf.Add("USA", "Washington");		// 加入第 2 個對應關係
capitalOf.Add("Korea", "Seoul");		// 加入第 3 個對應關係
listDict(capitalOf, "capitalOf");		// 列印字典物件

key="Taiwan";
if (capitalOf.Exists(key))	// 測試 "Taiwan" 是否是字典物件 capitalOf 的鍵值
	document.writeln("\"" + key + "\" is a key of \"capitalOf\".<br>");
else
	document.writeln("\"" + key + "\" is NOT a key of \"capitalOf\".<br>");
key="Japan";
if (capitalOf.Exists(key))	// 測試 "Japan" 是否是字典物件 capitalOf 的鍵值
	document.writeln("\"" + key + "\" is a key of \"capitalOf\".<br>");
else
	document.writeln("\"" + key + "\" is NOT a key of \"capitalOf\".<br>");
	
capitalOf.RemoveAll();			// 刪除所有項目
listDict(capitalOf, "capitalOf");	// 列印字典物件(應該印不出來,因為所有項目都被刪掉了!)
</script>

<hr>
</body>
</html>


JavaScript 程式設計與應用:用於網頁用戶端