迹忆客 专注技术分享

Map 有两个组件，键和值。遍历 Map 对象的可用技术最初获取键，然后遍历值或值。此循环终止直到最后一个 Map 键，并且它的值被迭代（仅当你在此之前没有终止）。

在这里，我们将重点介绍进行迭代的最简单方法。ES6 之前用于迭代 Map 对象的方法具有相对较长的代码行，而 ES6 带来了完成工作的新的简单方法。在下一节中，我们将讨论它们。

在 JavaScript 中遍历 Map 的通用方法

对于这个例子，我们将采用一个对象，每个键都有一个数组值。我们将使用 for in 循环来获取对象并对其进行迭代。接下来，在 for in 范围内，我们将运行一个普通的 for 循环来迭代对象键的数组元素。

让我们检查代码和输出以便更好地理解。

var fruitMap = {
  fruits: ['Grape', 'Orange', 'Strawberry'],
  taste: ['sour', 'tangy', 'sweet']
};
for (var m in fruitMap) {
  console.log(fruitMap[m]);
  for (var i = 0; i < fruitMap[m].length; i++) {
    console.log(fruitMap[m][i]);
  }
}

输出：

使用 for of 循环遍历 JavaScript 中的 Map

在 for of 循环的情况下，我们将创建一个带有破坏性赋值的变量 duo，它将在每次迭代后解包键和值。在这里，我们将有一个 Map 构造函数的实例 tasteMap。

此外，我们将使用适当的键和值对加载对象实例。tasteMap.entries() 显式返回键值对的可迭代对象。

让我们跳到代码来猜测结果。

var tasteMap = new Map();
tasteMap.set('Grape', 'sour');
tasteMap.set('Strawberry', 'sweet');
tasteMap.set('Tomato', 'tangy');

for (var [key, value] of tasteMap.entries()) {
  console.log(key + ' = ' + value);
}

输出：

使用 forEach 方法遍历 Map

这里我们介绍了一种流行的 ES6 Map 迭代方式。这种方法就像使用键和值这两个参数触发一个函数一样简单。你已经准备好用几行代码迭代和遍历这些对了。

代码片段：

var tasteMap = new Map();
tasteMap.set('Grape', 'sour');
tasteMap.set('Strawberry', 'sweet');
tasteMap.set('Tomato', 'tangy');

tasteMap.forEach(function(key, val) {
  console.log(key + ' ' + val);
});

输出：