Set和Weakset的使用
Set和Weakset的使用
之前就了解过Set和WeakSet，但是只是了解，没有对其进行总结。这篇博客就是总结Set和WeakSet的一些方法。
一、理解Set
① 简述
Set是一个引用数据类型，我们可以理解为集合，在Set中我们需要注意其中的元素是不可以重复的，而且Set是严格数据类型，比如说‘1’和1是两个不同的元素，但是对于数组而言，它会将其转化成同一种数据类型（字符串）。
②方法
<script>
let set = new Set(); //创建一个set实例对象
//添加元素的方法add
set.add('sicau'); //向对象中添加元素
//判断是否存在某一个元素
set.has('sicau'); //如果存在就返回true,否则返回false
//删除某一个元素
set.delete('sicau'); //如果删除成功就返回true,否则返回false
//size返回set实例对象的长度
console.log(set.size); //放回set中元素个数
//values()，keys(),entries()方法中，由于set中是几个，不存在键和值的情况，则values()和keys()返回的结果都是一样的
for(let item of set){
console.log(item); //sicau
}
script>
初始化实例对象时如果将一个字符串直接传进去，则当进行遍历时，就会直接将每一个字符打印出来。
<script>
let set = new Set('sicau');
console.log(set); //set_3.html:24 Set(5) {"s", "i", "c", "a", "u"}
script>
③和数组之间相互转换
数组的方法很多，当一个Set实例化对象，如果想要想要使用某一种方法，但是自身并没有，我们可以将其转化成数组类型的数据，然后再将其转化回来。
例子一 :使用set转化成数组，达到筛选的目的
<script>
let set = new Set('123456789');
let arr = Array.from(set);
// let arr = [...set];
let arr_1 = arr.filter(item=>{
return item<5;
})
set = new Set(arr_1)
console.log(set);
script>
例子二 使用数组转化成set类型，达到去重的目的
<script>
let arr = [1,2,3,4,6,4,4,5,1,2,5];
console.log(new Set(arr));
script>
例子三使用set求并集和交集
<script>
let a = new Set([1,2,3,4,5,6,7,8]);
let b = new Set([4,3,7,8,9,0]);
//求并集
console.log(new Set([...a,...b]));
//求两个几个的共同元素
let h = [...a].filter(item=>{
return b.has(item);
})
//求a中独有的元素
let hh = [...a].filter(item=>{
return !b.has(item);
})
console.log(hh);
script>
Set的应用：这是一个简单的搜索去重
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.container{
width: 300px;
height: 300px;
margin: 100px auto;
}
style>
head>
<body>
<div class="container">
<input type="text" name='hd'>
<ul>ul>
div>
<script>
let obj = {
data : new Set(),
show(){
let ul = document.querySelector("ul");
ul.innerHTML = '';
this.data.forEach(item =>{
ul.innerHTML += `${
item}`
})
}
}
let input = document.querySelector("[name='hd']");
input.addEventListener("blur",()=>{
// console.log();
obj.data.add(input.value);
obj.show();
})
script>
body>
html>
二、WeakSet的理解
关于WeakSet我们需要知道的是，这是一个弱引用类型，关于什么是弱引用类型在上一篇博客（Map 和WeakMap）中讲过了，这里就不做多余的阐述了。
①方法
<script>
let set = new WeakSet(); //新建一个WeakSet实例对象
//add添加方法
set.add(['set','put']);
set.has(['set','put']); //true
set.delete(['set','put']);// 如果存在就为true
script>
这里我们需要注意由于WeakSet是一个弱引用类型，所以传值只能传引用类型，而不能传原始值，而且在weakSet中不存在values()和keys（）以及entries()等遍历迭代方法，并且set,clear()方法也是对WeakSet不适用的。
②小demo 关于Todolist。
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
margin: 100px auto;
width: 300px;
height: 200px;
}
ul{
list-style: none;
}
li{
width: 300px;
height: 40px;
border: 1px solid #000000;
line-height: 40px;
text-align: center;
}
li a{
width: 30px;
height: 30px;
background: red;
display: inline-block;
margin: 5px;
line-height: 30px;
text-decoration: none;
}
style>
head>
<body>
<div>
<ul>
<li>javascript高级程序设计<a href="javascript:;">Xa>li>
<li>node深入浅出<a href="javascript:;">Xa>li>
<li>数据结构与算法<a href="javascript:;">Xa>li>
ul>
div>
<script>
class Todo{
constructor(){
this.lis = document.querySelectorAll("ul>li");
this.set = new WeakSet();
this.lis.forEach(li=>{
this.set.add(li);
})
this.run();
}
run(){
this.addEvent();
}
addEvent(){
this.lis.forEach(item =>{
item.querySelector('a').addEventListener("click",(event)=>{
// console.log(event.target.parentNode);
let a = event.target;
let liEle = event.target.parentNode;
if(this.set.has(liEle)){
this.set.delete(liEle);
a.innerHTML = '√';
a.style.backgroundColor= "green";
}else{
this.set.add(liEle);
a.innerHTML = 'X';
a.style.backgroundColor= "red";
}
})
})
}
}
new Todo();
script>
body>
html>
以上便是我对Set和WeakSet的总结，如果有错误欢迎指正。