TypeScript 地图 – 带示例的完整指南

TypeScript Map – Complete Guide with examples

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

索引.ts


// 👇️ 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>是一个具有 type 键和 typenumber值的Map 对象string。

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

索引.ts


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
方法时，我们将取回类型为string,number或的值undefined。

索引.ts


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变量是possible ，undefined因为 TypeScript 无法提前知道 Map 是否包含 key 。 country

该if语句用作
类型保护，因为它直接检查值的类型。country变量保证在块中string。if

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

索引.ts


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

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

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

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

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

您可以使用
Map.forEach
方法迭代 TypeScript 中的 Map。

索引.ts


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.

for...of如果您必须使用
break关键字过早地退出循环，循环可能是您的首选方法。break该方法不支持使用关键字forEach。

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

索引.ts


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
中的元素数。

索引.ts


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
方法。

索引.ts


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

map1.clear();

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

–