迹忆客 专注技术分享

大多数编程语言都有一种数据结构，允许你以键值格式存储数据。例如，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 方法总是一个更好的主意。