如何在 Typescript: for...in 中迭代映射？为了……的？对于每个？

Question

我试图理解在 Typescript 中迭代映射的语法。我的地图中的键是字符串。这些值是字符串数组。

这是一些示例代码：

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");

当我运行此代码时，唯一打印的内容是“完成”。

为什么地图上没有打印任何内容，也没有显示“我们在地图上”的消息？就好像 for 循环从未进入过一样。这是为什么？我该如何解决这个问题？

Answer 1

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

要迭代 Map，请尝试这样的操作：

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

for..in当您的集合是对象本身具有键值对的普通对象时，这是有意义的，但对于 Maps 来说则不然，因为 Maps 以不同的方式存储数据。

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

someObj.someProp = 'someVal';

这会将someProp属性添加到对象上someObj。

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

正如理论练习一样，在 JS 中，您可以将属性直接放在 Map 实例上，然后对其进行迭代for..in（基本上，将地图滥用为具有自己属性的对象）：

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

但这完全是一种反模式，永远不应该这样做。使用对象并通过点和括号表示法（以及其他对象方法，如Object.entries）来设置/检索属性，或者使用 Map 并通过Map.get和Map.set以及其他 Map 方法来设置/检索属性。