如何在 TypeScript 中迭代 Map

TypeScript 3月前 35

使用 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
}

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

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

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

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

forEach 方法返回 undefined。

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

循环允许我们迭代可迭代对象，如 Maps、Sets 和数组。

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

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