HOWTO · JavaScript
在 JavaScript 中创建字典并添加键值对
本文介绍了如何在 JavaScript 中创建字典并向其中添加键值对。
本页内容
JavaScript 没有专门的字典数据类型。要将字符串键映射到值，对象通常是实用的选择：对象的属性将键和值关联起来，程序运行时也可以添加或修改这些属性。对象的键是字符串或符号；其他用作属性键的值会转换为字符串。如果需要保留键的类型，或需要专为频繁添加和删除条目而设计的集合，可以考虑使用 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 属性。
