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}

1.3 用途

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

var arr = [2, 3, 5, 3, 5, 2];
var arrSet = new Set(arr);
console.log(arrSet);    // Set(6) {2, 3, 5}

• 字符串去重

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

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` 
let map = new Map();

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

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

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

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

2.3 遍历方法

• forEach遍历：

map.forEach((key,value)=>{
　　console.log(key,value);
});
//函数中第一个参数是属性，第二个参数是属性值

• for-of遍历：

①for(let item of map){
        //(2) ['Amy', '女']
        //(2) ['liuQi', '男']
　　　　　　　　　}
　　　　　遍历结果是数组
②for(let item of map.values()){
        //女
        //男
　　　　　　　　　}
　　　　　遍历属性值
③for(let item of map.keys()){
        //yaosang
        //binggange
　　　　　　　　　}
　　　　　遍历属性

• entries遍历：

for(let item of map.entries()){

　　　　　　　　}
　　　　　遍历结果同forEach

3.区别

两种方法具有极快的查找速度。

Map 和 Set 都不允许key重复。

初始化需要值不一样，Map需要的是一个二维数组，而Set 需要的是一维 Array 数组。

Map 是键值对的存在，键和值是分开的；Set 没有 value 只有 key，value 就是 key；