TypeScript Map

最后修改日期：2025 年 3 月 15 日

TypeScript Map 存储键值对，同时保留插入顺序。与对象不同，Map 允许任何类型的键，并提供内置方法以进行高效的数据管理。本教程将通过实际示例介绍 Map 的创建、操作和常用方法。

什么是 TypeScript Map？

Map 是一个键值对集合，其中键可以是任何类型（对象、原始值）。Map 维护插入顺序，并提供用于添加、检索和检查元素的方法。它们使用 Map<K, V> 语法声明。

创建 Map

此示例展示了如何在 TypeScript 中创建和初始化 Map。

creating_maps.ts

const userRoles = new Map<number, string>();
userRoles.set(1, 'Admin');
userRoles.set(2, 'Editor');

const productPrices = new Map<string, number>([
    ['Laptop', 999],
    ['Mouse', 29]
]);

console.log(userRoles);    // Map(2) {1 => 'Admin', 2 => 'Editor'}
console.log(productPrices); // Map(2) {'Laptop' => 999, 'Mouse' => 29}

Map 可以为空创建，也可以使用键值对数组进行初始化。类型参数指定键和值的类型以确保类型安全。

添加和更新条目

此示例演示了添加和修改 Map 条目。

adding_entries.ts

const inventory = new Map<string, number>();
inventory.set('Apples', 50);
inventory.set('Oranges', 30);

// Update quantity
inventory.set('Apples', 45);

console.log(inventory); // Map(2) {'Apples' => 45, 'Oranges' => 30}

set() 方法用于添加或更新条目。现有键将被覆盖，新键将被添加到 Map 中。

访问值

此示例展示了如何从 Map 中检索值。

accessing_values.ts

const capitals = new Map<string, string>([
    ['France', 'Paris'],
    ['Japan', 'Tokyo']
]);

console.log(capitals.get('Japan'));  // Output: Tokyo
console.log(capitals.get('Germany')); // Output: undefined

使用 get() 按键检索值。如果键不存在，则返回 undefined。

检查键是否存在

此示例演示了检查 Map 中是否存在键。

checking_keys.ts

const colors = new Map<string, string>([['red', '#FF0000']]);

console.log(colors.has('red'));   // true
console.log(colors.has('blue'));  // false

has() 方法检查 Map 中是否存在某个键，返回一个布尔值。在使用未知键进行访问时，这对于防止错误至关重要。

移除条目

此示例展示了如何删除条目和清空 Map。

removing_entries.ts

const settings = new Map<string, boolean>();
settings.set('darkMode', true);
settings.set('notifications', false);

settings.delete('notifications');
console.log(settings); // Map(1) {'darkMode' => true}

settings.clear();
console.log(settings); // Map(0) {}

使用 delete() 删除特定条目，使用 clear() 删除所有条目。两者都会就地修改 Map。

遍历 Map

此示例演示了遍历 Map 条目的各种方法。

iterating_maps.ts

const users = new Map<number, string>([
    [101, 'Alice'],
    [102, 'Bob']
]);

// Using for...of with entries()
for (const [id, name] of users.entries()) {
    console.log(`${id}: ${name}`);
}

// Using forEach()
users.forEach((value, key) => {
    console.log(`${key} -> ${value}`);
});

Map 提供了 entries()、keys() 和 values() 方法用于迭代。forEach() 方法提供了基于回调的迭代。

Map 转换为数组

此示例将 Map 条目转换为数组以进行处理。

map_to_array.ts

const scoreboard = new Map<string, number>([
    ['Team A', 3],
    ['Team B', 5]
]);

const entriesArray = Array.from(scoreboard.entries());
const keysArray = Array.from(scoreboard.keys());

console.log(entriesArray); // [['Team A', 3], ['Team B', 5]]
console.log(keysArray);    // ['Team A', 'Team B']

Array.from() 将 Map 可迭代对象转换为数组。这对于与 map() 或 filter() 等数组方法集成很有用。

最佳实践

类型安全：在声明 Map 时始终指定键和值的类型。
键检查：在调用 get() 之前使用 has()，以避免出现 undefined 值。
对象键：谨慎使用对象作为键（引用很重要，内容无关）。
size 属性：使用 size 属性而不是手动跟踪。
迭代顺序：依赖于插入顺序的保留来进行有序数据处理。

来源

TypeScript Map 文档

本教程涵盖了 TypeScript 中 essential 的 Map 操作，为您的应用程序中的高效键值数据管理奠定了基础。

作者

Jan Bodnar 是一位经验丰富的开发人员和技术作家，精通多种编程语言。自 2007 年以来，他撰写了许多关于软件开发的教程和书籍，致力于让复杂的概念易于学习者理解。

列出所有 TypeScript 教程。

电子书