ES6-Set和Map的使用

前言
当我们需要存储一些数据的时候，首先想到的是定义一个变量用来存储，之后我们可能学了数组，发现数组比变量可以存储更多的数据，接着可能有其它的存储数据的方法等等，然而我今天需要介绍的是在ES6中比较常见使用的数据类型结构，Set和Map。

Set

ES6中提供了Set数据容器，这是一个能够存储无重复值的有序列表。

1.1 特点

• set中成员的值都是唯一的，没有重复的值
• 向set中添加成员时，不会发生类型转换
• 向set中添加的对象总是不想等

属性

• size：返回set实例的成员总数
  例如：

  let set1 = new Set("abcdefgh");
  console.log(set1.size);
  

1.2 方法

方法	含义
add()	添加某个值
has()	返回一个布尔值，表示该值是否为set成员
delete()	删除某个值，返回一个布尔值，判断删除是否成功
clear()	清除所有成员
keys()	返回键名的遍历器
values()	返回键值的遍历器
entries()	返回键值对的遍历器
forEach()	使用回调函数遍历每个成员

1.3 案例

常用方法代码如下：

 		let set1 = new Set("abcdefgh");
        //添加元素
        set1.add("i");
        console.log(set1);

        //判断是否存在此元素       
        console.log(set1.has("a"));

        //元素个数
        console.log(set1.size);

        //删除某个元素
        set1.delete("c");
        console.log(set1);

        //清空元素
        set1.clear();
        console.log(set1);

遍历元素

		let set1 = new Set("abcdefghij");
        //for-of 遍历
        for (let item of set1) {
            console.log(item);
        }
        //forEach 遍历
        set1.forEach((item) => {
            console.log(item);
        })

数组转换为set集合

 		let arr = [1, 2, 3, 4, 5, 6, 7, 1, 2];
        let set1 = new Set(arr);
        console.log(set1);

set集合转换为数组

		let set1 = new Set("abcdefghij");
    	let arr = [...set1];
    	console.log(arr);

输出结果：

Map

es6中的map很大程度上和set相似，但是map是以键值对的形式存储数据的

2.1 属性

• size：返回map结构的成员总数
  例如：

	let map1 = new Map([
            ["a", 1],
            ["b", 2],
            ["c", 3]
        ]);
    //元素个数
   console.log(map1.size);    

2.2 方法

方法	含义
set(key,value)	设置键名key对应的键值value,然后返回整个map结构，如果key已经有值，则键值会被更新，否则就新生成该键
get(key)	读取key对应的键值，如果找不到key,则返回undefined
has(key)	返回一个布尔值，表示某个键是否在当前map对象中
delete(key)	删除某个key,返回true,如果删除失败，返回false
clear()	清除所有成员
keys()	返回键名的遍历器
values()	返回键值的遍历器
entries()	返回键值对的遍历器
forEach()	遍历map的所有成员

2.3 案例

常用方法代码如下：

		let map1 = new Map([
            ["a", 1],
            ["b", 2],
            ["c", 3]
        ]);
        console.log(map1);

        //设置键值对
        map1.set("d", 4);
        console.log(map1);

        //获取键值对
        console.log(map1.get("a"));

        //元素个数
        console.log(map1.size);

        //判断是否存在键
        console.log(map1.has("a"));

        //删除某个元素
        map1.delete("c");
        console.log(map1);

        //清空元素
        map1.clear();
        console.log(map1);

遍历元素

		let maps = new Map([
            ["a", 1],
            ["b", 2],
            ["c", 3]
        ]);
        //for-of遍历
        for (let item of maps) {
            //元素的键
            console.log(item[0]);
            //元素的值
            console.log(item[1]);
        }
        //forEach遍历
        maps.forEach((item, index, s) => {
            console.log(item, index, s);
        })

将对象当做键放入Map

		let obj = {
            name: "sh",
            age: 21
        }
        let map1 = new Map([
            [obj, 1],
            ["a", 2],
            ["b", 3]
        ]);

Map转换为数组

		let map1 = new Map([
            ["a", 1],
            ["b", 2],
            ["c", 3]
        ]);
        let arr = [...map1];
        console.log(arr);

数组转换为Map

 		let arr = ["name", "sh"];
        let arr1 = ["age", 21];
        let map1 = new Map([arr, arr1]);
        console.log(map1);

详情参考: https://es6.ruanyifeng.com/#docs/set-map.