JavaScript 中的字典

2025 年 3 月 2 日 | 6 分钟阅读

JavaScript 中的字典简介

JavaScript 是一种用于 Web 开发的编程语言，它以极大的灵活性来实现这一点。字典也称为对象，它是基本数据结构之一。字典的用途是存储和操作键值对集合。在本文中，我们将介绍在 JavaScript 中创建称为字典的单词引用，如何处理它们以及它们的常用用法，并提供详细的、完全注释的代码示例。

什么是字典？

JavaScript 中的字典是一种对象，数据以键值对的形式存储。标识符是用于快速直接检索所需数据的键。在需要存储用户信息（例如配置设置或其他需要键访问的数据）的情况下，字典在将特定 ID 与相应值关联起来方面非常有用。

创建字典

在 JavaScript 中创建字典是一个简单的过程。您可以使用对象字面量或 Object 构造函数。

1. 使用对象字面量

对象字面量提供了一种简洁的方法来创建字典。

代码

 
// Creating a dictionary using object literals
const dictionary = {
  key1: "value1",  // key1 is associated with the string "value1"
  key2: "value2",  // key2 is associated with the string "value2"
  key3: "value3"   // key3 is associated with the string "value3"
};

console.log(dictionary);  // Output the entire dictionary to the console   

输出

 
{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
}

2. 使用 Object 构造函数

Object 构造函数仍可用于创建字典，但其使用频率远低于对象字面量。

代码

 
// Creating a dictionary using the Object constructor
const dictionary = new Object();  // Create a new, empty dictionary

dictionary.key1 = "value1";  // Assign "value1" to key1
dictionary.key2 = "value2";  // Assign "value2" to key2
dictionary.key3 = "value3";  // Assign "value3" to key3

console.log(dictionary);  // Output the entire dictionary to the console   

输出

 
{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
}

访问和修改字典元素

创建字典后，您就可以通过使用点表示法或括号表示法作为替代方法来访问和修改其元素。

1. 点表示法

点是点表示法表达式中唯一通过它们运行的字符，这使得它们非常简单明了。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

console.log(dictionary.key1);  // Access the value associated with key1
dictionary.key2 = "newValue2";  // Modify the value associated with key2
console.log(dictionary.key2);  // Output the modified value of key2   

输出

 
value1
newValue2

2. 括号表示法

当属性标识符不是有效的 JavaScript 标识符，或者属性名是某个 JS 表达式的结果时，括号表示法会很有用，因为在这些情况下只能使用括号表示法。这就是 JavaScript 在语法要求方面变得不那么严格，而是使用一种称为括号表示法的更灵活的语法。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

console.log(dictionary["key1"]);  // Access the value associated with key1 using bracket notation
dictionary["key2"] = "newValue2";  // Modify the value associated with key2 using bracket notation
console.log(dictionary["key2"]);  // Output the modified value of key2   

输出

 
value1
newValue2

添加和删除字典元素

Dict 对象是键值对的集合；可以使用 delete 加上一个空格，然后是键名来轻松添加新键值对或删除现有键值对。

1. 添加元素

但是，要将新的键值对附加到现有字典，只需用新键替换其值即可。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2"
};

dictionary.key3 = "value3";  // Add a new key-value pair
dictionary["key4"] = "value4";  // Add another new key-value pair using bracket notation

console.log(dictionary);  // Output the updated dictionary   

输出

 
{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": "value4"
}

2. 删除元素

建议使用 delete 运算符来执行此操作，因为从字典中删除元素的实际方法是通过 delete 关键字删除它。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

delete dictionary.key2;  // Delete the key-value pair associated with key2
delete dictionary["key3"];  // Delete the key-value pair associated with key3 using bracket notation

console.log(dictionary);  // Output the updated dictionary   

输出

 
{
  "key1": "value1"
}

检查键是否存在

许多开发人员认为检查对象中是否存在键是一种常见情况。您可以使用内置运算符或 hasOwnProperty 等其他方法手动完成。

1. 使用 in 运算符

in 运算符是对象成员，用于测试字典中键的存在性。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2"
};

console.log("key1" in dictionary);  // Check if key1 exists in the dictionary
console.log("key3" in dictionary);  // Check if key3 exists in the dictionary   

输出

 
true
false

2. 使用 hasOwnProperty 方法

hasOwnProperty() 方法如果字典对象包含指定的键作为其自身属性，则返回 true。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2"
};

console.log(dictionary.hasOwnProperty("key1"));  // Check if the dictionary has key1
console.log(dictionary.hasOwnProperty("key3"));  // Check if the dictionary has key3   

输出

 
true
false

遍历字典

遍历字典中所有键和相应值的几种方法是使用 for...in、Object.keys()、Object.values() 和 Object.entries()。

1. 使用 for...in

for...in 语句提供了一种遍历对象所有可枚举属性（包括内置属性和自身属性）的方法。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

for (let key in dictionary) {  // Iterate over all keys in the dictionary
  console.log(key, dictionary[key]);  // Output each key and its associated value
}   

输出

 
key1 value1
key2 value2
key3 value3

2. 使用 Object.keys()

Object.keys() 方法检索由对象键组成的列表。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

Object.keys(dictionary).forEach(key => {  // Iterate over the array of keys
  console.log(key, dictionary[key]);  // Output each key and its associated value
});   

输出

 
key1 value1
key2 value2
key3 value3

3. 使用 Object.values()

Object.values() 方法获取由对象值组成的列表。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"s
};

Object.values(dictionary).forEach(value => {  // Iterate over the array of values
  console.log(value);  // Output each value
});

输出

 
value1
value2
value3

4. 使用 Object.entries()

一种方法是使用 Object.entries() 函数，它返回一个由键和值对组成的数组。

代码

 
const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

Object.entries(dictionary).forEach(([key, value]) => {  // Iterate over the array of key-value pairs
  console.log(key, value);  // Output each key and its associated value
});   

输出

 
key1 value1
key2 value2
key3 value3

实际用例

1. 存储用户信息

用户字典对于存储用户的属性非常有效，因为每个键都包含一个用户属性。

代码

 
const user = {
  name: "John",  // User's name
  email: "john.usa@example.com",  // User's email
  age: 30,  // User's age
  isAdmin: false  // Whether the uaser is an admin
};

console.log(user.name);  // Output the user's name
console.log(user.email);  // Output the user's email   

输出

 
John 
john.usa@example.com

2. 配置设置

字典最适合保存应用程序的配置设置。

代码

 
const config = {
  apiEndpoint: "https://api.example.com",  // API endpoint URL
  timeout: 5000,  // Timeout duration in milliseconds
  debugMode: true  // Whether debug mode is enabled
};

console.log(config.apiEndpoint);  // Output the API endpoint URL
console.log(config.timeout);  // Output the timeout duration   

输出

 
https://api.example.com
5000

3. 缓存数据

当数据被排除以加快速度时，字典非常容易访问。

代码

 
const cache = {};  // Initialize an empty cache

function fetchData(key) {
  if (key in cache) {  // Check if the data is already cached
    return cache[key];  // Return the cached data
  } else {
    // Simulate fetching data from a database or API
    const data = `Data for ${key}`;  // Simulated data
    cache[key] = data;  // Cache the fetched data
    return data;  // Return the fetched data
  }
}

console.log(fetchData("item1"));  // Fetch data for item1 and cache it
console.log(fetchData("item1"));  // Retrieve the cached data for item1   

输出

 
Data for item1
Data for item1

结论

JavaScript 中的字典的工作方式类似于数组，数组用于存储相似数据，但通常用于更复杂、现实世界的数据，这些数据处理起来既笨拙又缓慢。

本文教我们如何以最简单的方式创建、修改和运行字典迭代器。我们已经研究了实际的练习，以便您能够清楚地了解它们的用途。字典的观点应该得到调整，以便教会学生如何使用 JavaScript 编写更有效、更健壮的代码。

下一个主题Javascript 正则表达式构造函数属性

JavaScript 中的字典