在 JavaScript 中遍历 Map

Anika Tabassum Era 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中遍历 Map 的通用方法
  2. 使用 for of 循环遍历 JavaScript 中的 Map
  3. 使用 forEach 方法遍历 Map
在 JavaScript 中遍历 Map

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]);
    }
} 

输出:

遍历 Map 的一般方法

使用 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);
}

输出:

使用 for-of 遍历 Map

使用 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);
});

输出:

使用 forEach 方法遍历 Map

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相关文章 - JavaScript Map