JavaScript Set对象

Set

　　用于存储任何类型的唯一值，无论是基本类型还是引用类型。

　　只有值没有键

　　严格类型检测存储，字符串数字不等同于数值型数字

　　存储的值具有唯一性

　　遍历顺序是添加的顺序，方便保存回调函数

　　其实Set类型更多的是操作数据，而并非存储。

基础知识

声明定义

　　以下示例演示出如何使用Set类型存储数据。

<script>

​

        "use strict";

​

        let set = new Set([1, "1", 1, 1, 1, 2, 3, 4, 5, "2"])  // 严格类型检测 1 ！= "1"

​

        console.log(set instanceof Set);  // true

​

        console.log(set);  // set(7) {1, "1", 2, 3, 4, 5, "2"}

​

</script>

添加元素

　　以下示例将演示如何将任意值元素添加进set容器中，使用add()方法进行添加元素的操作。

<script>

​

        "use strict";

​

        let set = new Set()

​

        set.add(1);

​

        set.add(["一","二","三"]);

​

        set.add('1');

​

        console.log(set); // Set(3) {1, Array(3), "1"}

</script>

获取数量

　　使用size属性获取set容器中的元素个数。

<script>

​

        "use strict";

​

        let set = new Set()

​

        set.add(1);

​

        set.add(["一","二","三"]);

​

        set.add('1');

​

        console.log(set); // Set(3) {1, Array(3), "1"}

​

        console.log(set.size);  //

​

</script>

元素检测

　　使用has()方法检测元素是否存在。

<script>

​

        "use strict";

​

        let set = new Set()

​

        set.add(1);

​

        set.add(["一", "二", "三"]);

​

        set.add('1');

​

        console.log(set); // Set(3) {1, Array(3), "1"}

​

        console.log(set.has(["一", "二", "三"]));  // 由于是不同的引用地址，故结果为 false

        let array = ["四", "五", "六"];

​

        set.add(array)

​

        console.log(set.has(array));  // 现在的引用地址一致，结果为 true

​

</script>

删除元素

　　使用delete()方法删除单个元素，返回值为boolean类型。

<script>

​

        "use strict";

​

        let set = new Set()

​

        set.add(1);

​

        set.add(["一", "二", "三"]);

​

        set.add('1');

​

        console.log(set); // Set(3) {1, Array(3), "1"}

        let res = set.delete(1); // 值类型，可以直接删除

​

        console.log(res); // true 代表删除成功

​

        res = set.delete(["一", "二", "三"])  // 引用类型，不可以直接删除

​

        console.log(res); // false 代表删除失败

​

</script>

清空容器

　　使用clear()方法可使set容器清空。

<script>

​

        "use strict";

​

        let set = new Set()

​

        set.add(1);

​

        set.add(["一", "二", "三"]);

​

        set.add('1');

​

        set.clear();

​

        console.log(set.size);  //

​

</script>

数组转换

　　转换数据类型是为了更好的操纵数据，可以使用...语法或者Array.form()方法将set转换为array。

　　我们可以充分的结果set去重的特性，以及array丰富的操作方法来任意操纵我们的元素。

　　如下，我们将set类型转换为了数组。

<script>

​

        "use strict";

​

        let set = new Set(["云崖先生", "男", 18])

​

        let array = [...set];

​

        console.log(array);  // (3) ["云崖先生", "男", 18]

​

        console.log(array instanceof Array); // true

​

</script>

　　将数组转换为set，可以充分利用去重特性。

<script>

​

        "use strict";

​

        let array = new Array(1, 1, 1, 2, 2, 3, 4, 5);

​

        array = new Set(array);  // 去重

​

        array = Array.from(array)

​

        console.log(array instanceof Array); // true

​

        console.log(array); // (5) [1, 2, 3, 4, 5]

​

</script>

遍历操作

迭代器创建

　　使用 keys()/values()/entries() 都可以返回迭代对象，因为set类型只有值所以 keys与values 方法结果一致。

<script>

        "use strict";

        let set = new Set(["一", "二", "三", "四", "五"]);

        let iter_keys = set.keys();

        let iter_values = set.values();

        let iter_entries = set.entries();

        console.log(iter_keys);

        console.log(iter_values);

        console.log(iter_entries);

</script>

forEach

　　使用forEach来循环set容器。

<script>

        "use strict";

        let set = new Set(["一", "二", "三", "四", "五"]);

        set.forEach(function (index, value) {

                console.log(index, value);

        });

</script>

for/of

　　也可使用for/of进行循环。

<script>

        "use strict";

        let set = new Set(["一", "二", "三", "四", "五"]);

        for (let i of set) {

                console.log(i);

        }

</script>

多集合操作

交集

　　交集代表set1与set2共有的部分。

<script>

        "use strict";

        let set1 = new Set(["一", "二", "三", "四", "五"]);

        let set2 = new Set(["三", "四", "五", "六", "七"]);

        let new_set = new Set(

                Array.from(set1).filter(function (value) {

                        return set2.has(value) 

                        })

        );

        console.log(new_set);  // Set(3) {"三", "四", "五"}

</script>

差集

　　差集代表一个集合有，另一个集合没有的部分。

<script>

        "use strict";

        let set1 = new Set(["一", "二", "三", "四", "五"]);

        let set2 = new Set(["三", "四", "五", "六", "七"]);

        let new_set = new Set(

                Array.from(set1).filter(function (value) {

                        return !set2.has(value)

                })

        );

        console.log(new_set);  // Set(3) Set(2) {"一", "二"}

</script>

并集

　　将两个集合合并成一个集合，多余的元素会被剔除，这就是并集。

<script>

        "use strict";

        let set1 = new Set(["一", "二", "三", "四", "五"]);

        let set2 = new Set(["三", "四", "五", "六", "七"]);

        let new_set = new Set([...set1,...set2]);

        console.log(new_set);  // Set(7) {"一", "二", "三", "四", "五", "六", "七"}

</script>

WeakSet

　　WeakSet结构同样不会存储重复的值，它的成员必须只能是对象类型的值。

  • 垃圾回收不考虑WeakSet，即被WeakSet引用时引用计数器不加一，所以对象不被引用时不管WeakSet是否在使用都将删除

  • 因为WeakSet 是弱引用，由于其他地方操作成员可能会不存在，所以不可以进行forEach( )遍历等操作

  • 也是因为弱引用，WeakSet结构没有keys()，values()，entries()等方法和size属性

  • 因为是弱引用所以当外部引用删除时，希望自动删除数据时使用 Weakset

声明定义

　　在 WeakSet中只能保存容器类型的对象，即引用类型，不能保存值类型。

<script>

        "use strict";

        let array = [1,2,3];

        let dict = {"k1":"v1","k2":"v2"};

        let set = new WeakSet([array,dict]);  // 在 WeakSet中只能保存容器类型的对象，即引用类型。不能保存值类型

        console.log(set);

</script>

　　保存值类型会抛出异常。

<script>

        "use strict";

        let array = [1,2,3];

        let dict = {"k1":"v1","k2":"v2"};

        let symbol = new Symbol();  // 值类型

        let set = new WeakSet([array,dict,symbol]);  // 在 WeakSet中只能保存容器类型的对象，即引用类型。不能保存值类型

        console.log(set); // Uncaught TypeError: Symbol is not a constructor

</script>

操作方法

方法 说明
add() 添加一个引用类型对象
delete() 删除一个引用类型对象
has() 判断是否存在一个引用类型对象

垃圾回收

　　对于标记清除法来说，存在于WeakSet中的对象并不会增加引用计数，因此也被称之为弱引用。

　　当WeakSet中对象的外部引用计数为0后，垃圾回收机制将清理该对象，并且WeakSet容器内并不会保存该对象。

<script>

        "use strict";

        let array = [1, 2, 3];

        let dict = { "k1": "v1", "k2": "v2" };

        let set = new WeakSet([array, dict]);

        console.log(set);  // array还在里面

        array = null;  // 清理，引用计数为0

        setInterval(() => {

                console.log(set);  // array 不在了

        }, 3000);

</script>

作用详解

　　根据WeakSet这个特性，我们可以用它来保存一下经常存取的数据。

　　当对象被删除后，我们不用管WeakSet容器中是否含存有该数据。

　　示例如下：

　　将标签节点全部放入集合中，当在点击的时候添加类并且移出集合设置透明度，当再次点击的时候又将标签移入集合即可。

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Document</title>

        <link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_h1wr0ianmf5.css">

        <style>

                body {

                        display: flex;

                        justify-content: center;

                        align-items: center;

                        flex-flow: column wrap;

                        height: 100vh;

                        width: 100vw;

                }

                input {

                        border: none;

                        height: 20px;

                }

                div {

                        border: 1px solid #ddd;

                        display: flex;

                        justify-content: center;

                        align-items: center;

                        margin-bottom: 10px;

                        padding: 0 5px;

                        width: 200px;

                        height: 30px;

                }

                div input {

                        flex: 1;

                }

                div input:focus {

                        outline: none;

                }

                div i {

                        background-color: rgba(0, 255, 96, 5);

                        padding: 2px;

                        border-radius: 10%;

                }

                i.iconfont {

                        font-size: 12px;

                }

                .hidden {

                        opacity: .5;

                }

        </style>

</head>

<body>

        <div>

                <input type="text"><i class="iconfont icon-shanchu"></i>

        </div>

        <div>

                <input type="text"><i class="iconfont icon-shanchu"></i>

        </div>

        <div>

                <input type="text"><i class="iconfont icon-shanchu"></i>

        </div>

        <div>

                <input type="text"><i class="iconfont icon-shanchu"></i>

        </div>

</body>

<script>

        "use strict";

        let divs = document.querySelectorAll("div");

        let set = new WeakSet([...divs]);

        divs.forEach(function (ele) {

                ele.childNodes[2].addEventListener("click", function (param) {

                        if (set.has(this.parentNode)) {

                                set.delete(this.parentNode);

                                this.parentNode.classList.add('hidden');

                        }

                        else {

                                set.add(this.parentNode);

                                this.parentNode.classList.remove("hidden");

                        }

                })

        })

</script>

</html>

JavaScript Set对象的更多相关文章

  1. javascript 全局对象--w3school

    JavaScript全局对象 1.  decodeURI()解析某个编码的URI. 2.decodeURInComponent()解析一个编码的URI组件. 3.encodeURI()把字符串编码为U ...

  2. JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString

    JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...

  3. 从零构建JavaScript的对象系统

    一.正统的类与继承 类是对象的定义,而对象是类的实例(Instance).类不可直接使用,要想使用就必须在内存上生成该类的副本,这个副本就是对象. 以Java为例: public class Grou ...

  4. 关于javascript自定义对象(来自网络)(最近几天不会的)

    javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义 优点:动态的传递参数 缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...

  5. 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

    在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...

  6. JavaScript RegExp 对象

    JavaScript RegExp 对象 RegExp 对象用于规定在文本中检索的内容. 什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的 ...

  7. JavaScript String 对象

    JavaScript String 对象 String 对象 String 对象用于处理文本(字符串). String 对象创建方法: new String(). 语法 var txt = new S ...

  8. JavaScript Math 对象

    JavaScript Math 对象 Math 对象 Math 对象用于执行数学任务. Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(). 语法 var ...

  9. JavaScript Number 对象

    JavaScript Number 对象 Number 对象 Number 对象是原始数值的包装对象. Number 创建方式 new Number(). 语法 var num = new Numbe ...

  10. JavaScript Array 对象

    JavaScript Array 对象 Array 对象 Array 对象用于在变量中存储多个值: var cars = ["Saab", "Volvo", & ...

随机推荐

  1. 前端JS 下载大文件解决方案

    问题场景 点击导出按钮,提交请求,下载excel大文件(超过500M),该文件没有预生成在后端, 直接以文件流的形式返回给前端. 解决方案 在Vue项目中常用的方式是通过axios配置请求,读取后端返 ...

  2. （私人收藏）2019科协WER解决方案

    2019科协WER解决方案 含地图,解决程序,详细规则,搭建方案EV3;乐高;机器人比赛;能力风暴;WER https://pan.baidu.com/s/16sdFmM49bPijYw55i8ox1 ...

  3. JSOI2015 Salesman（树型DP）

    [luogu6082] [题目描述] 某售货员小T要到若干城镇去推销商品,由于该地区是交通不便的山区,任意两个城镇之间都只有唯一的可能经过其它城镇的路线. 小T 可以准确地估计出在每个城镇停留的净收益 ...

  4. Kail系统更新指令

    0x00源更新 国内更新源 leafpad /etc/apt/sources.list 然后复制粘贴下面的源 #kali官方源 deb http://http.kali.org/kali kali-r ...

  5. 线下---复习day04---作业

    1 学的不好的同学:用ajax提交一个json格式数据,返回一个json格式数据,console.log打印出来 2 通过ajax上传一个文件并保存起来,前端接收到,弹窗说上传成功 urls.py f ...

  6. Flutter 1.17 新 Material motion 规范的预构建动画

    老孟导读:在 Flutter 1.17 发布大会上,Flutter 团队还发布了新的 Animations 软件包,该软件包提供了实现新的 Material motion 规范的预构建动画. 软件包 ...

  7. flask 源码专题（九）：flask扩展点

    1. 信号(源码) 信号,是在flask框架中为我们预留的钩子,让我们可以进行一些自定义操作. pip3 install blinker 2. 根据flask项目的请求流程来进行设置扩展点 中间件 # ...

  8. LDAP脚本批量导出用户

    背景:工作原因,搭建了LDAP服务,然后用户数过多,因为懒所以就通过python代码生成ldap脚本进行批量导入用户 1.整理用户名单,格式如下: 注:上述格式影响代码中的excel读取代码 2.py ...

  9. 使用Azure Application Insignhts监控ASP.NET Core应用程序

    Application Insignhts是微软开发的一套监控程序.他可以对线上的应用程序进行全方位的监控,比如监控每秒的请求数,失败的请求,追踪异常,对每个请求进行监控,从http的耗时,到SQL查 ...

  10. c++运行程序 改变字和背景的颜色与窗口大小和位置 (c++)(windows)

    关于改变字体的颜色和背景颜色: 在#include <windows.h> 库里 0=黑色 1=蓝色 2=绿色 3=湖蓝色 4=红色 5=紫色 6=黄色 7=白色 8=灰色 9=淡蓝色 A ...