TypeScript Map

TypeScript map 是在 JavaScript 的 ES6 版本中添加的一个新的数据结构。它允许我们以键值对的形式存储数据，并记住键的原始插入顺序，类似于其他编程语言。在 TypeScript map 中，我们可以使用任何值作为键或值。

在 TypeScript 中创建 Map

语法

示例

Map 是使用 Map 构造函数创建的，如下所示，我们还可以为更好地类型安全提供 类型注释。

输出

User Roles are Map(3) {
  'admin' => 'Full Access',
  'editor' => 'Edit Access',
  'viewer' => 'Read-Only Access'
}

说明： 这里，我们创建了一个名为 userRoles 的新 Map，它存储一个字符串键和字符串值的键值对。其他数据类型也可以用作键。userRoles map 包含 3 个键值对。console.log 语句将 map 对象打印到控制台。

Map 方法

下面列出了 TypeScript map 方法

1. map.set(key, value)

set() 方法向 Map 对象添加或更新一个元素，它接受一个键和一个值作为参数。如果该键已存在，它将更新该值。因此，此方法将返回更新后的 map，使您能够调用任何进一步的操作，链式返回。

语法

输出

Student Marks are Map(3) { 
'Alice' => 85, 
'Bob' => 92, 
'Charlie' => 78 
}

说明

当您想动态添加键值对时，可以使用 set() 方法。

2. map.get(key)

它返回 Map 中键的值。如果未找到匹配的键，则返回 undefined。

语法

输出

Role is Editor
Role is undefined

说明

另一个重要的常用方法是 get()，用于获取与键关联的值。它总是需要检查键是否存在。首先，我们使用 has(key) 检查 get() 的结果，以防止在访问未定义时出现错误。

3. map.has(key)

has() 方法返回一个布尔值，该值指示 Map 是否包含指定的键。

语法

输出

true
false

说明

当您想在找到键时采取行动时，这特别有用。它允许您在执行 get() 或 delete() 等操作之前安全地进行检查。

4. map.delete(key)

delete() 方法删除 Map 对象和指定 Map 对象的键。如果找到该键并将其删除，则返回 true，否则返回 false。

语法

输出

true
false
Map(2) { 'IN' => 'India', 'UK' => 'United Kingdom' }

说明

delete() 返回一个非负整数，用于删除不需要的条目，也用于管理内存。这在诸如缓存等应用程序中特别有用，我们需要清除旧条目。

5. map.size

size 返回 Map 中键值对的数量。它是一个只读属性。

语法

输出

2

说明

此属性有助于随时获取 map 中存在的元素数量。它非常适合条件逻辑、分页或跟踪基于内存的缓存内的增长。

6. map.clear()

clear() 方法从 Map 对象中删除所有元素。调用此方法后，Map 将为空。

语法

输出

Product Size is 2
Product Size is 0

说明

当您需要创建一个新的 map 再次重用时，clear() 将很有用。它在以下情况下特别有用：

• 清除缓存
• 重置状态
• 重新启动会话

它是一个高级操作，这意味着在使用它清除 map 时要小心。

迭代 Map 数据

我们可以通过使用 'for...of' 循环来迭代 map 键或值或条目。以下示例有助于更清楚地理解它。

输出

Map Keys= Rakesh
Map Keys= Abhishek
Map Keys= Amit
Map Values= 40
Map Values= 25
Map Values= 30
The Map Enteries are: 
Rakesh 40
Abhishek 25
Amit 30

TypeScript Map vs. Object

在一些基本方面，Map 与标准的 JavaScript 对象 不同

• 键的灵活性： 对象的键只能是字符串或符号，但 Map 可以有任何数据类型的键，例如数字、对象、布尔值、数组和函数。
• 顺序保留： Map 对象保留其键值条目的顺序。当我们在意元素的顺序时，这一点至关重要。
• 大小跟踪： Map 大小属性是一个直接的数字，因此它返回 map 中元素的数量，这很容易获取，但对于对象，必须进行计数操作。
• 迭代支持： Maps 默认是可迭代的。您可以像 for 循环一样遍历它们，或者使用 forEach()、keys()、values() 和 entries() 等方法。

Typescript Map 的优点

1. 允许任何数据类型作为键

由于普通对象仅接受字符串或符号作为键，因此 Map 接受任何 数据类型 作为键，甚至是对象、数组、函数或数字，这使开发人员在处理更复杂的数据结构趋势方面有所作为。

2. 维护插入顺序

Map 维护您插入条目的顺序。这对于我们使用数据顺序的情况非常方便，例如按接收或记录的顺序显示元素。

3. 直接访问大小

使用 .size 属性，获取条目数量对于 Map 来说非常容易和高效，而对于对象，我们需要采取额外的步骤来计算大小，例如 Object.keys()。

4. 改进了对频繁更新的性能

对于需要频繁添加、删除或查找键值对的场景，map 比对象更有效，尤其是在性能关键型应用程序中。

TypeScript Map 的缺点

1. 无法直接进行 JSON 序列化

在 JSON 中，Map 实例不能直接转换为 stringify()，这意味着它们必须首先转换为原始对象或数组，这在您有 API 调用或持久性交互时会使事情变得复杂。

2. 键访问没有点表示法

Map 不允许使用点表示法访问值，这意味着您必须在所有交互中调用 get() 和 set() 等方法，这对于某些开发人员来说可能会感到陌生。

3. 内存使用量略高

对于小型数据集，它可能比普通对象使用更多的内存。这可能是在内存敏感的环境中的一个考虑因素。

常见问题解答 (FAQ)

1. TypeScript 中的 Map 可以有重复的键吗？

不，因为 Map 不能有多个相同的键。当您使用已存在的键设置值时，它会覆盖现有值。

2. Map 比对象快吗？

在普通对象中，键始终是字符串，如果您想使用数字作为键，则必须将其转换为字符串，但在 Map 中，键可以是任何类型，因此如果您经常添加、删除和查找键，并且您的数据很大，则 Map 比普通对象快。

3. 如果我将对象用作 Map 中的键会发生什么？

使用对象作为键在 Map 中有效且有效，但对象按引用进行比较，而不是按结构进行比较。相同内容的两个不同实例被视为不同的键。

4. Map 在所有浏览器中都受支持吗？

是的，Map 引入于 ECMAScript 2015 (ES6) 中，该版本在所有新浏览器和 JavaScript 引擎中都有使用。