JavaScript中new Map() 与 new Set()的简单介绍
一 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
4 使用场景
- 存储关联数据: Map 非常适合存储需要快速查找的关联数据。
- 维护插入顺序: 如果需要保持元素的插入顺序，使用 Map 是一个好的选择。
- 处理任意类型的键: Map 可以使用任何值作为键，这在某些情况下非常有用，比如使用对象作为键。
Map 提供了一种灵活且高效的方式来处理键值对，是现代 JavaScript 开发中常用的数据结构之一。