在 JavaScript 中创建关联数组

Alex Dulcianu 2023年10月12日
  1. 在 JavaScript 中使用 Map 对象创建一个关联数组
  2. 在 JavaScript 中使用泛型对象创建关联数组
在 JavaScript 中创建关联数组

大多数编程语言都有一种数据结构,允许你以键值格式存储数据。例如,Python 有允许你将字符串与值或值列表相关联的字典。

JavaScript 具有实现相同功能的 Map 对象,还请记住,此功能与旧浏览器不兼容。从历史上看,简单对象已被用于在 JavaScript 中创建关联数组,因为它们在技术上做同样的事情。

另一方面,为了这个目的使用泛型对象有时会让人很困惑。甚至 Map 方法也有其问题,特别是如果你不熟悉该语言并习惯于某些约定。

在 JavaScript 中使用 Map 对象创建一个关联数组

在 JavaScript 中处理关联数组的第一个也是最正确的方法是创建一个 Map 对象。与常规对象相比,这种方法有几个优点,例如键不限于字符串——它们可以是函数、其他对象以及几乎任何其他原语。

此外,Map 对象从一开始也是可迭代的。当然,你可以使用 for in 循环遍历对象的属性,但这并不总是一个优雅的解决方案。

因此,以下是在 JavaScript 中创建和填充关联数组的方法:

const myMap = new Map();

myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');

console.log([...myMap]);

输出:

[["firstItem", 1], ["secondItem", 2], ["thirdItem", "third"]]

要创建键/值条目,你可以使用 set() 方法。附带说明一下,上面代码中使用的 [...myMap] 语法是有效的,因为 Map 在后台实现了@@iterator 方法。这就是它与常规对象的不同之处,因为你必须创建一个显式的 for in 循环。

如果你想检索特定值,可以使用 get() 方法:

const myMap = new Map();

myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');

console.log(myMap.get('firstItem'));

输出:

1

其他有用的方法包括 has(),它检查你的 Map 对象是否具有特定键,以及 delete(),它允许你从对象中删除键。

在 JavaScript 中处理 Map 对象时避免使用括号表示法

我们都知道 JavaScript 充满了奇怪的行为,不幸的是,Map 对象也不例外。

如果你有一些 Python 的背景,你可能会想使用类似 myMap["firstItem"] = 1 来设置 Map 键/值对。在处理泛型对象时,这也是一种有效的方法。

好消息是这不会导致任何错误,而且一开始它似乎会按预期工作。这是使用括号符号重构的上述示例:

const myMap = new Map();

myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';

console.log(myMap);

输出:

[object Map] {
  firstItem: 1,
  secondItem: 2,
  thirdItem: "third"
}

坏消息是这不再是同一类型的数据结构。相反,这已被转换为通用对象。因此,如果你遍历 Map,它将不再起作用。

此外,has() 方法也不会返回所需的结果,如下面的代码所示:

const myMap = new Map();

myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';

console.log(myMap.has('firstItem'));

输出:

false

总之,在处理 Map 时应避免使用方括号表示法;否则,你的代码可能无法按预期工作。

在 JavaScript 中使用泛型对象创建关联数组

直到几年前,上面描述的 Map 方法还不能与大多数浏览器兼容,因此程序员使用泛型对象来代替。从理论上讲,这种方法没有任何问题,但如果向后兼容性不是问题,在大多数情况下你应该尝试使用 Map

以下是在 JavaScript 中使用对象创建关联数组的方法:

const myMap = {};

myMap.firstItem = 1;
myMap.secondItem = 2;
myMap.thirdItem = 'third';

console.log(myMap);

输出:

{ firstItem: 1, secondItem: 2, thirdItem: "third"}

在这里,我们使用点符号向我们的对象添加属性。如果你喜欢使用字符串作为键,如果你的字符串包含空格,此方法将无法按预期工作。

对于这些情况,你可以使用如下详述的括号方法:

const myMap = {};

myMap['first item'] = 1;
myMap['second item'] = 2;
myMap['third item'] = 'third';

console.log(myMap);

输出:

{ first item: 1, second item: 2, third item: "third"}

JavaScript 接受这两种方法在某些情况下可能会再次变得非常混乱。如果你真的想在关联数组中使用字符串作为键,那么括号表示法是可行的方法,因为点表示法具有高度限制性。

另一方面,方括号表示法使 JavaScript 对象看起来更像经典字典,而事实并非如此。因此,只要有机会,使用 Map 方法总是一个更好的主意。