如何在 TypeScript 中迭代 Map

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

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

// ✅ 使用 forEach
map1.forEach((value, key) => {
  console.log(value, key);
});

// ✅ 使用 for...of
for (const [key, value] of map1) {
  console.log(key, value);
}

// ✅ 遍历 Map 的键
for (const key of map1.keys()) {
  console.log(key); // ?️ name, country, age
}

// ✅ 迭代 Map 的值
for (const value of map1.values()) {
  console.log(value); // ?️ Tom, Germany, 30
}

如何在 TypeScript 中迭代 Map

注意 ,我们在声明 Map 时使用了泛型来键入 Map。 我们将 Map 的键设置为字符串类型,并将其值设置为字符串或数字类型。

我们使用 Map.forEach 方法来迭代 Map 中的键/值对。

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

  • 当前迭代的 value
  • 当前迭代的 key
  • 正在迭代的 Map 对象

forEach 方法返回 undefined

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

循环允许我们迭代可迭代对象,如 MapsSets 和数组

我们在声明键和值变量时使用了解构赋值。

const [key, value] = ['Tom', 'Germany'];
console.log(key); // ?️ Tom
console.log(value); // ?️ Germany

如果我们必须使用 break 关键字过早退出循环,那么 for...of 循环可能是我们的首选方法。 forEach 方法不支持使用 break 关键字。

for...of 循环仅迭代对象自身的属性,而 for…in 循环也迭代继承的属性。

在我们的第 3 和第 4 个示例中,我们使用 Map.keys() 和 Map.values() 方法来获取包含 Map 的键和值的可迭代对象。

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

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 方法。

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

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

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()];

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

我们现在可以使用 forEach 方法迭代数组,以及任何其他数组内置方法。