typescript map遍历key

原创

mob64ca12d652c7 2023-12-06 16:26:40 ©著作权

文章标签 键值对数组 typescript 文章分类 TypeScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d652c7的原创作品，请联系作者获取转载授权，否则将追究法律责任

TypeScript Map遍历key

在 TypeScript 中，我们经常会使用 Map 来存储键值对。Map 是一种集合类型，它允许我们使用任意类型的值作为键，并且可以通过键来访问对应的值。当我们需要遍历 Map 的键时，可以使用不同的方法来实现。

本文将介绍 TypeScript 中 Map 遍历键的几种常见方法，并提供相应的代码示例。

方法一：使用 for...of 循环

使用 for...of 循环是一种遍历 Map 键的简单而直观的方法。它可以遍历 Map 的键值对，并且提供了键的直接访问。

下面是一个使用 for...of 循环遍历 Map 键的示例代码：

const map = new Map<number, string>();
map.set(1, "one");
map.set(2, "two");
map.set(3, "three");

for (const key of map.keys()) {
  console.log(key);
}

在上述代码中，我们首先创建了一个 Map 对象，并向其中添加了几个键值对。然后使用 for...of 循环遍历 Map 的键，并通过 map.keys() 方法获取键的迭代器。在循环体内，我们可以直接访问键并进行相应的操作。

方法二：使用 forEach 方法

Map 对象的 forEach 方法可以用于遍历键值对，并执行指定的回调函数。我们可以通过在回调函数中使用第一个参数来访问键。

下面是一个使用 forEach 方法遍历 Map 键的示例代码：

const map = new Map<number, string>();
map.set(1, "one");
map.set(2, "two");
map.set(3, "three");

map.forEach((value, key) => {
  console.log(key);
});

在上述代码中，我们使用 forEach 方法遍历 Map 的键值对，并在回调函数中访问键并进行相应的操作。

方法三：使用 for...in 循环

在 JavaScript 中，我们可以使用 for...in 循环来遍历对象的属性。在 TypeScript 中，Map 也可以被视为一种对象类型，并且可以使用 for...in 循环来遍历其键。

下面是一个使用 for...in 循环遍历 Map 键的示例代码：

const map = new Map<number, string>();
map.set(1, "one");
map.set(2, "two");
map.set(3, "three");

for (const key in map) {
  if (map.hasOwnProperty(key)) {
    console.log(key);
  }
}

在上述代码中，我们使用 for...in 循环遍历 Map 的键，并通过 map.hasOwnProperty(key) 来确保只获取 Map 自身的属性，并排除原型链上的属性。

方法四：使用 Array.from 方法

Array.from 方法可以将一个可迭代对象转换为一个数组，并且可以传入一个映射函数来对数组元素进行转换。在 TypeScript 中，我们可以将 Map 的键转换为数组，并进行进一步的操作。

下面是一个使用 Array.from 方法遍历 Map 键的示例代码：

const map = new Map<number, string>();
map.set(1, "one");
map.set(2, "two");
map.set(3, "three");

const keys = Array.from(map.keys());
console.log(keys);

在上述代码中，我们使用 Array.from 方法将 Map 的键转换为数组，并将结果赋值给一个变量。然后可以对数组进行进一步的操作，如打印或遍历。