Set 和 Map：ES6 中的秘密武器，让数据处理更轻松

前端

2023-10-31 17:34:32

Set 和 Map：提升数据管理和处理的 JavaScript 利器

Set：有序且唯一的集合

Set 是 JavaScript 中一种无序的集合，专门用于存储唯一值。换句话说，每个值在 Set 中只能出现一次。这种特性使 Set 非常适合用于消除重复元素，或者存储不允许重复的数据，例如用户 ID 或订单编号。

关键特性：

无序性： Set 中元素的顺序是不可预测的，无法通过索引直接访问元素。
唯一性： Set 中的每个元素必须是独一无二的，尝试添加重复元素会自动忽略。
引用类型： Set 的成员只能是引用类型，而不能是基本类型的值。

应用场景：

去除重复元素： Set 可以轻松地从数组或对象中去除重复元素，从而得到一个不重复的数据集合。
检测元素是否存在： Set 可以快速检测某个元素是否存在，无需遍历整个集合。
集合操作： Set 支持集合操作，例如并集、交集和差集，这些操作在数据处理中非常有用。

Map：键值对的容器

Map 是 JavaScript 中一种键值对的容器，可以存储任意类型的值，并且键和值都可以是任何类型。这使得 Map 非常适合存储复杂的数据结构，例如对象或数组。

关键特性：

键值对： Map 中的每个元素都是一个键值对，键用于唯一地标识元素，值则存储实际的数据。
任意类型： Map 的键和值都可以是任何类型，包括引用类型和基本类型。
有序性： Map 中的键值对是有序的，这意味着可以通过索引来访问元素。

应用场景：

对象存储： Map 可以存储复杂的对象，并且可以通过键值对的方式访问数据，这比使用传统的对象更方便。
数据转换： Map 可以轻松地将数据从一种格式转换为另一种格式，例如将 JSON 数据转换为对象。
缓存： Map 可以用作缓存，因为它可以快速地查找和检索数据，从而提高应用程序的性能。

使用示例

Set：

// 创建一个 Set
const set = new Set([1, 2, 3, 4, 5]);

// 添加一个元素
set.add(6);

// 检查元素是否存在
console.log(set.has(3)); // true

// 遍历 Set
for (const item of set) {
  console.log(item); // 1, 2, 3, 4, 5, 6
}

Map：

// 创建一个 Map
const map = new Map([
  ["name", "John"],
  ["age", 30],
  ["city", "New York"]
]);

// 获取值
console.log(map.get("name")); // John

// 设置值
map.set("age", 31);

// 删除值
map.delete("city");

// 遍历 Map
for (const [key, value] of map) {
  console.log(`${key}: ${value}`); // name: John, age: 31
}