TypeScript Map – 包含示例的完整指南

要在 TypeScript 中定义 Map 对象，请使用泛型来设置 Map 的键和值的类型。 我们添加到 Map 的所有键值对都必须符合指定的类型，否则类型检查器会抛出错误。

// 👇️ Map with string keys and string | number values
const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

map1.set('country', 'Germany');

const country = map1.get('country');
console.log(country); // 👉️ "Germany"

console.log(map1.has('name')); // 👉️ true

map1.delete('name');

console.log(map1.has('name')); // 👉️ false

console.log(map1.size); // 👉️ 2 (Map has 2 elements)

我们使用泛型来声明具有字符串键和字符串或数字值的 Map。

用于键入 Map 的语法是 – new Map<TypeOfKeys, TypeOfValues>()。 例如，new Map<number, string> 是一个 Map 对象，其键类型为 number，值类型为 string。

我们添加到 Map 中的所有键值对都必须符合指定的类型，否则会抛出错误。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

// ⛔️ Error: Argument of type 'boolean' is not
// assignable to parameter of type 'string | number'.ts(2345)
map1.set('country', true);

我们使用联合类型将 Map 的值设置为字符串或数字，但布尔值不是联合的成员，因此我们得到一个错误。

请注意 ，我们可以通过向其传递键值对数组来使用值初始化 Map。

因为我们已经将 Map 的值键入为字符串或数字，所以当我们使用 Map.get 方法时，我们将取回字符串、数字或未定义类型的值。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
  ['country', 'Germany'],
]);

// 👇️ const country: string | number | undefined
const country = map1.get('country');

if (typeof country === 'string') {
  console.log(country.toUpperCase());
}

country 变量可能是未定义的，因为 TypeScript 无法提前知道 Map 是否包含关键国家。

if 语句用作类型保护，因为它直接检查值的类型。 country 变量保证是 if 块中的字符串。

我们可以使用 Map.set 方法将键值对添加到 Map。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

map1.set('country', 'Germany');

console.log(map1.get('country')); // 👉️ "Germany"

console.log(map1.delete('country')); // 👉️ true

console.log(map1.has('country')); // 👉️ false

确保我们传递给 Map.set() 方法的键的类型和值的类型符合您在定义 Map 时指定的类型。

上面的代码片段展示了如何使用 Map.delete() 方法从 Map 中删除键值对。

如果 Map 对象中的元素存在且已被删除，则 Map.delete() 方法返回 true，否则返回 false。

如果 Map 中存在指定的键，则 Map.has() 方法返回 true。

我们可以使用 Map.forEach 方法在 TypeScript 中迭代 Map。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

map1.forEach((value, key) => {
  console.log(value, key); // 👉️ James name, 30 age
});

for (const [key, value] of map1) {
  console.log(key, value); // 👉️ name James, age 30
}

上面的代码片段显示了如何使用 Map.forEach() 方法和 for...of 循环来迭代 Map。

如果我们必须使用 break 关键字提前退出循环，则 for...of 循环可能是您的首选方法。 forEach 方法不支持使用 break 关键字。

我们可能经常需要将 Map 的键或值转换为数组，因为数组有许多有用的内置方法。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

const values = Array.from(map1.values());
console.log(values); // 👉️ ['James', 30]

const keys = Array.from(map1.keys());
console.log(keys); // 👉️ ['name', 'age']

我们使用 Map.values 方法获取包含 Map 值的迭代器对象。

我们将迭代器作为唯一参数传递给 Array.from 方法。

Array.from 方法将可迭代对象转换为数组并返回新的数组实例。

我们可能需要做的另一件常见事情是检查 Map 有多少元素。 Map.size 方法返回 Map 中的元素数。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

console.log(map1.size); // 👉️ 2

map1.set('country', 'Germany');

console.log(map1.size); // 👉️ 3

如果我们需要从 Map 对象中删除所有键值对，请使用 Map.clear 方法。

const map1 = new Map<string, string | number>([
  ['name', 'James'],
  ['age', 30],
]);

map1.clear();

console.log(map1.size); // 👉️ 0

火焰兔

海报 链接