迹忆客 专注技术分享

使用 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 方法以及任何其他数组方法来迭代数组。