JavaScript中的Set和Map数据结构及其应用场景

简介

在JavaScript中，Set和Map是两种常用的数据结构，它们提供了一种方便的方式来存储和操作数据。本文将介绍Set和Map的作用、特点以及运用场景。

Set数据结构

Set是一种集合数据结构，只能存储唯一的值，即不允许重复。以下是Set的特点和常用方法：

1. 特点：

   • Set中的元素按照插入顺序排序，并且不能重复。
   • Set可以存储任意类型的值：基本类型和引用类型。
   • Set是可迭代的，可以使用for…of循环遍历。

2. 常用方法：

   • add(value): 向Set中添加一个新的值。
   • delete(value): 从Set中删除指定的值。
   • has(value): 检查Set中是否存在指定的值。
   • clear(): 清空Set中的所有值。
   • size: 返回Set中的元素个数。

应用场景：

• 去除数组中的重复元素。
• 存储一组唯一的值，并快速检查某个值是否存在。

示例代码：

const set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(2); // 添加重复元素，但不会生效

console.log(set); // 输出: Set { 1, 2, 3 }
console.log(set.has(2)); // 输出: true
console.log(set.size); // 输出: 3

set.delete(2);
console.log(set); // 输出: Set { 1, 3 }

set.clear();
console.log(set); // 输出: Set {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

下面是已有数组情况下如何去重：


方法一，使用扩展运算符 ... 和 Set 数据结构：

let arr = [1, 1, 2, 2, 3];
let newArr = [...new Set(arr)];
console.log(newArr); // 输出: [1, 2, 3]
1
2
3

方法二，使用 Array.from() 方法和 Set 数据结构：

let arr = [1, 1, 2, 2, 3];
// 创建一个 Set 对象 
let set = new Set(arr);

// 将 Set 对象转换为数组
let newArr = Array.from(set); 

console.log(newArr); // 输出: [1, 2, 3]
1
2
3
4
5
6
7
8

Array.from() 方法提供了一种简洁的方式来将可迭代对象或类数组对象转换为数组，并且可以通过传入回调函数进行进一步的映射处理。

Set 的遍历方法：

1. 使用 for...of 循环遍历 Set 中的元素：

let set = new Set([1, 2, 3]);

for (let value of set.values()) {
  console.log(value);
}
// 输出:
// 1
// 2
// 3

1
2
3
4
5
6
7
8
9
10

2. 使用 forEach() 方法遍历 Set 中的元素：

let set = new Set([1, 2, 3]); 

set.forEach((value, key, set) => {
    console.log(value, key, set);
})
// 输出:
// 1 1 Set(3) { 1, 2, 3 }
// 2 2 Set(3) { 1, 2, 3 }
// 3 3 Set(3) { 1, 2, 3 }
1
2
3
4
5
6
7
8
9

3. 使用entries() 方法遍历 Set 中的元素:
   
   entries() 方法用于返回键值对的迭代器

let set = new Set([1, 2, 3]);

for (const item of set.entries()) {
  console.log(item);
}
// 输出:
// [1, 1]
// [2, 2]
// [3, 3]

1
2
3
4
5
6
7
8
9
10

Map数据结构

Map是一种键值对的集合，可以使用任意类型的值作为键。以下是Map的特点和常用方法：

1. 特点：

   • Map中的键值对按照插入顺序排序，并且键不能重复。
   • Map可以存储任意类型的值：基本类型和引用类型。
   • Map是可迭代的，可以使用for…of循环遍历。

2. 常用方法：

   • set(key, value): 向Map中添加一个键值对。
   • get(key): 根据键获取对应的值。
   • has(key): 检查Map中是否存在指定的键。
   • delete(key): 从Map中删除指定的键值对。
   • clear(): 清空Map中的所有键值对。
   • size: 返回Map中的键值对个数。

应用场景：

• 存储需要快速查找的键值对数据。
• 维护一种关联关系，例如存储用户信息等。

示例代码：

const map = new Map();
map.set('name', '小明');
map.set('age', 18);

console.log(map); // 输出: Map { 'name' => '小明', 'age' => 18}
console.log(map.get('age')); // 输出: 25
console.log(map.size); // 输出: 3

map.delete('age');
console.log(map); // 输出: Map { 'name' => '小明'}

map.clear();
console.log(map); // 输出: Map {}
1
2
3
4
5
6
7
8
9
10
11
12
13

Map的遍历方法

Map 的遍历方法：

1. 使用 for...of 循环遍历 Map 中的键值对：

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

for (const [key, value] of map) {
  console.log(key, value);
}
// 输出:
// key1 value1
// key2 value2
// key3 value3
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 使用 forEach() 方法遍历 Map 中的键值对：

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

map.forEach((value, key) => {
  console.log(key, value);
});
// 输出:
// key1 value1
// key2 value2
// key3 value3
1
2
3
4
5
6
7
8
9
10
11
12
13

3. 使用 entries()方法遍历Map中的键值对：

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

for (const item of map.entries()) {
  console.log(item);
}
// 输出:
// ['key1', 'value1']
// ['key2', 'value2']
// ['key3', 'value3']

1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意：在遍历 Map 时，回调函数的参数顺序是先 value，后 key。

结论： Set和Map是JavaScript中常用的数据结构，它们分别提供了存储唯一值和键值对的机制。根据具体的需求，选择合适的数据结构可以简化数据操作并提高效率。熟练掌握Set和Map的使用方法，将有助于开发出更强大、高效的JavaScript程序。