new Map() 与 new Set()的简单介绍-CSDN博客

本文链接：https://blog.csdn.net/qq_48763502/article/details/141246973

一 new set()

Set是es6新增的数据结构，似于数组。 Set 是一种 JavaScript 内置的数据结构，用于存储唯一的值。在 Set中，任何类型的值（包括对象、原始值、NaN、undefined 和 null）都可以作为元素，而且每个元素只能出现一次。Set提供了一些有用的方法，用于操作集合中的元素。

1 基本用法

1. 创建 Set

const mySet = new Set([1, 2, 3, 4, 5]);

你可以通过传入一个可迭代对象（如数组）来初始化一个 Set。如果初始化时传入的数组包含重复元素，这些重复元素会被自动去除。

2 常用方法

add(value):

向 Set 中添加一个元素。返回 Set 本身，以便可以链式调用。

mySet.add(6);

delete(value):

删除 Set 中的指定元素。如果元素存在，则返回 true，否则返回 false。

mySet.delete(4); // true
mySet.delete(10); // false

has(value)

检查 Set 中是否包含指定的元素。返回布尔值。

console.log(mySet.has(2)); // true
console.log(mySet.has(10)); // false

clear():

删除 Set 中的所有元素。

mySet.clear();

size:

返回 Set 中元素的数量。

console.log(mySet.size); // 6

3 遍历 Set

Set 支持多种遍历方式，主要包括：

forEach(callbackFn): 使用提供的回调函数遍历 Set 的每个元素。

mySet.forEach(value => {
    console.log(value);
});

for…of 循环: 使用 for…of 循环遍历 Set 的元素。

for (const value of mySet) {
    console.log(value);
}

entries(): 返回一个包含 [value, value] 的迭代器，实际上 Set 的 entries() 方法与 values() 方法返回的内容相同，因为 Set 的键和值是一样的。

for (const entry of mySet.entries()) {
    console.log(entry);
}

values(): 返回一个包含 Set 元素的迭代器。

for (const value of mySet.values()) {
    console.log(value);
}

keys(): 返回一个包含 Set 元素的迭代器，实际上 keys() 方法与 values() 方法返回的内容相同。

for (const key of mySet.keys()) {
    console.log(key);
}

案例

const numbers = new Set([1, 2, 3, 4, 4, 5]);

console.log(numbers); // Set { 1, 2, 3, 4, 5 }

numbers.add(6);
numbers.add(1); // 1 已经存在，不会被添加

console.log(numbers.size); // 6

numbers.delete(2);
console.log(numbers.has(2)); // false

numbers.forEach(num => console.log(num));

// 使用 for...of 遍历
for (const num of numbers) {
    console.log(num);
}

// 使用 entries() 遍历
for (const [key, value] of numbers.entries()) {
    console.log(key, value);
}

// 清空 Set
numbers.clear();
console.log(numbers.size); // 0

4 使用场景

去重: Set 可以用于去除数组中的重复元素。

let arr = [3, 5, 2, 2, 5, 5];
let setArr = new Set(arr)       // 返回set数据结构  Set(3) {3, 5, 2}
let uniqueArr =  [...setArr ];  //去重转数组后  [3,5,2]

集合运算: Set 可以用于执行集合运算，例如并集、交集和差集。
唯一性检查: 确保某些元素在数据集合中唯一。

二 new Map()

在 JavaScript 中，Map 是一种内置的数据结构，用于存储键值对（key-value pairs）。与普通对象不同，Map 的键可以是任何类型的值，包括对象、函数和原始值。Map 保持插入顺序，可以通过各种方法进行操作。

1 基本用法

创建 Map

const myMap = new Map();

你还可以在创建时传入一个可迭代对象（如数组）来初始化 Map：

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

2 常用方法

set(key, value): 添加或更新 Map 中的键值对。

myMap.set('key4', 'value4');

get(key): 根据键获取对应的值。如果键不存在，返回 undefined。

console.log(myMap.get('key1')); // 'value1'

has(key): 检查 Map 中是否存在指定键。返回布尔值。

console.log(myMap.has('key2')); // true
console.log(myMap.has('key5')); // false

delete(key): 删除 Map 中指定的键及其对应的值。如果键存在，返回 true，否则返回 false。

myMap.delete('key3'); // true

clear(): 清空 Map 中的所有键值对。

myMap.clear();

size: 返回 Map 中键值对的数量。

console.log(myMap.size); // 3

3 遍历 Map

Map 提供了多种遍历方式：

forEach(callbackFn): 使用提供的回调函数遍历 Map 的每个键值对。

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

for…of 循环: 结合 entries(), keys(), 或 values() 方法进行遍历。

for (const [key, value] of myMap.entries()) {
    console.log(`${key}: ${value}`);
}

for (const key of myMap.keys()) {
    console.log(key);
}

for (const value of myMap.values()) {
    console.log(value);
}

示例

const myMap = new Map([
    ['name', 'Alice'],
    ['age', 25],
    ['city', 'New York']
]);

console.log(myMap.get('name')); // Alice

myMap.set('job', 'Engineer');
console.log(myMap.size); // 4

myMap.delete('age');
console.log(myMap.has('age')); // false

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

// 使用 for...of 遍历
for (const [key, value] of myMap) {
    console.log(`${key}: ${value}`);
}

// 清空 Map
myMap.clear();
console.log(myMap.size); // 0