TypeScript Map

注意: 如果您是 TypeScript 新手，请先查看我们的 TypeScript 入门 教程。

TypeScript 中的 map 是一个内置对象，用于存储键值对。

Map 会记住键的原始插入顺序。因此，迭代它会按照添加的顺序返回键。

let idStudents: Map<number, string> = new Map();

// Add elements
idStudents.set(1, "Luke");
idStudents.set(2, "Leia");

console.log(idStudents);

// Output: Map(2) { 1 => 'Luke', 2 => 'Leia' }

创建 TypeScript Map

要创建 Map，可以使用 new Map() 构造函数。例如，

// Create an empty map 
let scores: Map<string, number> = new Map();

console.log(scores);

输出

Map(0) {}

这里，scores 是一个空的 map，还没有任何元素。

向 Map 插入项

创建空 map 后，可以使用 set() 方法向其中插入元素。例如，

let scores: Map<string, number> = new Map();

// Add elements
scores.set("Alice", 85);
scores.set("Bob", 92);

console.log(scores);

输出

Map(2) { 'Alice' => 85, 'Bob' => 92 }

这里，我们将两个条目添加到了 scores map 中。

// Create an empty Map
let map = new Map<object, object>();

// Create an object to use as key
let obj = {};

// Insert an object as key-value pair
map.set(obj, { name: "John", age: 27 });

// Get the value using the object key
console.log(map.get(obj));

{ name: 'John', age: 27 }

Map 操作

1. 访问 Map 元素

要访问 Map 元素，可以使用 get() 方法。例如，

let studentInfo = new Map<string, string>();
studentInfo.set("name", "Jack");

// Access value of the "name" key
let result = studentInfo.get("name");

console.log(result);

输出

Jack

这里，studentInfo.get("name") 检索 name 键的值。

2. 检查 Map 元素

可以使用 has() 方法检查元素是否存在于 map 中。例如，

let map1 = new Map<string, object>();
map1.set('info', { name: 'Jack', age: 26 });

// Check if 'info' key exists in the map
console.log(map1.has('info')); // true

在此示例中，如果键存在，has() 返回 true。否则，它返回 false。

3. 删除 Map 元素

要删除 map 元素，可以使用 delete() 方法。delete() 方法返回

• true - 如果指定的键/值对存在并且已被删除
• false- 如果元素不存在

例如，

let studentInfo = new Map<string, string>();
studentInfo.set("name", "Jack");
studentInfo.set("subject", "Biology");

console.log("Before deletion:", studentInfo);

// Delete the "subject" key
let wasDeleted = studentInfo.delete("subject");

// Check if the deletion was successful
console.log(wasDeleted); // true

console.log("After deletion:", studentInfo);

输出

Before deletion: Map(2) { 'name' => 'Jack', 'subject' => 'Biology' }
true
After deletion: Map(1) { 'name' => 'Jack' }

这里，我们使用 delete() 方法从 studentInfo map 中删除了 subject 键。

请注意，wasDeleted 变量的值为 true，因为 subject/Biology 对已被删除。

let studentInfo = new Map<string, string>();
studentInfo.set("name", "Jack");
studentInfo.set("subject", "Biology");

// Remove all elements
studentInfo.clear();

console.log(studentInfo);

Map(0) {}

遍历 Map

您可以使用 for...of 循环遍历 Map 元素。例如，

let studentInfo: Map<string, string | number> = new Map();

studentInfo.set("name", "Jack");
studentInfo.set("score", 98);
studentInfo.set("subject", "Biology");

// Iterate over entries using for...of
for (let [key, value] of studentInfo) {
    console.log(`${key}: ${value}`);
}

输出

name: Jack
score: 98
subject: Biology

let studentInfo: Map<string, string | number> = new Map();

studentInfo.set("name", "Jack");
studentInfo.set("score", 98);
studentInfo.set("subject", "Biology");

// Iterate over the map using forEach
studentInfo.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

name: Jack
score: 98
subject: Biology

let studentInfo: Map<string, string | number> = new Map();

studentInfo.set("name", "Jack");
studentInfo.set("score", 98);
studentInfo.set("subject", "Biology");

// Get all keys using keys()
for (let key of studentInfo.keys()) {
    console.log(key);
}

name
score
subject

let studentInfo: Map<string, string | number> = new Map();

studentInfo.set("name", "Jack");
studentInfo.set("score", 98);
studentInfo.set("subject", "Biology");

// Get all values using values()
for (let value of studentInfo.values()) {
    console.log(value);
}

Jack
98
Biology

Map 方法

TypeScript 提供了各种内置的 Map 方法来执行有用的操作。其中一些是

我们到目前为止已经使用了大部分方法。现在，让我们看下面的示例，它说明了 entries() 和 has() 方法的用法。

// Create a Map with string keys and string values
let map: Map<string, string> = new Map();

// Add elements using set()
map.set("food", "pizza");
map.set("price", "$50");

// Use has() to check if the 'food' key exists
console.log(map.has("food")); // true

// Iterate over entries 
for (let [key, value] of map.entries()) {
    console.log(`${key}: ${value}`);
}

输出

true
food: pizza
price: $50

这里，

• map.has("food") - 返回 true，因为键 food 存在于 map 中
• map.entries() - 遍历 map 中的所有条目，显示每个键及其关联值

TypeScript WeakMap

WeakMap 类似于 Map。但是，WeakMap 只能包含对象作为键。例如，

let weakMap: WeakMap<object, string> = new WeakMap();
console.log(weakMap);

let obj = {};

// Adding object (element) to WeakMap
weakMap.set(obj, 'hello');

console.log(weakMap); 

let weakMap: WeakMap<object, string> = new WeakMap();

// Adding string "obj" as a key to WeakMap
weakMap.set("obj", "hello");

WeakMap 方法

TypeScript 提供了各种内置的 WeakMap 方法，例如

示例：WeakMap 方法

let weakMap: WeakMap<object, string> = new WeakMap();

let obj = {};

// Use set() to add an object (element) to WeakMap
weakMap.set(obj, "hello");

console.log(weakMap); // WeakMap { <items unknown> }

// Use get() to get the element of a WeakMap 
console.log(weakMap.get(obj)); // hello

// Use has() to check if an element is present in WeakMap
console.log(weakMap.has(obj)); // true

// Use delete() to delete the element of WeakMap
console.log(weakMap.delete(obj)); // true

console.log(weakMap); // WeakMap { <items unknown> }

这里，

• set(obj, "hello") - 将对象 obj 添加为 WeakMap 中的键，并具有值 "hello"。
• get(obj) - 从 WeakMap 中检索与键 obj 关联的值（"hello"）。
• has(obj) - 检查键 obj 是否存在于 WeakMap 中，返回 true，因为它存在
• delete(obj) - 从 WeakMap 中删除键为 obj 的键值对，返回 true 表示删除成功。

注意： WeakMap 在所有现代浏览器中都得到支持，但其内容被故意隐藏，并且它不可迭代。如果您以非常旧的浏览器（如 IE11 或更早版本）为目标，请在使用前检查兼容性。

let countryInfo: Map<string, string> = new Map();
countryInfo.set("countryName", "Japan");

// Check size of the map
console.log(countryInfo.size); // 1

let weakMap: WeakMap<object, string> = new WeakMap();
console.log(weakMap);

let obj = {};
weakMap.set(obj, "hello");

console.log(weakMap);

// Attempt to iterate
// Throws an error
for (let item of weakMap) {
    console.log(item);
}

另请阅读

• TypeScript forEach 循环