了解ES6中的set和map

set

set是ES6里面提供的一种新的数据结构 它类似于数组 但是它里面所有的成员都是唯一的，所以使用set可以用来做数组的去重

  var arr = [15, 16, 15, 50, 42, 50,16];
        var set = new Set(arr);
        console.log(set);
        console.log([...set]);

        // size相当于数组的length属性
        console.log(set.size);

结果如下：

*注：Set创建时 传递的参数必须是可以进行遍历的 否则就会报错(typeError)，数组 伪数组 作为参数 都可以遍历

<div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        const s2 = new Set("uweggbcv");
        console.log(s2);
        const s3 = new Set(document.querySelectorAll("div"));
        console.log(s3);
    </script>

结果为：

下面来看一下set里面的方法：
1.add ：添加到set的最后一位

let s1 = new Set();

        // 原型方法
        // add 添加一个数据到set数据结构中
        s1.add(12);
        s1.add(10);
        s1.add(12);
        s1.add(16);
        // 使用add添加数据  -0和+0 表示的是同一个值  并且NaN都相等
        s1.add(-0);
        s1.add(+0); // 无效
        s1.add(NaN);
        s1.add(NaN); // 无效
        console.log(s1);

结果如下：

2.has： 判断set集合中是否存在该元素，返回值为布尔类型

  let s1 = new Set();
		s1.add(12);
        s1.add(10);
        s1.add(12);
        s1.add(16);
        s1.add(-0);
        s1.add(+0); 
        s1.add(NaN);
        s1.add(NaN); 
        console.log(s1);
        // has方法  判断set数据结构中是否包含某一个值  返回值为布尔类型
        console.log(s1.has(NaN));
        console.log(s1.has(20));

结果如下：

3.delete ：删除某个数据不传参 或者传的参数为不存在的值 那么就不删除

 let s1 = new Set();
        s1.add(12);
        s1.add(10);
        s1.add(12);
        s1.add(16);
        // delete  删除匹配到的数据  返回的结果是是否删除成功  不传参 或者穿的参数为不存在的值 那么就不删除
        console.log(s1.delete(12));
        console.log(s1.delete());
        console.log(s1.delete(40));
        console.log(s1);

结果为：

4.clear ：清空整个set集合里面的内容

 let s1 = new Set();
        s1.add(12);
        s1.add(10);
        s1.add(16);
        s1.clear();
        console.log(s1);

结果如下：

map

普通对象存储的缺点 :
1.键名只能使用字符串
2.对象的属性和原型上的方法或者属性发生冲突

ES6引入map数据结构
特点 : 键名不能重复 可以以其他数据类型作为键名

var mp = new Map();
        var arr = [12, 13, 15];
        // 给map对象设置属性  使用set方法  键名可以为复杂数据类型  要获取使用get
        mp.set(arr, "我是一个数组");
        console.log(mp);
        console.log(mp.get(arr));
        // Map作为构造函数  可以接受一个数组作为参数 该数组的元素必须是表示一对键值对的数组
        var mp1 = new Map([["name", "jack"], ["age", "13"], ["girlFriend","rose"]]);
        // var mp1 = new Map(["name", "jack", "age", "13", "girlFriend","rose"]);  // 报错
        console.log(mp1);
        console.log(mp1.get("name"));

结果如下：

*注：
1.size 返回 Map 结构的成员总数。
2.set (key, value) 设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
3.get(key) 读取key对应的键值，如果找不到key，返回undefined。
4.has(key) 返回一个布尔值，表示某个键是否在当前 Map 对象之中。
5.delete(key) 删除某个键，返回true。如果删除失败，返回false。
6.clear() 清空整个map集合

以上就是ES6中的set和map数据结构的相关内容了，如果觉得有帮助的话记得点赞加关注哦