Es6中的Set和Map

一、Set

1. Set的基本概念

• Set对象中可以存储任何类型的值，无论是原始值还是对象引用。类似于数组，与数组不同的是Set对象中存储的值必须是唯一的，没有重复的值

2. Set的基本使用

• 创建一个Set，需要提供一个Array作为输入

//案例1
let arr=[1,2,3,3,'3',{},{}];
let res=new Set(arr);
console.log(res);//Set {1,2,3,'3',{},{}}

• 案例1中，数组中的元素3和3是相同的，因此创建一个Set对象后会去掉相同元素；数组中3和'3'的数据类型不同；数组中{}和{}是不同的，因为对象是一个引用数据类型，它们的地址存储(指针)是不一样的

3. Set对象的方法

• add()---add方法在添加元素时，如果元素已经存在则添加无效；否则添加成功

//案例2
let arr=[1,2,3,{},'abc'];
let res=new Set(arr);
res.add(4);
console.log(res);//Set {1,2,3,{},'abc',4}
res.add('abc');//添加已有元素
console.log(res);//Set {1,2,3,{},'abc',4}

• delete()---删除元素

//案例3
let arr=[1,2,3,'abc'];
let res=new Set(arr);
res.delete(3);
console.log(res);//Set {1,2,'abc'}

• has()---判断某一元素是否为Set对象的成员，返回布尔值

//案例4
let arr=[1,2,3];
let res=new Set(arr);
console.log(res.has(3));//true

• clear()---清除Set中的所有成员，无返回值

//案例5
let arr=[1,2,3];
let res=new Set(arr);
let a=res.clear();
console.log(a);//undefined

• Set对象的应用---数组去重

//数组去重
function unique(arr){
    return Array.from(new Set(arr));//注意Array。from()的使用方法
}
let arr=[1,2,3,3];
let res=unique(arr);
console.log(res);//[1,2,3]

Array.from()的使用

二、Map

1. 引入部分

//需求---查找对应学生姓名的成绩
//1、用Array的形式进行实现，需要两个数组
//实现方式：从name数组中找到对应姓名的下标，再从score数组中查找对应下标的成绩
let name=['张三','李四','王五'];
let score=[100,90,80];
//2、通过object键值对的方式来实现存储和查找
let target=Object.create({'张三':100,'李四':90,'王五':80});
console.log(target);

Object.create()使用

• 注意上述两种方法虽然都可以完成最后的操作，但是就性能而言，会随着数据的长度而变差；因此Es6就提供了Map对象的方法来提高查询的速度。如果用Map实现上述需求，只需要一个'名字-成绩'对照表，直接根据名字查成绩，无论这个表多大，都不会影响查找速度。

2. Map的基本概念

• Map对象中是以键值对(key-value)的形式进行存储。任何值都可以成为一个键或者一个值。

• 构造函数Map可以接收一个数组作为参数。

//案例1
let map=new Map([['张三',100],['李四',90],['王五',80]]);
console.log(map);//Map(3) {'张三' => 100, '李四' => 90, '王五' => 80}

3. Map对象的方法

• set(key,value)---向Map中添加新元素

//案例2
let map=new Map();
map.set('name','张三');
console.log(map);//Map {'name'=>'张三'}

• 注意：多次使用set添加同一键时，后添加的值会覆盖前面的值

• get(key)---通过键值获取相对应的值

//案例3
let map=new Map();
map.set('name','张三');
console.log(map.get('name'));//张三

• has()---判断Map中是否有该键，返回布尔值

//案例4
let map=new Map();
map.set('name','张三');
console.log(map.has('name'));//true

• delete()---删除Map中的键

//案例5
let map=new Map([['张三',100],['李四',90],['王五',80]]);
map.delete('张三');
console.log(map);//Map(2) {'李四' => 90, '王五' => 80}

• clear()---清空Map中的所有键值对

//案例6
let map=new Map([['张三',100],['李四',90],['王五',80]]);
map.clear();
console.log(map);//Map(0) {size: 0}

三、Set和Map的总结