JavaScript Set对象
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对象的更多相关文章
- javascript 全局对象--w3school
JavaScript全局对象 1. decodeURI()解析某个编码的URI. 2.decodeURInComponent()解析一个编码的URI组件. 3.encodeURI()把字符串编码为U ...
- JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString
JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString 如下示例: 直接写的a1就是一个Json对象,a2 就是一个Json对象字符串; 通 ...
- 从零构建JavaScript的对象系统
一.正统的类与继承 类是对象的定义,而对象是类的实例(Instance).类不可直接使用,要想使用就必须在内存上生成该类的副本,这个副本就是对象. 以Java为例: public class Grou ...
- 关于javascript自定义对象(来自网络)(最近几天不会的)
javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义 优点:动态的传递参数 缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...
- 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展
在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...
- JavaScript RegExp 对象
JavaScript RegExp 对象 RegExp 对象用于规定在文本中检索的内容. 什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的 ...
- JavaScript String 对象
JavaScript String 对象 String 对象 String 对象用于处理文本(字符串). String 对象创建方法: new String(). 语法 var txt = new S ...
- JavaScript Math 对象
JavaScript Math 对象 Math 对象 Math 对象用于执行数学任务. Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(). 语法 var ...
- JavaScript Number 对象
JavaScript Number 对象 Number 对象 Number 对象是原始数值的包装对象. Number 创建方式 new Number(). 语法 var num = new Numbe ...
- JavaScript Array 对象
JavaScript Array 对象 Array 对象 Array 对象用于在变量中存储多个值: var cars = ["Saab", "Volvo", & ...
随机推荐
- 断路器Hystrix(Ribbon)
微服务架构中,根据业务划分成若干个服务,各单元应用间通过服务注册与订阅的方式互相依赖,依赖通过远程调用的方式执行,该方式难以避免因网络或自身原因而出现故障或者延迟,从而并不能保证服务的100%可用,此 ...
- 安装完kali linux之后要做的10件事——113p.cn
1.添加国内更新源(可能不是最好的) vim /etc/apt/source.list 科技大学# deb http://mirrors.ustc.edu.cn/kali sana main non- ...
- 记一次解密wireshark抓取的冰蝎通信流量
一.关于冰蝎 1.1 简单介绍 冰蝎是一款基于Java开发的动态加密通信流量的新型Webshell客户端.老牌 Webshell 管理神器——中国菜刀的攻击流量特征明显,容易被各类安全设备检测,实际场 ...
- Netty 源码解析(七): NioEventLoop 工作流程
原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 今天是猿灯塔“365篇原创计划”第七篇. 接下来的时间灯塔君持续更新Netty系列一共九篇 Netty 源码解析(一): 开始 Netty 源 ...
- P2585 三色二叉树 题解
题目 一棵二叉树可以按照如下规则表示成一个由0.1.2组成的字符序列,我们称之为"二叉树序列S": \[S=\left\{ \begin{aligned} 0 &\ \ 表 ...
- 不用破解版的 Navicat 了,几款免费且好用的 SQL 客户端送给你
我是风筝,公众号「古时的风筝」. 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. 没别的意思,今天就是为了给你推荐几款 MySQL 客户端,这几款 ...
- 二、kafka 中央控制器、主题、分区、副本
集群和中央控制器 一个独立的Kafka服务器被称为broker.broker用来接收来自生产者的消息,为消息设置偏移量,并把消息保存到磁盘.换句话说,多个kafka实例组成kafka集群,每个实例(s ...
- (二)学习了解OrchardCore笔记——开篇:OrchardCore的中间件
现在开始看Starpup的中间件.这是一个扩展方法app.UseOrchardCore() public void Configure(IApplicationBuilder app, IHostEn ...
- How to install chinese input method
在Ubuntu中安装中文输入法确实比较麻烦,特别是英文版的Ubuntu系统 Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ib ...
- Web For Pentester靶场(xss部分)
配置 官网:https://pentesterlab.com/ 下载地址:https://isos.pentesterlab.com/web_for_pentester_i386.iso 安装方法:虚 ...