【ES6干货】带你手把手学习js中的Set和Map!!

前言

JavaScript作为一门多用途的编程语言，提供了许多强大的数据结构来处理不同类型的数据。ES6当中加入了许多特性。其中，Set和Map是两个值得注意的数据结构，它们分别用于处理集合和键值对。

今天我们就来学习一下set和map

正文

1. Set的学习

基本介绍

Set是一种集合，它由一组唯一且无序的值组成。与数组不同，Set中的元素没有重复，而且没有固定的顺序。这使得Set非常适合存储不重复的数据。

Set是一种特殊的对象,

长得像数组，但是用的是花括号！！

一个对象中直接装值就是set结构 有下标也可以说下标为key，Set有size属性 ，数组当中可以存放相同的值,然而set中的元素没有重复,其中，Set的key其实和它的value值是相同的！

我们来看一个案例:

var set = new Set([1,2,3,4,5])//接收的参数是数组
console.log(set);
console.log(set[0]);//读不到值，不能用传统对象和数组的方法来读取值,下标对我们一点用没有
console.log(set.keys());
console.log(set.values());
console.log(set.size);

输出：
Set(5) { 1, 2, 3, 4, 5 }
undefined
[Set Iterator] { 1, 2, 3, 4, 5 }
[Set Iterator] { 1, 2, 3, 4, 5 }
5

我们在这个案例当中，用Set接收了一个数组，我们会发现！Set的存储方式是这样的Set(5) { 1, 2, 3, 4, 5 }有点像数组，但是用的又是花括号{}存储，Set是一种特殊的存储结构！

Set 对象的 keys() 和 values() 方法都是用于遍历集合中的元素的方法。这两个方法返回一个迭代器对象，通过该对象可以按插入顺序遍历 Set 中的所有元素。

set.keys()： 返回一个包含集合中所有键的迭代器对象。

set.values()： 返回一个包含集合中所有值的迭代器对象。

什么是迭代器对象？

迭代器对象（Iterator Object）是一种用于遍历数据集合的对象。它提供了一种统一的访问机制，可以逐个访问集合中的元素，而无需关心底层数据结构的具体实现细节。

这里我们只需要了解到Set具有迭代器属性即可！

同时Set又具有size属性，可以通过set.size来获取set的长度！

我们接下来通过一个案例来了解一下Set的没有重复项的特性和size属性！

let set = new Set([1,1,2,2,3,4])
set.add(5)
console.log(set);//输出：Set(5) { 1, 2, 3, 4, 5 }
console.log(set.size);//输出: 5

我们可以看到，尽管我们给set中传的数组是有重复项的，但是我们通过add一个5之后，再输出发现set所有的项目当中没有重复项，并且可以通过size属性获取大小！

我们再看一个案例：

//数组去重 能去字符串，数字，不能去对象，函数
var arr = [1,2,3,2,1,4,'a','a']
function unique(arr){
    let s = new Set(arr)
    let result = Array.from(s)//把一个`set`转换为数组
    return result
}
console.log(unique(arr));//[ 1, 2, 3, 4, 'a' ]

我通过这个案例就发现！我们可以通过set对数组进行去重！包括字符串，数字！但是Set无法去重对象和函数！(大家可以动手实操一下！)

Set常用的一些方法

1. 创建Set

使用new Set()可以创建一个空的Set，也可以在创建时传入一个可迭代对象，初始化Set的元素。

// 创建一个空的Set
let mySet = new Set();
// 创建包含元素的Set
let mySetWithValues = new Set([1, 2, 3, 4, 5]);

2. 添加元素

使用add方法向Set中添加元素，确保元素的唯一性。

mySet.add(6);

3. 删除元素

使用delete方法删除Set中的指定元素，如果元素不存在，删除操作不会产生错误。

mySet.delete(3);

4. 检查元素是否存在

使用has方法检查Set中是否存在指定元素，返回布尔值。

console.log(mySet.has(2)); // 输出: true

5. 获取Set的大小

使用size属性获取Set中元素的个数。

console.log(mySet.size); // 输出: 6

6. 清空Set

使用clear方法清空Set中的所有元素。

mySet.clear();

7. 迭代Set元素

可以使用forEach方法或者for...of循环来迭代Set中的元素。Set具有迭代器(Iterator)属性

// 使用 forEach 迭代
mySet.forEach((item,index,set) => {
  console.log(item,index,set);
});

// 使用 for...of 迭代
for (let value of mySet) {
  console.log(value);
}

8. 将Set转为数组

使用Array.from或者扩展运算符(...)可以将Set转为数组。

let myArray = Array.from(mySet);
// 或者
let myArraySpread = [...mySet];

9. 合并两个Set

可以使用Set的构造函数和...运算符来合并两个Set。

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);
let mergedSet = new Set([...set1, ...set2]);

10. 获取Set中的所有键、值和键值对

使用keys、values和entries方法可以分别获取Set中的所有键、所有值以及所有键值对。keys是用来返回所有键名的，具有迭代器属性value是用来返回所有的键值的，也具有迭代器属性

let setKeys = mySet.keys();
let setValues = mySet.values();
let setEntries = mySet.entries();

11. 判断两个Set是否相等

可以通过比较两个Set的大小和内容来判断它们是否相等。

function areSetsEqual(set1, set2) {
  if (set1.size !== set2.size) {
    return false;
  }

  for (let item of set1) {
    if (!set2.has(item)) {
      return false;
    }
  }

  return true;
}

14. 获取Set的键值对的另外一种方法

我们可以通过entries()获取Set的键值对

let set = new Set([1,2,3]);
// entries()即返回键名又返回键值
for(let item of set.entries() ){
    console.log(item);//输出[ 1, 1 ],[ 2, 2 ],[ 3, 3 ]
}

2. Map的学习

基本介绍

在JavaScript中，Map是一种集合数据结构，用于存储键值对。它提供了一种更灵活且功能丰富的方式来处理和存储数据，相较于普通的对象(Object)，Map具有一些独特的特点。

我们Map的初始化要用二维数组!

在对象当中，存储是以键值对的形式存储！但是对象的键值只能是数字和字符串！

而Map就相当于进阶版的对象，它的键值能够是任意类型的数据！！

我们用一个案例来学习一下：

//map的key可以是任意数据结构
//初始化要用二维数组
let map = new Map([
    ['name','老王']
])
let obj = {a:1}
map.set(obj,'hello')//key是一个对象，value是一个字符串，用箭头给你表达
map.get('name')//读到map里面key为name的值
// 引用数据类型引用的是地址,类型相等，引用地址相等，值相等，才叫相等
console.log(map.get(obj));
map.forEach((item,index,map)=>{
console.log(map);
})

输出：
hello
Map(2) { 'name' => '老王', { a: 1 } => 'hello' }
Map(2) { 'name' => '老王', { a: 1 } => 'hello' }

在我们这个案例当中,我们先初始化了一个Map的实例对象！注意：Map初始化要用二维数组！！

其中，存了一个['name','老王']，这里面的值我们不能随意去设置，要符合key-value的形式。

接着，我们又声明了一个对象obj，这里我利用了set为Map添加值，其中key为obj对象，value值为'hello',

我们又有一个get(name)方法获取Map中key为name的值！！后面打印了key为obj对象的值为hello

同时Map也具有迭代器属性！我们记住就好！我们也可以用forEach((item,index,map)对Map进行遍历！

Map常用方法

Map的常用反法

1. 解构Map

console.log([...map]);//输出还是二维数组

2. 添加

map.set(key,value)

3. 获取对应key的值

map.get(key)

4. 遍历Map

map.forEach((item,index,map)=>{
console.log(map);
})
// 使用 for...of 遍历 Map
for (let [key, value] of myMap) {
    console.log(key, value);
}

其他方法与set大概相同！！大家可以去了解学习一下！

讲了那么久，我们总是听到迭代器这个属性！

迭代器属性

在 JavaScript 中，Set 和 Map 类型都有一些迭代器属性，使得你可以通过不同的方式遍历它们。

Set 的迭代器属性：

1. Set.prototype.keys()： 返回一个包含集合中所有值的迭代器对象。
2. Set.prototype.values()： 与 keys() 方法相同，返回一个包含集合中所有值的迭代器对象。
3. Set.prototype.entries()： 返回一个包含集合中所有值的迭代器对象，每个元素都是一个 value, value 形式的数组。

Map 的迭代器属性：

1. Map.prototype.keys()： 返回一个包含 Map 中所有键的迭代器对象。
2. Map.prototype.values()： 返回一个包含 Map 中所有值的迭代器对象。
3. Map.prototype.entries()： 返回一个包含 Map 中所有键值对的迭代器对象，每个元素都是一个 key, value 形式的数组。

这些迭代器属性使得遍历 Set 和 Map 变得更加方便，可以使用 for...of 循环或者其他迭代方式来访问集合中的元素。

好啦！ 我们今天的学习就到这里啦！大家有想法的欢迎留言评论！！ 点个小赞鼓励支持一下吧！！