如何遍历 Map 和 Set？

推荐答案

Map 的遍历：

1. for...of 循环： 可以直接遍历 Map 的键值对，每次迭代得到一个 [key, value] 的数组。

   const myMap = new Map([['a', 1], ['b', 2], ['c', 3]]);
   for (const [key, value] of myMap) {
     console.log(key, value);
   }

2. forEach() 方法： 可以使用 Map 对象的 forEach() 方法，它接受一个回调函数，该回调函数接收三个参数：值（value）、键（key）和 Map 对象本身。

   myMap.forEach((value, key) => {
     console.log(key, value);
   });

3. keys(), values(), entries() 迭代器: 可以分别获取键、值和键值对的迭代器，然后使用 for...of 循环遍历。

   // www.javascriptcn.com code example
   for (const key of myMap.keys()) {
      console.log(key);
   }
   
   for (const value of myMap.values()) {
     console.log(value);
   }
   
   for (const [key, value] of myMap.entries()) {
     console.log(key, value);
   }

Set 的遍历：

1. for...of 循环： 可以直接遍历 Set 的值，每次迭代得到 Set 中的一个值。

   const mySet = new Set([1, 2, 3]);
   for (const value of mySet) {
     console.log(value);
   }

2. forEach() 方法： 可以使用 Set 对象的 forEach() 方法，它接受一个回调函数，该回调函数接收三个参数：值（value），值（value），和 Set 对象本身。注意，Set的forEach回调中键和值是一样的。

   mySet.forEach((value) => {
     console.log(value);
   });

3. values(), keys(), entries() 迭代器： Set 对象的 values() 和 keys() 返回的是相同的迭代器，都是值的迭代器。entries()返回的是键值对的迭代器，但是键值对的键和值是相同的。

   // www.javascriptcn.com code example
   for (const value of mySet.values()) {
      console.log(value)
   }
   
   for (const value of mySet.keys()){
      console.log(value)
   }
   
   for (const [key, value] of mySet.entries()) {
     console.log(key, value);
   }

本题详细解读

Map 遍历详解

Map 对象是一种键值对的集合，它允许使用任何值（包括对象和原始值）作为键。遍历 Map 对象主要有以下几种方式：

1. for...of 循环：

   • 这是最简洁和常用的遍历方式。
   • 它直接遍历 Map 的条目，每次迭代会返回一个 [key, value] 的数组。
   • 示例中，通过 const [key, value] of myMap 可以直接解构出键和值。
   • 适用于需要同时访问键和值的情况。

2. forEach() 方法：

   • forEach 方法接受一个回调函数作为参数，该回调函数会被 Map 中的每个条目调用一次。
   • 回调函数接收三个参数：值、键、以及 Map 对象本身。
   • 适用于只需要访问值或者键，或需要额外操作 Map 对象本身的情况。

3. 使用迭代器：

   • keys() 方法返回一个包含 Map 中所有键的迭代器。
   • values() 方法返回一个包含 Map 中所有值的迭代器。
   • entries() 方法返回一个包含 Map 中所有 [key, value] 条目的迭代器。
   • 这些迭代器可以使用 for...of 循环进行遍历。
   • 适用于需要分别访问键、值或者键值对的情况。

Set 遍历详解

Set 对象是一种值的集合，它不允许重复的值。遍历 Set 对象主要有以下几种方式：

1. for...of 循环：

   • 最简洁的遍历方式，直接遍历 Set 中的值。
   • 每次迭代会返回 Set 中的一个值。
   • 适用于只需要访问值的情况。

2. forEach() 方法：

   • 与 Map 的 forEach 方法类似，接受一个回调函数作为参数，该回调函数会被 Set 中的每个值调用一次。
   • 回调函数接收三个参数：值（value），值（value），和 Set 对象本身。需要注意的是，Set 的 forEach 回调中，键和值实际上是相同的，都是值本身。
   • 适用于需要在遍历过程中执行其他操作的情况。

3. 使用迭代器：

   • values() 方法返回一个包含 Set 中所有值的迭代器。
   • keys() 方法返回一个包含 Set 中所有值的迭代器。（注意：Set 的键和值是相同的）
   • entries() 方法返回一个包含 [value, value] 键值对的迭代器，即键和值是相同的。
   • for...of 循环可以用来遍历这些迭代器。
   • Set 的迭代器通常在需要统一使用迭代器的时候使用。