Map 和 Set 的遍历方式：用代码欣赏 JavaScript 强大的数据结构

Map的遍历方式

Map 是 JavaScript 中的一种数据结构，它允许您将键值对存储在一个对象中。Map 中的键可以是任何值，而值可以是任何类型的数据。

1. 使用 forEach() 方法遍历 Map

forEach() 方法是遍历 Map 最简单的方法之一。它接受一个回调函数作为参数，该函数将在 Map 的每个键值对上被调用。

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

map.forEach((value, key) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

2. 使用 for ... of 循环遍历 Map

for ... of 循环是一种更现代的方式来遍历 Map。它与 forEach() 方法非常相似，但语法更简洁。

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

for (const [key, value] of map) {
  console.log(`Key: ${key}, Value: ${value}`);
}

3. 使用 Map.entries() 方法遍历 Map

Map.entries() 方法返回一个包含 Map 中所有键值对的迭代器。您可以使用该迭代器来手动遍历 Map。

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const iterator = map.entries();

for (const entry of iterator) {
  const [key, value] = entry;
  console.log(`Key: ${key}, Value: ${value}`);
}

4. 使用 Map.keys() 和 Map.values() 方法遍历 Map

Map.keys() 和 Map.values() 方法分别返回一个包含 Map 中所有键和值的迭代器。您可以使用这些迭代器来遍历 Map 的键或值。

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const keys = map.keys();
for (const key of keys) {
  console.log(`Key: ${key}`);
}

const values = map.values();
for (const value of values) {
  console.log(`Value: ${value}`);
}

Set的遍历方式

Set 是 JavaScript 中的一种数据结构，它允许您存储一组唯一的值。Set 中的值可以是任何类型的数据。

1. 使用 forEach() 方法遍历 Set

forEach() 方法是遍历 Set 最简单的方法之一。它接受一个回调函数作为参数，该函数将在 Set 中的每个值上被调用。

const set = new Set(['a', 'b', 'c']);

set.forEach((value) => {
  console.log(`Value: ${value}`);
});

2. 使用 for ... of 循环遍历 Set

for ... of 循环是一种更现代的方式来遍历 Set。它与 forEach() 方法非常相似，但语法更简洁。

const set = new Set(['a', 'b', 'c']);

for (const value of set) {
  console.log(`Value: ${value}`);
}

3. 使用 Set.values() 方法遍历 Set

Set.values() 方法返回一个包含 Set 中所有值的迭代器。您可以使用该迭代器来手动遍历 Set。

const set = new Set(['a', 'b', 'c']);

const iterator = set.values();

for (const value of iterator) {
  console.log(`Value: ${value}`);
}

结论

Map 和 Set 是 JavaScript 中非常有用的数据结构。它们提供了比数组和对象更灵活和高效的存储和操作数据的方式。了解如何遍历 Map 和 Set 可以帮助您更好地掌握 JavaScript 的数据结构并编写更优化的代码。