js 中 Map 和 Set 的用法及区别

1. Set

1.1 简介

Set是ES6新增的数据结构，类似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合。
Set是一个构造函数，用来生成set的数据结构。

set打印出来的数据结构，是一个对象

var set=new Set([1,2,3])
console.log(set)  // Set(3) {1,2,3}

1.2 常用语法

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set

//初始化一个Set ，需要一个Array数组，要么空Set
var set = new Set([1,2,3,5,6]) 
console.log(set)  // {1, 2, 3, 5, 6}

//添加元素 add()
//返回 Set 结构本身，当添加实例中已经存在的元素，set不会进行处理添加。也可以采用链式写法
set.add(7) //{1, 2, 3, 5, 6, 7}

//删除元素 delete()， 返回一个布尔值。
set.delete(3) // {1, 2, 5, 6, 7}

//检测是否含有此元素，有为true，没有则为false
set.has(2) //true

//清除所有元素，没有返回值。

1.3 用途

• 最常用来数组去重，去重方法有很多但是都没有它运行的快

var arr = [2, 3, 5, 3, 5, 2];
var arrSet = new Set(arr);
console.log(arrSet);    // Set(6) {2, 3, 5}
 
//方法一：用ES6的...结构
let newArr1 = [...arrSet];
console.log(newArr1 );    // [2, 3, 5]
 
//方法二：用Array.from()将类数组转化为数组
let newArr2 = Array.from(arrSet);
console.log(newArr2 );    // [2, 3, 5]

• 字符串去重

var str = "2234332244";
var newStr = [...new Set(str)].join("");
console.log(newStr);    //234

• 实现并集、交集、差集

let a = new Set([1, 2, 3]),
b = new Set([2, 3, 4]);
 
//并集
var res1 = new Set([...a, ...b]);
console.log('并集：', res1);
 
//交集
var res2 = new Set([...a].filter(x => b.has(x)));
console.log('交集：', res2);
 
//差集（a 相对于 b）
var res3 = new Set([...a].filter(x => !b.has(x)));
console.log('差集：', res3);

//并集 Set(4) {1,2,3,4}
//交集 Set(2) {2,3}
//差集 Set(1) {1}

1.4 遍历方法

Set结构的实例有四个遍历方法，可用于遍历成员。
keys(), values(), entries()返回的都是遍历器对象。
Set结构没有键名，只有键值，所以keys()和values()方法的行为完全一致

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员

var list = new Set(["a", 1, 2, 3]);
for(let key of list.keys()) {
    
    console.log(key);    // a 1 2 3
}

var list = new Set(["a", 1, 2, 3]);
for(let value of list.values()) {
    
    console.log(value);    // a 1 2 3
}

var list = new Set(["a", 1, 2, 3]);
for(let row of list.entries()) {
    
    console.log(row);    // ["a", "a"] [1, 1] [2, 2] [3, 3]
}

var list = new Set(["a", 1, 2, 3]);
list.forEach((value, key) => {
    
    console.log(key + ":" + value);    // a:a 1:1 2:2 3:3
});

2. Map

2.1 简介

JS的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型Map。

Map类似于对象，数据结构是一个键值对的结构，但是“键”的范围不限制于字符串，各种类型的值（包含对象）都可以当作键。
Map 也可以接受一个数组作为参数，数组的成员是一个个表示键值对的数组。注意Map里面也不可以放重复的项。

2.2 常用语法

一个key只能对应一个value，多次对一个key放入value，后面的值会把前面的值覆盖掉；
初始化Map需要一个二维数组，或者直接初始化一个空Map

//初始化`Map`需要一个二维数组(请看 Map 数据结构)，或者直接初始化一个空`Map` 
let map = new Map();

//添加key和value值
map.set('Amy','女')
map.set('liuQi','男')

//是否存在key，存在返回true,反之为false
map.has('Amy') //true
map.has('amy') //false

//根据key获取value
map.get('Amy') //女

//删除 key为Amy的value
map.delete('Amy')
map.get('Amy') //undefined 删除成功

3. 区别

map和set一样是关联式容器,它们的底层容器都是红黑树

• 两种方法具有极快的查找速度
• Map 和 Set 都不允许键重复
• 初始化需要值不一样，Map需要的是一个二维数组，而Set 需要的是一维 Array 数组
• Map 是键值对的存在，键和值是分开的；Set 没有 value 只有 key，value 就是 key；