轻松入门：JavaScript 中的 Set 和 Map 数据结构

阳阳羊
80 阅读4分钟

前言

在 ES6 中，引入了两种新的数据结构—— Set 和 Map，它们分别提供了一种新的方式来处理集合和键值对。让我们一起了解它们的基本概念和用法。

Set：独特的集合

Set 是什么？

Set 是一种集合，类似于数组，但有一个重要的不同之处——Set 中的值是唯一的，不会有重复。

特点

  1. 无序性 ：Set 中的元素没有顺序，不能通过索引访问。这是因为 Set 不是基于索引的数据结构，而是基于值的数据结构。
  2. 唯一性 ：Set 中的元素必须是唯一的，不允许重复。如果尝试添加重复的元素，Set 会自动忽略。
  3. 方法和属性：Set 提供了一系列用于操作集合的方法，例如添加元素、删除元素、检查元素是否存在等。常见的方法包括 add、delete、has、size 等。
  4. 迭代器 ：Set 是可迭代的，可以使用 for...of 循环或 forEach 方法遍历集合中的元素。
  5. 初始化：可以通过传递一个可迭代对象（如数组）来初始化 Set，将其转换为 Set。

基本用法

//通过 `new Set()` 创建一个空的 Set
const mySet = new Set(); 

//添加元素
mySet.add(1); 
mySet.add(2);

// 重复的元素会被忽略 
mySet.add(1); 

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

// 删除元素 
mySet.delete(1);

// 获取集合的大小 
console.log(mySet.size); // 2 

// 遍历集合 
for (let item of mySet) {
    console.log(item); // 1 2
}

// 使用数组初始化 Set
let Set = new Set([1, 2, 3, 1, 2]);
console.log(Set); // Set { 1, 2, 3 }

Set 的应用

Set 在实际应用中非常有用，比如去除数组重复元素、集合操作（并集、交集、差集等）等。

//去除数组重复元素
let array = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(array)];
console.log(unique); // [3, 5, 2]

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

//集合求并集
let union = new Set([...a, ...b]);
console.log(union); // Set {1, 2, 3, 4}

//集合求交集
let intersect = new Set([...a].filter(x => b.has(x)));
console.log(intersect); // Set {2, 3}

//集合求差集
let difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference); // Set {1}

Map：灵活的键值对

Map 是什么？

Map 是一种键值对的集合，它允许我们使用各种类型的值作为键或值，提供了更灵活的数据存储和检索方式。

Map的特点

  1. 无序性：Map 中的元素也是无序的，不会按照插入的顺序排列，而是基于键值对的存储结构。与 Set 类似，Map 不支持通过索引直接访问元素。
  2. 唯一性：在 Map 中，键是唯一的，但值可以重复。每个键对应一个值，但不同的键可以映射到相同的值。这是与 Set 不同的地方，允许值的重复。
  3. 方法和属性：Map 提供了一系列操作键值对的方法，包括：
    • set(key, value)：添加键值对。
    • get(key)：获取指定键对应的值。
    • delete(key)：删除指定键值对。
    • has(key)：检查是否包含指定键。
    • size：获取键值对的个数。
  4. 迭代器：Map 也是可迭代的，可以使用 for...of 循环或 forEach 方法遍历键值对。这使得对 Map 进行遍历和操作变得更加便捷。
  5. 初始化：与 Set 类似，可以通过传递一个可迭代对象（如数组）来初始化 Map，将其转换为 Map。这种方式方便地创建了一组键值对。

基本用法

// 通过 `new Map()` 创建一个空的 Map
const myMap = new Map();

// 添加键值对
myMap.set('name', 'John');
myMap.set('age', 25);

// 重复的键会被更新，不会被忽略，与set不同
myMap.set('name', 'Jane');

// 检查键是否存在
console.log(myMap.has('name')); // true
console.log(myMap.has('gender')); // false

// 获取值
console.log(myMap.get('name')); // Jane

// 删除键值对
myMap.delete('name');

// 获取键值对的个数
console.log(myMap.size); // 1

// 遍历键值对
for (let [key, value] of myMap) {
    console.log(`${key}: ${value}`);// 输出：age: 25
}

// 使用数组初始化 Map
let myOtherMap = new Map([
    ['color', 'blue'],
    ['size', 'medium'],
]);
console.log(myOtherMap); // Map { 'color' => 'blue', 'size' => 'medium' }

Map的应用

  1. 使用 Map 进行数据存储与检索
let userMap = new Map();
userMap.set('name', 'Alice');
userMap.set('age', 30);

console.log(userMap.get('name')); // 输出：Alice
  1. 替代对象作为键
// 使用对象作为键，可能导致问题
let userObj = {};
let userSet = new Set();

userObj[userObj] = 'Object Value';
userSet.add(userSet);

console.log(userObj['[object Object]']); // 输出：Object Value
console.log(userSet.has(userSet)); // 输出：true

// 使用 Map 解决这个问题
let userMap = new Map();
userMap.set({}, 'Map Value');
console.log(userMap.get({})); // 输出：undefined，因为使用了不同的对象引用
  1. 数据转换
// 将 Map 转换为数组
let userMap = new Map([
    ['name', 'Alice'],
    ['age', 30],
]);

let userArray = Array.from(userMap);
console.log(userArray); // 输出：[ ['name', 'Alice'], ['age', 30] ]

最后

总的来说，Set 和 Map 是 ES6 中引入的两个强大的数据结构，它们为 JavaScript 开发者提供了更灵活和高效的数据处理方式。在未来的开发中，选择合适的数据结构是提高代码质量和效率的关键之一。希望本文能够对你带来帮助！

我的Gitee：    CodeSpace (gitee.com)

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 “点赞 收藏+关注” ，感谢支持！！

avatar
文章
阅读
粉丝