如何在 TypeScript 中迭代地图

作者

在 TypeScript 中迭代一个 Map

How to Iterate over a Map in TypeScript

使用该forEach()方法迭代MapTypeScript 中的 a。该
forEach方法采用一个函数，该函数为Map. Map该函数在每次迭代时都会传递值、键和对象。

索引.ts
const map1 = new Map<string, string | number>([
  ['name', 'Tom'],
  ['country', 'Germany'],
  ['age', 30],
]);

// ✅ Using forEach
map1.forEach((value, key) => {
  console.log(value, key); // 👉️ Tom name, Germany country, 30 age
});

// ✅ Using for...of
for (const [key, value] of map1) {
  console.log(key, value); // 👉️ name Tom, country Germany, age 30
}

// ✅ Iterate over a Map's keys
for (const key of map1.keys()) {
  console.log(key); // 👉️ name, country, age
}

// ✅ Iterate over a Map's values
for (const value of map1.values()) {
  console.log(value); // 👉️ Tom, Germany, 30
}

请注意，我们
在声明它时使用了泛型
来键入 the 。Map我们将 Map 的键设置为类型 of
string，将其值设置为类型stringor number。

我们使用
Map.forEach
方法迭代Map.

我们传递给方法的函数使用以下 3 个参数调用：

  • 当前value迭代的
  • 当前key迭代的
  • 被迭代的Map对象

该forEach方法返回undefined。

在我们的其他示例中，我们使用了
for…of
循环。

循环允许我们迭代可迭代对象，如映射、集合和数组。

我们

在声明和变量时使用了解构赋值。keyvalue

索引.ts
const [key, value] = ['Tom', 'Germany'];
console.log(key); // 👉️ Tom
console.log(value); // 👉️ Germany

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

for...of循环仅遍历对象自身的属性，而循环for...in也遍历继承的属性。

在我们的第三个和第四个示例中，我们使用了
Map.keys()
和
Map.values()
方法来获取包含Map.

请注意，Map.keys()和Map.values()方法的返回值是数组，它们是迭代器对象。

索引.ts
const map1 = new Map<string, string | number>([
  ['name', 'Tom'],
  ['country', 'Germany'],
  ['age', 30],
]);

// 👇️ const keys: IterableIterator<string>
const keys = map1.keys();

// 👇️ const values: IterableIterator<string | number>
const values = map1.values();

如果要将值转换为数组，例如要使用该forEach方法，则可以使用
Array.from
方法。

索引.ts
const map1 = new Map<string, string | number>([
  ['name', 'Tom'],
  ['country', 'Germany'],
  ['age', 30],
]);

// 👇️ const keys: string[]
const keys = Array.from(map1.keys());

// 👇️ const values: (string | number)[]
const values = Array.from(map1.values());

另一种方法是使用
扩展运算符 (…)
将迭代器对象中的值解包到数组中。

索引.ts
const map1 = new Map<string, string | number>([
  ['name', 'Tom'],
  ['country', 'Germany'],
  ['age', 30],
]);

// 👇️ const keys: string[]
const keys = [...map1.keys()];

// 👇️ const values: (string | number)[]
const values = [...map1.values()];

最后 2 个示例实现了相同的目标。它们都将迭代器对象转换为数组。

您现在可以使用该forEach方法遍历数组，以及任何其他数组内置方法。

–

发表评论