ES6 中的 Map 和 Set 详解

随着 JavaScript 的发展，ES6 推出了许多新语法和数据结构，其中包括了我们今天要讨论的 Map 和 Set。在本篇文章中，我们将详细了解这两个数据结构的用法以及如何在实际开发中使用它们。

Map

Map 是一种键值对的集合，其中每个键和值都可以是任意类型的数据。它是 ES6 中新增的一个数据结构，相较于 JavaScript 中原有的 Object 来说，Map 有以下优点：

• 可以使用任意类型的数据作为键值，包括对象、数组等
• Map 中存储键值对的顺序是有序的，而 Object 中顺序是无序的
• Map 可以方便地获取键值对的数量，而 Object 则需要手动遍历计算

创建 Map

我们可以使用 new Map() 来创建一个空的 Map，也可以传入一个数组作为参数来创建一个包含键值对的 Map。

// javascriptcn.com 代码示例
// 创建空的 Map
const map1 = new Map();

// 创建包含键值对的 Map
const map2 = new Map([
  ['name', 'Alice'],
  ['age', 20],
  [{ city: 'Beijing' }, 'Lily']
]);

在创建包含键值对的 Map 时，每个键值对都通过一个数组来表示，该数组中包含两个元素，第一个元素为键，第二个元素为值。

基本操作

Map 支持以下常用操作：

set(key, value)

向 Map 中添加新的键值对，如果该键已存在，则会覆盖原来的值。

const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
map.set('name', 'Bob');
console.log(map); // Map(2) { 'name' => 'Bob', 'age' => 20 }

get(key)

获取指定键对应的值，如果该键不存在，则返回 undefined。

const map = new Map();
map.set('name', 'Alice');
console.log(map.get('name')); // 'Alice'
console.log(map.get('age')); // undefined

has(key)

判断指定键是否存在于 Map 中，如果存在则返回 true，否则返回 false。

const map = new Map();
map.set('name', 'Alice');
console.log(map.has('name')); // true
console.log(map.has('age')); // false

delete(key)

从 Map 中删除指定键值对，如果删除成功则返回 true，否则返回 false。

const map = new Map();
map.set('name', 'Alice');
console.log(map.delete('name')); // true
console.log(map.delete('age')); // false

clear()

清空 Map 中的所有键值对。

const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
map.clear();
console.log(map.size); // 0

size

获取 Map 中键值对的数量。

const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
console.log(map.size); // 2

迭代器

Map 支持以下迭代器方法：

keys()

返回一个包含 Map 中所有键的迭代器。

const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
for (const key of map.keys()) {
  console.log(key);
}
// 'name'
// 'age'

values()

返回一个包含 Map 中所有值的迭代器。

const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
for (const value of map.values()) {
  console.log(value);
}
// 'Alice'
// 20

entries()

返回一个包含 Map 中所有键值对的迭代器。

const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
for (const [key, value] of map.entries()) {
  console.log(key, value);
}
// 'name' 'Alice'
// 'age' 20

forEach(callbackFn[, thisArg])

对 Map 中的每个键值对执行指定的回调函数，可以传入第二个参数指定回调函数中的 this 对象。回调函数中的参数依次为 value、key 和 Map 本身。

const map = new Map();
map.set('name', 'Alice');
map.set('age', 20);
map.forEach(function(value, key, map) {
  console.log(key, value);
});
// 'name' 'Alice'
// 'age' 20

Set

Set 是一种无序且不重复的集合，其中每个元素都是唯一的。它也是 ES6 中新增的一个数据结构，相较于 JavaScript 中原有的 Array 来说，Set 有以下优点：

• Set 中的元素不允许重复，可以有效地去除数组中的重复元素
• Set 的查找和删除操作比 Array 更高效

创建 Set

我们可以使用 new Set() 来创建一个空的 Set，也可以传入一个数组作为参数来创建一个包含元素的 Set。

// 创建空的 Set
const set1 = new Set();

// 创建包含元素的 Set
const set2 = new Set([1, 2, 3]);

基本操作

Set 支持以下常用操作：

add(value)

向 Set 中添加新的元素，如果该元素已存在，则不会产生影响。

const set = new Set();
set.add(1);
set.add(2);
set.add(1);
console.log(set); // Set(2) { 1, 2 }

has(value)

判断指定元素是否存在于 Set 中，如果存在则返回 true，否则返回 false。

const set = new Set();
set.add(1);
console.log(set.has(1)); // true
console.log(set.has(2)); // false

delete(value)

从 Set 中删除指定元素，如果删除成功则返回 true，否则返回 false。

const set = new Set();
set.add(1);
console.log(set.delete(1)); // true
console.log(set.delete(2)); // false

clear()

清空 Set 中的所有元素。

const set = new Set();
set.add(1);
set.add(2);
set.clear();
console.log(set.size); // 0

size

获取 Set 中元素的数量。

const set = new Set();
set.add(1);
set.add(2);
console.log(set.size); // 2

迭代器

Set 支持以下迭代器方法：

values()

返回一个包含 Set 中所有元素的迭代器。

const set = new Set();
set.add(1);
set.add(2);
for (const value of set.values()) {
  console.log(value);
}
// 1
// 2

keys()

与 values() 方法一样。

entries()

返回一个包含 Set 中所有元素的迭代器，同时对于 Set 中的每个元素，键和值都是该元素本身。

const set = new Set();
set.add(1);
set.add(2);
for (const [key, value] of set.entries()) {
  console.log(key, value);
}
// 1 1
// 2 2

forEach(callbackFn[, thisArg])

对 Set 中的每个元素执行指定的回调函数，可以传入第二个参数指定回调函数中的 this 对象。回调函数中的参数依次为 value、key 和 Set 本身。

const set = new Set();
set.add(1);
set.add(2);
set.forEach(function(value, key, set) {
  console.log(key, value);
});
// 1 1
// 2 2

实际应用

我们可以通过 Map 和 Set 来优化一些常见的问题，例如去除数组中的重复元素、统计字符串中每个字符的出现次数等。

去除数组中的重复元素

使用 Set 可以方便地去除数组中的重复元素。

const arr = [1, 2, 1, 3, 2, 4];
const set = new Set(arr);
console.log([...set]); // [1, 2, 3, 4]

统计字符串中每个字符的出现次数

使用 Map 可以方便地统计字符串中每个字符的出现次数。

const str = 'hello world';
const map = new Map();
for (const char of str) {
  const count = map.get(char) || 0;
  map.set(char, count + 1);
}
console.log(map); // Map(9) { 'h' => 1, 'e' => 1, 'l' => 3, 'o' => 2, ' ' => 1, 'w' => 1, 'r' => 1, 'd' => 1 }

总结

Map 和 Set 是 ES6 中新增的两个数据结构，它们在实际开发中有着广泛的应用，如去重、键值对管理、数据统计等。在开发过程中，我们可以灵活地使用这两个数据结构来提高代码的可读性和性能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658393fbd2f5e1655de713d0