标签：知识点 Set console log map set key es6

前言

　　前端开发语言 JavaScript 不像一些后端语言，集合数据类型只有数组类型，尽管数组也是通过键值对存储在内存中，且数组经常被当作队列和栈数据解构来使用，但是当遇到特殊情况的时候，比如要求键的索引是非数值类型的时候呢，用数组处理就变得十分麻烦，为了弥补这些缺点，ES6 引入了 Set 和 Map 这两种集合类型。本文就来总结一下这两种类型的具体使用方法。

正文

　　1.Set类型

　　Set 一种无重复值的有序列表 允许对它包含的数据进行快速访问，从而增加了一个追踪离散值的更有效的方式。Set 就像高中数学数中的集合一样，具有了确定性，唯一性，不可重复性。这里的 Set 是一个特殊的有序列表。下面是 Set 的使用方法：   　　（1）初始化和创建，通过构造函数。

        // 创建set方法
        let myset = new Set()
        console.log(myset);

        // 也可以使用数组来初始化一个集合set
        let iset = new Set([0.0, 1, 2, 3, 0, 2, 3])
        console.log(iset);//把相等值合并    

　　上面的代码通过构造函数来创建Set集合，同时也可以通过一个数组来初始化一个 Set 集合，由于集合中元素的唯一性，所以 iset 中元素去除了重复的数据。

 

 

　　（2）添加元素，通过 add（）方法

        // 创建set
        let myset = new Set()
        // 添加元素
        myset.add("5")
        myset.add(5)
        console.log(myset);//{5,"5"}
        console.log(myset.size);//2
        myset.add(-0)
        myset.add(+0)
        console.log(myset);//{5,"5",0}
        console.log(myset.size);//3

　　上面的代码通过add()给创建的Set集合添加元素，需要注意，数值的 5 和字符串的 5 会被当作不同的元素保存，而数值的 +0 和 -0 会被当作0保存。

 

　　（3）移除元素，通过  delete（） 部分移除和 clear（）全部移除。

        let removeSet = new Set()
        removeSet.add(1)
        removeSet.add(2)
        removeSet.add(3)
        removeSet.delete(1)
        console.log(removeSet);//{2,3}
        removeSet.clear()
        console.log(removeSet);//{}

　　上面的代码通过 delete（） 方法移除Set中的部分项，通过 clear（） 移除集合的全部元素。

 

　　（4）判断元素是否存在，通过has（）判断。

        var hasset = new Set()
        hasset.add(1)
        console.log(hasset.has(1));//true
        hasset.delete(1)
        console.log(hasset.has(1));//false

　　上面的代码添加元素1后，通过has判断集合是否存在入参元素，若存在则返回 true,否则返回 false。

 

　　（5）Set元素遍历

        var set = new Set()
        set.add(1)
        set.add(2)
        set.add(3)
        set.forEach((v,k,set)=>{
            console.log(`v:${v}==K:${k}`);
            console.log("set",set);
        })

　　上面的代码需要注意，Set 通过 forEach 遍历时候，传入的函数接收三个参数，其中分别代表：Set中当前的位置的值，与第一个参数相同的值，目标 set 自身。

 

　　（6）使用Set实现数组去重

        var arrSet = new Set([0,1,2,0,1,2,1,1,]),
        arr = [...arrSet];
        console.log(arr);//[0,1,2]

　　上面的代码再初始化 set 的时候传入一个数组，arrSet 这个集合有元素的唯一性，把重复的项合并，然后通过剩余运算符赋值给数组，最终实现了数组的去重。

 

　　2.WeakSet类型

 　　由于set 类型存储对象引用的方式，对象存储在 Set 的一个实例中时，实际上相当于把对象存储再变量中。只要对于 Set  实例的引用仍然存在，所存储的对象就无法被垃圾回收机制回收，从而无法释放内存。如下面的代码：

        var myset = new Set()
        var key = {};
        myset.add(key);
        console.log(myset.size); // 1
        console.log(myset);//[{}]
        // 取消原始引用
        key = null;
        console.log(myset.size); // 1
        // 重新获得原始引用
        key = [...myset][0];
        console.log(key);//{}

　　上面的代码，首先创建一个Set 集合，然后添加一个空对象，但是key变量置空后取消了对空对象的引用，Set 集合的第一项仍然保持对空对象的引用，这就阻止了 js 引擎对空对象的回收。在实际开发中，遇到 Set 内部对 key 变量值的引用要随key的引用消失而消失怎么办呢？这就产生了 WeakSet 这一集合类型，该类型值允许存储对象的弱引用，而不能储存基本类型的值，对象的弱引用在它自己成为对象的唯一引用时，不回阻止垃圾回收。

　　需要知道 WeakSet也具有了Set同样的方法，除此之外做出了一定扩展而已。

        var set = new WeakSet(),
            key = {};
        // 将对象加入 set
        set.add(key);
        console.log(set.has(key)); // true
        key = null
        console.log(set.has(key)); // false

　　

　　3.Map类型

　　map 类型是键值对的有序列表，而键和值可以是任意类型，键的比较可以使用 Object.is() ，因此数字型的 5 和字符串类型的 “5” 可以当作不同的键名。

　　（1）初始化和创建，通过构造函数。

        //构造函数
        var map = new Map()
        console.log(map);
        //也可以使用数组来初始化一个map
        var mapData = new Map([["name", "Nicholas"], ["age", '25']]);
        console.log(mapData);

　　上面的代码通过构造函数来创建 map ，同时也可以通过一个数组来初始化一个 map。打印结果如下：

 

　　（2）添加元素，通过 set（）方法

        var map = new Map()
        map.set("name", "xiaoming")//set方法传入键值对
        let key = { age: "18" }
        map.set(key, "ageValue")//对象作为键名
        console.log(map);

　　map中存放键值对类型的数据，区别于普通的键值对对象，它的键可以是任意类型，包括对象作为键名。打印如下：

 

　　（3）通过键来查询对应的值，通过 get（）方法。

        var map = new Map()
        map.set("name", "xiaoming")
        let key = { age: "18" }
        map.set(key, "ageValue")
        console.log(map.get('name'));//xiaoming
        console.log(map.get(key));//ageValue

　　map通过get()方法来获取指定键对应的值，入参为指定的键名，键名可以是任意类型。

　　

　　（4）判断指定键是否在map中，通过 has（）来 判断，入参为指定键名，存在返回 true，否则返回 false ；

　　　　  删除指定键名以及对应的值，通过 delete（）方法实现，入参为指定键名，返回是否删除成功；

　　　　  移除map中所有键和值，使得map置空，通过 clear（）方法来实现，无返回值；

　　　　  size属性指明map 中包含的键值对个数。

        var map = new Map()
        map.set("name", "xiaoming")
        let key = { age: "18" }
        map.set(key, "ageValue")
        console.log(map.size);//2
        console.log(map.has("name"));//true
        console.log(map.delete("name"));//true
        console.log(map.size);//1
        console.log(map.clear());//undefined
        console.log(map.size);//0

　　

　　（5）map遍历

        let mapData = new Map([["name", "Nicholas"], ["age", '25']]);
        mapData.forEach((value,key,ownerMap)=>{
            console.log(value,"===",key);
            console.log(ownerMap);
        })

　　map 的通过 forEach 遍历的时候，传入函数接收三个参数，其中分别代表：map 中当前的位置的值,与第一个参数相同的值，目标 map 自身。打印结果如下：

 

　　4.WeakMap类型

　　WeakMap 是存储对象弱引用的方式，在 WeakMap 中，所有的键必须是对象，而且这些对象都是弱引用。

     var wmap = new WeakMap()
    // wmap.set(1,2)//报错：TypeError: Invalid value used as weak map key
    var key = new Array(5)
    wmap.set(key, "aaa");
    console.log(wmap);//WeakMap{Array(5)=>"aaa"}
    wmap.delete(key);
    console.log(wmap);//WeakMap{}

 

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。

标签：知识点,Set,console,log,map,set,key,es6
来源： https://www.cnblogs.com/zaishiyu/p/14925399.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。