JavaScript 关联数组解析：对象、用法及关键区别

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 介绍

JavaScript 是 Web 开发中必不可少的编程语言之一。它拥有众多特性，其中“关联数组”是一种重要的数据结构，能够帮助实现高效的数据管理和处理。

本文将详细阐述 JavaScript 关联数组的概念，从基础到进阶用法都有涉及。文中提供了代码示例，即使是初学者也能轻松理解，请将本文作为实用参考使用。

2. 什么是关联数组？

2.1 关联数组的定义

关联数组是一种以“键‑值”对形式管理数据的数据结构。普通数组使用索引号（0、1、2、…）访问元素，而关联数组则允许使用任意字符串键来访问数据。

2.2 JavaScript 中的关联数组

在 JavaScript 中，关联数组通过 对象 来实现。对象使用大括号 {} 定义，并以键‑值对的形式存储数据。

下面是一个在 JavaScript 中的关联数组的基本示例。

let user = {
  name: "Sato",
  age: 25,
  email: "sato@example.com"
};

2.3 关联数组与普通数组的区别

关联数组与普通数组在以下方面有所不同。

2.4 使用场景

普通数组适用于管理列表式的数据，而关联数组则便于处理具有特定属性的数据，例如用户信息或配置设置。

3. 如何创建关联数组

3.1 使用对象字面量声明

在 JavaScript 中创建关联数组最常见的方式是使用对象字面量。

let product = {
  id: 101,
  name: "Laptop PC",
  price: 120000
};

3.2 使用 new Object() 创建

另一种方式是通过 new Object() 来创建对象。

let product = new Object();
product.id = 101;
product.name = "Laptop PC";
product.price = 120000;

3.3 动态添加键和值

使用方括号表示法，还可以将变量作为键来添加键值对。

let key = "color";
let product = {};
product[key] = "red";

4. 操作关联数组

4.1 添加元素

使用点表示法添加

let user = {};
user.name = "Tanaka";
user.age = 30;

使用方括号表示法添加

let user = {};
user["email"] = "tanaka@example.com";

4.2 读取元素

使用点表示法读取

console.log(user.name); // "Tanaka"

使用方括号表示法读取

console.log(user["email"]); // "tanaka@example.com"

4.3 更新元素

通过给相同的键赋予新值，即可更新已有的值。

user.age = 35;
console.log(user.age); // 35

4.4 删除元素

使用 delete 关键字可以删除键‑值对。

delete user.phone;
console.log(user.phone); // undefined

5. 遍历关联数组

5.1 使用 for…in 循环遍历

for...in 循环可以遍历关联数组的键。

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}

5.2 使用 Object.keys() 与 forEach()

可以通过 Object.keys() 获取键数组，然后使用 forEach() 进行遍历。

Object.keys(user).forEach(key => {
  console.log(key + ": " + user[key]);
});

5.3 使用 Object.entries() 与 for…of

借助 Object.entries()，可以同时遍历键和值。

for (let [key, value] of Object.entries(user)) {
  console.log(key + ": " + value);
}

6. 对关联数组进行排序

6.1 按键排序

JavaScript 对象本身不能直接排序，但可以对其键进行排序，然后按排序后的顺序访问对应的值。

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

let sortedKeys = Object.keys(user).sort();
sortedKeys.forEach(key => {
  console.log(key + ": " + user[key]);
});

6.2 按值排序

要按值排序，可使用 Object.entries() 将对象转换为键值对数组。

let scores = {
  Alice: 85,
  Bob: 92,
  Charlie: 88
};

let sortedEntries = Object.entries(scores).sort((a, b) => a[1] - b[1]);
sortedEntries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

6.3 排序时的重要注意事项

当值以字符串形式存储时，数值排序需要显式转换。

let data = {
  a: "10",
  b: "2",
  c: "15"
};

let sorted = Object.entries(data).sort((a, b) => Number(a[1]) - Number(b[1]));
console.log(sorted);

7. 使用关联数组时的重要注意事项

7.1 键重复与覆盖

如果同一个键被定义多次，后面的值会覆盖前面的值。

let user = {
  name: "Tanaka",
  age: 30
};

user.name = "Sato";
console.log(user.name); // "Sato"

7.2 undefined 与键存在性检查

要检查关联数组中是否存在某个键，可使用 in 运算符或 hasOwnProperty() 方法。

let user = { name: "Tanaka" };
console.log("age" in user); // false
console.log(user.hasOwnProperty("age")); // false

7.3 push 方法不可使用

关联数组（对象）不支持 push() 方法，该方法仅适用于普通数组。

let user = {};
user.push({ name: "Tanaka" }); // TypeError: user.push is not a function

7.4 与 JSON 数据的区别

JavaScript 对象与 JSON 数据相关但并不相同。对象必须转换为 JSON 字符串才能进行数据交换。

let obj = { name: "Tanaka", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData); // '{"name":"Tanaka","age":30}'

let parsed = JSON.parse(jsonData);
console.log(parsed.name); // "Tanaka"

8. 小结

8.1 关联数组的关键要点

• 数据通过键值对进行管理。
• 可以灵活进行添加、获取、更新和删除等操作。
• 关联数组支持通过内置方法进行遍历和排序。

8.2 实际使用示例

下面示例展示了如何使用数组结合关联数组来处理多个用户对象。

let users = [
  { id: 1, name: "Tanaka", email: "tanaka@example.com" },
  { id: 2, name: "Sato", email: "sato@example.com" }
];

users.forEach(user => {
  console.log(user.name);
});

9. FAQ – 常见问题解答

Q1. 关联数组与普通数组有什么区别？

普通数组使用数值索引，而关联数组使用字符串键来访问值。

let arr = ["apple", "orange"];
console.log(arr[1]); // "orange"

let fruits = { apple: "apple", orange: "orange" };
console.log(fruits["orange"]); // "orange"

Q2. 如何检查键是否存在？

可以使用 in 运算符来检查键的存在性。

if ("age" in user) {
  console.log(user.age);
}

10. 最终总结

JavaScript 关联数组在管理和组织数据方面极其有用。
本文涵盖了从基础概念到更高级使用模式的全部内容。

后续步骤：

• 亲自运行代码示例，以加深理解。
• 尝试将关联数组与 JSON 数据及 API 操作结合使用。