JavaScript Map VS Object

在 JavaScript 中，我们经常需要处理键值对。当提到键值对时，最常用的策略是利用对象来存储键值对，但是ECMAScript 2015 引入了一个名为 Map 的特性，它也用于存储键值对。

本文将深入理解JavaScript Map 与 Object 的区别。在 JavaScript 中，Map 和 Object 都用于将数据作为动态集合来存储键值对。让我们分别理解 Map 和 Object。

什么是 Map？

ES6 是一个脚本语言标准，它引入了一个名为“Map”的方法。Map 是一种数据结构，在 JavaScript 中用于存储不重复数据的集合，形式为键值对，这意味着 Map 无法存储重复的数据。

以下是构造 JavaScript Map 的语法

什么是对象？

Object 与 Map 非常相似，即它是一种用于存储不重复数据的键值对形式的数据结构。Object 和 Map 之间存在一些细微的差别，我们将在本文后面进行学习。

以下是构造 JavaScript Object 的语法

Map 与 Object 对比

1. 基于构造方式

构造 Map

Map 只能通过一种方式创建，如下所示：

代码

输出

构造 Object

在 JavaScript 中，我们可以通过多种方式创建 Object，如下所示：

• 构造函数：我们可以利用构造函数创建一个 Object。

代码

输出

在下面的输出中，我们可以看到一个空的 Object。

• 字面量：我们可以利用字面量创建一个 Object。

代码

输出

正如我们可以在下面的输出中看到的，一个 Object 已经被创建。

• create：我们可以利用字面量创建一个 Object。

代码

输出

我们可以在下面的结果中看到创建的 Object。

2. 基于访问元素的方式

• Map 使用 get() 函数，这是一个内置函数，用于访问元素。

语法

• Object 使用“键”的名称和“点”运算符来访问 Object 的元素。

语法

3. 基于键的类型

• Map 包含键值对，其中键可以是任何类型，如原始类型、函数或对象。
• Object 包含键值对，其中键只能是字符串类型。即使你定义了其他类型的键，它也会被转换为字符串。

4. 基于如何检查键是否已存在

• Map 使用 has() 函数，这是一个内置函数，用于检查键是否存在。

语法

has() 函数返回一个布尔值，即 true 或 false。

• Object 使用“===”运算符来执行此任务。

语法

它返回一个布尔值，true 或 false。

5. 基于如何添加新元素

• Map 使用 set() 函数来添加新元素。

语法

• Object 直接添加新元素。

语法

6. 基于如何获取大小

• 虽然 Map 会自动更新大小，但我们可以使用以下语法来获取大小。

语法

• Object 使用 Object.keys() 来获取大小。

语法

它返回元素的大小。

7. 基于如何删除元素

• Map 使用delete() 函数来移除元素。

语法

• Object 使用delete 关键字来删除元素的属性。

语法

8. 基于如何读取键值对

• Map 使用keys() 函数获取键列表，values() 函数获取值列表，entries() 函数获取键值对。

语法

输出

• Object 使用keys() 方法获取键，values() 方法获取值，entries() 方法获取键值对。

语法

输出

9. 基于迭代

• 有多种迭代元素的方式，但我们将使用for() 循环和forEach() 循环来迭代 Map 中的元素。

使用 for() 循环的语法

使用 forEach() 循环的语法

• 有多种迭代元素的方式，但我们将使用for() 循环和forEach() 循环来迭代 Object 中的元素。

使用 for() 循环的语法

使用 forEach() 循环的语法

10. 基于它们转换为 JSON

• Map 不支持 JSON，因为 Map 是一个哈希表，因此需要创建一个解析器来将 Map 转换为 JSON。
• Object 支持 JSON，并允许直接将 Object 转换为 JSON。

基于我们上面已经讨论过的原因，我们可以说 Map 比 Object 更受青睐。

结论

我们在本文中了解了JavaScript Map 与 Object 的区别。Map 和 Object 都用于以键值对的形式存储数据，但它们在方式上有所不同。Map 和 Object 之间的主要区别在于 Map 使用复杂数据类型作为键，而 Object 只使用字符串数据类型。