HOWTO · JavaScript
在 JavaScript 中建立字典並新增鍵值對
本文介紹瞭如何在 JavaScript 中建立字典並向其中新增鍵值對。
本頁內容
JavaScript 沒有專用的字典資料型別。若要建立由字串鍵對應至值的映射，物件通常是實用的選擇：物件的屬性會將鍵與值配對，程式執行期間也能新增或修改屬性。物件的鍵是字串（或 symbol）；其他用作屬性鍵的值會轉換為字串。若需要保留鍵的型別，或需要專為頻繁新增與移除項目設計的集合，可以改用 Map。
使用 JavaScript 物件模擬字典
當項目有具名鍵時，例如使用者名稱、設定或產品 ID，可以用物件表示字典。每個屬性會儲存一個值。這種做法適合依已知鍵直接查詢，但物件也有繼承而來的屬性，因此在將某個鍵視為字典項目之前，請先確認它屬於該物件。下方動態鍵範例中的自有屬性檢查會示範這項差異。
使用物件字面量建立字典
物件字面量會直接使用大括號建立物件，不需要 new。若要稍後再填入映射內容，請使用 {}；也可以在大括號內列出初始屬性。符合 JavaScript 識別字規則的屬性名稱可以不加引號；名稱含有空格或標點符號時，則應加上引號。
本節中的程式碼以及顯示的標籤或輸出仍為英文。
const person = {};
const profile = {
name: "Shiv",
age: 21,
job: "Freelancer",
skills: "JavaScript",
};
person 一開始沒有任何自有項目；profile 一開始有四個。const 會阻止變數重新指派，但不會凍結物件，因此仍可新增或更新其屬性。
新增、更新及讀取屬性
屬性名稱固定且符合識別字規則時，請使用點記法。指派值時，若該屬性不存在就會建立它；若已存在，則會取代原值。讀取時也使用相同記法。名稱不符合識別字規則時，請使用中括號並在其中放入加引號的字串。
本節中的程式碼以及顯示的標籤或輸出仍為英文。
const settings = {};
settings.theme = "light"; // Add a property
settings.theme = "dark"; // Update that property
const selectedTheme = settings.theme; // Read its value
執行這些陳述式後，selectedTheme 的值會是 "dark"。屬性指派不能寫成通用的 [key] = value 宣告；請在物件後接點記法或中括號記法，例如 settings.theme 或 settings["theme"]。
使用中括號記法處理動態鍵
中括號記法接受運算式，因此鍵來自變數時適合使用這種寫法。屬性名稱含有空格或標點符號時，也可以使用中括號記法。使用 Object.hasOwn() 可區分直接儲存在物件上的項目與繼承而來的屬性。若較舊的環境不支援此方法，可以使用 Object.prototype.hasOwnProperty.call(object, key) 執行相同的自有屬性檢查。
執行以下範例：
本節中的程式碼以及顯示的標籤或輸出仍為英文。
const scores = { Ada: 10 };
const player = "Lin";
scores[player] = 12;
scores.Ada = 11;
const linScore = scores[player];
const hasLin = Object.hasOwn(scores, player);
console.log(linScore, hasLin, scores.Ada);
查詢會使用 player 的值作為鍵。自有屬性檢查確認 Lin 儲存在 scores 上；最後的運算式則讀取 Ada 更新後的分數。
執行瀏覽器範例
這個瀏覽器頁面一開始有三個項目。選取按鈕後，頁面會使用點記法新增一個屬性，再用動態中括號鍵新增另一個，接著顯示結果物件。這個範例是選用的：在瀏覽器外的 JavaScript 程式碼中，也能執行相同的物件操作。
本節中的程式碼以及顯示的標籤或輸出仍為英文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dictionary in JavaScript</title>
</head>
<body>
<pre id="before"></pre>
<button id="add-pairs" type="button">Add new key-value pairs</button>
<pre id="after"></pre>
<script>
const dict = { key_1: 1, key_2: "2", key_3: 3 };
document.getElementById("before").textContent = JSON.stringify(dict, null, 2);
document.getElementById("add-pairs").addEventListener("click", () => {
dict.new_key = "new_value";
const anotherKey = "another_new_key";
dict[anotherKey] = "another_value";
document.getElementById("after").textContent = JSON.stringify(dict, null, 2);
});
</script>
</body>
</html>
圖片顯示範例一開始的項目、新增鍵值對按鈕，以及選取按鈕後顯示的項目。程式碼與值仍可選取並複製。
瀏覽器範例顯示類似字典的初始物件，以及新增的 new_key 和 another_new_key 屬性。
