如何在 js 中循环遍历地图 - Javascript

循环遍历地图在前端开发中是非常常见的需求。Javascript 提供了几种方式来遍历地图，让我们来一一探讨。

for...in 循环

for...in 循环可以遍历对象中的每一个属性。在遍历地图时，对象的 key 可以作为地图的索引，value 则代表对象存储的地图值。以下是一个 for...in 循环的示例代码：

const map = new Map();
map.set("A", 1);
map.set("B", 2);
map.set("C", 3);

for (let key in map) {
  console.log(key + " = " + map[key]);
}

注意：在遍历时，for...in 循环还会遍历对象的原型链上的属性，因此需要使用 hasOwnProperty 方法来排除非自身属性。

for (let key in map) {
  if (map.hasOwnProperty(key)) {
    console.log(key + " = " + map[key]);
  }
}

forEach 循环

forEach 循环是 Array 原型链上的方法，可以遍历每个数组元素。由于 Map 继承自 Object，我们可以使用 Object.entries 方法将 Map 转换为数组，再使用 forEach 循环进行遍历。以下是一个 forEach 循环的示例代码：

const map = new Map();
map.set("A", 1);
map.set("B", 2);
map.set("C", 3);

Object.entries(map).forEach(([key, value]) => {
  console.log(key + " = " + value);
});

for...of 循环

for...of 循环是 ES6 新增的循环语法，可以遍历 Iterable 对象，包括 Map。以下是一个 for...of 循环的示例代码：

const map = new Map();
map.set("A", 1);
map.set("B", 2);
map.set("C", 3);

for (const [key, value] of map) {
  console.log(key + " = " + value);
}

以上是 JavaScript 中遍历 Map 的三种方式，根据自身场景选择合适的方式进行遍历即可。