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 程式設計與應用：用於網頁用戶端