JavaScript 中如何迭代 Map

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

const map1 = new Map([
  ['country', 'Chile'],
  ['age', 30],
]);

// ?️ Using forEach
map1.forEach((value, key) => {
  console.log(value, key); // ?️ Chile country, 30 age
});

// ?️ Using for...of
for (const [key, value] of map1) {
  console.log(key, value); // ?️ country Chile, age 30
}

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

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

在第一个示例中,我们使用 Map.forEach 方法迭代 Map 中的键/值对。

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

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

forEach 方法返回 undefined

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

const map1 = new Map([
  ['country', 'Chile'],
  ['age', 30],
]);

for (const [key, value] of map1) {
  console.log(key, value); // ?️ country Chile, age 30
}

for...of 循环允许我们迭代可迭代对象,如 Map、Set 和数组。

我们使用解构赋值来分配键和值变量。

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

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

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

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

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

如果要将 Map 的值转换为数组,可以使用 Array.from 方法,例如 能够使用 forEach 方法。

const map1 = new Map([
  ['country', 'Chile'],
  ['age', 30],
]);

// ?️️ ['country, 'age']
const keys = Array.from(map1.keys());
// ?️️ ['Chile', 30]
const values = Array.from(map1.values());

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

const map1 = new Map([
  ['country', 'Chile'],
  ['age', 30],
]);

const keys = [...map1.keys()]; // ?️ ['country, 'age']
const values = [...map1.values()]; // ?️ ['Chile', 30]

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

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