ES6 入门第六章 (Set、Map)

ES6 入门第六章

Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 Iterator 接口，所以可以使用【扩展运算符】和【for…of…】进行遍历，集合的属性和方法

//声明一个 Set
let s = new Set();
console.log(s,typeof s)
let s2 = new Set(['小白','小黑','小黄','小白']);
console.log(s2);

1）size 返回集合的元素个数

//元素个数
let s2 = new Set(['小白','小黑','小黄','小白']);
console.log(s2.size)

2）add 增加一个新的元素，返回当前集合

//添加新的元素
let s2 = new Set(['小白','小黑','小黄','小白']);
s2.add('小蓝');
console.log(s2);

3）delete 删除元素，返回 Boolean 值

//删除元素
let s2 = new Set(['小白','小黑','小黄','小白']);
s2.delete('小黄');
console.log(s2);

4）has 检测集合中是否包含某个元素，返回 Boolean 值

//检测
let s2 = new Set(['小白','小黑','小黄','小白']);
console.log(s2.has('小黄'));

5）clear 清除所有成员，没有返回值。

//清空
let s2 = new Set(['小白','小黑','小黄','小白']);
s2.clear();
console.log(s2);

Set实践

1. 数组去重

   let arr = [1,2,3,4,5,4,3,2,1];
   //1.数组去重
   let result = [...new Set(arr)];
   console.log(result);
   

2. 交集

//2.交集
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
let result = [...new Set(arr)].filter(item => {
let s2 = new Set(arr2); //4,5,6
if(s2.has(item)){
return true;
}else {
return false;
}
})
console.log(result)
//简写版
let result1 = [...new Set(arr)].filter(item => new Set(arr2).has(item));
console.log(result1)

3. 并集

//3.并集
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
let union = [...new Set([...arr,...arr2])];
console.log(union);

4. 差集

//4.差集
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
console.log(diff);

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象），都可以当作键。Map 也实现了Iterator 接口，所以可以使用【扩展运算符】和【for…of…】进行遍历。Map 的属性和方法：

1）size 返回 Map 的元素个数

//size
console.log(m.size);

2）set 增加一个新的元素，返回当前 Map

//声明 Map
let m = new Map();

//添加元素
m.set('name','ES6');
m.set('book',function(){
console.log("ES6 入门！！！");
})
let key ={
author:'ryf'
};
m.set(key,['作者1','作者2','作者3']);
console.log(m);

3）delete 删除元素，返回 Boolean 值

//删除
m.delete('name');
console.log(m);

4）get 返回键名对象的键值

//获取
console.log(m.get('book'))

console.log(m.get(key))

5）has 检测 Map 中是否包含某个元素，返回 Boolean 值

//has
console.log(m.has(key))

6）clear 清空集合，返回 undefined

//清空
m.clear();
console.log(m)

Set 与 Map 的区别

• Set 类似于数组，但是成员的值都是唯一的，没有重复。使用 new Set() 创建 Set 实例。Set新增元素用add()方法。

• Map 类似于对象，但是键的范围不限于字符串，各类型的值都可以作为键值。使用 new Map() 创建 Map 实例。Map 新增元素用set()方法。

Map 和 Object 的区别

• 一个 Object 的键只能是字符串或者 Symbol，但一个 Map 的键可以是任意值。

• Map 中的键值是有序的，而添加到对象中的键则不是。

• Map 的键值对个数可以从 size() 获取，而 Object 的键值对个数只能手动计算。

• Object 都有自己的原型，原型链上的键名有可能和自己在对象上的设置的键名产生冲突。