如何遍历 Typescript 中的 map：for...in？ 为了……的？ 为每个？

Question

我试图了解在 Typescript 中迭代 map 的语法。 我的 map 中的键是字符串。 这些值为字符串的 arrays。

这是一些示例代码：

let attributeMap: Map<string, string[]> = new Map<string, string[]>();

// sample data
let sampleKey1 = "bob";

// populate map
let value: string[] = attributeMap.get(sampleKey1) || [];
value.push("clever");
attributeMap.set(sampleKey1, value);

value = attributeMap.get(sampleKey1) || [];
value.push("funny");
attributeMap.set(sampleKey1, value);


// try looping through the map
for (let key in attributeMap) {
    console.log(attributeMap.get(key));
    console.log("WE'RE IN THE MAP!");
}

console.log("done");

当我运行这段代码时，唯一打印的是“完成”。

为什么 map 中没有任何内容被打印，也没有“我们在地图中”的消息？ 就好像永远不会进入 for 循环一样。 为什么会这样，我将如何解决这个问题？

Answer 1

当您将密钥设置为 Maps 时，密钥不会被放入 Map 实例 - 它们内部存储在 Map 中，并且只能通过使用各种 Z46F3EA056CAA3126B91F3F70BEEA068C 迭代方法之一访问。 for..in仅直接在object 或其原型上迭代属性。

要遍历 Map，请尝试以下操作：

for (const [key, value] of attributeMap.entries()) {
  console.log(key, value);
}

当您的集合是一个普通的 object 本身具有键值对的 object 时， for..in是有意义的，但不适用于以不同方式存储数据的 Maps。

当属性直接位于 object 上时，语法通常如下所示：

someObj.someProp = 'someVal';

这会将someProp属性放到someObj object 上。

但是地图将其数据存储在 Map 的 [[MapData]]内部插槽中，而不是直接存储在 Map 的不同属性上。

就像理论练习一样，在 JS 中，您可以将属性直接放在 Map 实例上，然后用for..in对其进行迭代（基本上，将 map 滥用为 ZA8CFDE6331BD59EB2666F8911CB 拥有：

const map = new Map();
map.foo = 'bar';
for (const prop in map) {
  // ...
}

但这是一种反模式，永远不应该这样做。 Either use an object and set/retrieve properties with dot and bracket notation (and other object methods like Object.entries ), or use a Map and set/retrieve properties with Map.get and Map.set and the other Map methods.