前端 JavaScript 学会使用 new Map Set 教程

---

团队博客：无恃而安

---

1、Map

Map是JavaScript中的一种数据结构，用于存储键值对，并且可以按插入顺序迭代元素。
下面是关于Map的一些常用操作和常见应用场景：

1.1、学习Map的基本操作

1.创建Map对象：
// 使用字面量创建
const map1 = new Map();
// 使用数组的数组对创建
const map2 = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
]);
// 使用set()方法添加键值对
const map3 = new Map();
map3.set('key1', 'value1');
map3.set('key2', 'value2');

2.添加键值对：
map.set(key, value);

 3.获取键值对：
map.get(key);

4.检查键是否存在：
map.has(key);

5.删除键值对：
map.delete(key);

6.获取Map的大小：
map.size;

7.创建Map对象：
map.clear();

8.迭代Map：
map.forEach((value, key) => {
  // 迭代操作
});

9.获取Map的所有键：
Array.from(map.keys());

10.获取Map的所有值：
Array.from(map.values());

1.2 对象 Map互转：

// 对象转Map      对象先转二维数组再塞入Map
new Map(Object.entries({key1: 'value1',key2: 'value2'}));
// Map转对象 map先转成二维数组 再转成对象
Object.fromEntries(new Map([[key1, 'value1'],[key2, 'value2']]).entries());

1.3 二维数组转一维数组：

const twoDimensionalArray = [[1, 2], [3, 4], [5, 6]];
const oneDimen = [].concat(...twoDimensionalArray);
const oneDimen = twoDimensionalArray.flat();
const oneDimen = twoDimensionalArray.reduce((acc, cur) => acc.concat(cur), []);
console.log(oneDimensionalArray); // 输出: [1, 2, 3, 4, 5, 6]

1.4 reduce 累加器

// initialValue 累加的初始值 accumulator 累加的值
// currentValue 当前循环的值  index索引  array 数组 
array.reduce(callback(accumulator, currentValue, index, array), initialValue)
const array = [1, 2, 3, 4, 5];
array.reduce((acc, cur) => { 
 console.log(acc)
 console.log(cur)
 return acc.concat(cur)
},[])
// 返回  累加的值 accumulator

2 Set

Set 是 JavaScript 中的一种数据结构，它用于存储唯一值，不允许重复

2.1 学习 Set：

1、创建 Set：使用 new Set() 创建一个空的 Set，或者通过传递一个数组或类数组对象来初始化 Set。
const set = new Set(); // 创建空的 Set
const setFromArray = new Set([1, 2, 3]); // 从数组初始化 Set

2、添加和删除元素：使用 add() 方法向 Set 中添加元素，使用 delete() 方法删除元素，
使用 clear() 方法清空 Set。
const set = new Set();
set.add(1);
set.add(2);
set.delete(1);
set.clear();

3、Set 大小：使用 size 属性获取 Set 的大小。
const set = new Set([1, 2, 3]);
console.log(set.size); // 输出: 3

4、检查元素是否存在：使用 has() 方法检查 Set 中是否存在某个元素。
const set = new Set([1, 2, 3]);
console.log(set.has(2)); // 输出: true

5、迭代 Set：可以使用 for...of 循环或 forEach() 方法迭代 Set 中的元素。
const set = new Set(['a', 'b', 'c']);
for (let item of set) {
    console.log(item);
}
// 或者
set.forEach(item => console.log(item));

2.2 常用场景：

1、去重：最常见的用途是从数组中去除重复元素。
const array = [1, 2, 2, 3, 3, 4];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4]

2、成员检查：检查一个值是否存在于集合中，通常比在数组中进行搜索更有效率。
const set = new Set(['apple', 'banana', 'orange']);
console.log(set.has('banana')); // 输出: true

3、交集、并集和差集：Set 可以轻松执行集合操作，如并集、交集和差集。
const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
// 并集
const union = new Set([...setA, ...setB]);
// 交集
const intersection = new Set([...setA].filter(x => setB.has(x)));
// 差集
const difference = new Set([...setA].filter(x => !setB.has(x)));

4、存储对象引用：Set 可以存储对象引用，并确保每个对象在集合中都是唯一的。
const obj1 = { name: 'Alice' };
const obj2 = { name: 'Bob' };
const set = new Set([obj1, obj2, obj1]);
5、事件订阅和管理：可以使用 Set 来管理事件的订阅，以确保每个订阅只被添加一次，
从而避免重复执行事件处理程序。
// 创建一个 Set 来存储事件订阅者
const subscribers = new Set();
// 添加事件订阅者
function subscribe(callback) {
    subscribers.add(callback);
}
// 触发事件时，通知所有订阅者
function emitEvent(data) {
    subscribers.forEach(callback => {
        callback(data);
    });
}
subscribe(data => {
    console.log('Received event:', data);
});
subscribe(data => {
    console.log('Also received event:', data);
});
emitEvent('Hello, world!');

3 总结

希望这篇博客可以给你带来帮助 哪怕是备忘录也可以帮助到你 祝你有个愉快的一天~~~