Set(集合)类型
2020-04-26 本文已影响0人
小雪洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set(集合)类型</title>
</head>
<body>
</body>
<script>
//集合的元素不会重复，它会自行过滤掉重复元素
let a=[1,1,2,1,1];
console.log(a);
let set = new Set(a);
set.add(1);
set.add(1);
console.log(set);//{1}
let set0=new Set([1,2,3,1]);
console.log(set0.keys());//SetIterator {1, 2, 3}返回一个迭代器
console.log(set0.values());
console.log(set0);//{1,2,3};
let set1=new Set(["hxj","ydc"]);
console.log(set1.keys());
console.log(set1.values());
console.log(set1);//{"hxj", "ydc"}
console.log(set1.size);//2 集合大小
console.log(set1.has("hxj"));//true 集合内是否含有该元素
console.log(set1.add("hwx"));//{"hxj", "ydc", "hwx"}添加元素
console.log(set1.delete("hwx"));//true 删除元素
console.log(set1);// {"hxj", "ydc"}
console.log(set.clear());//undefined 彻底清空元素
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set类型转换</title>
</head>
<body>
</body>
<script>
//Set类型转数组
let set =new Set(["hxj","ydc"]);
console.log(set);//{"hxj", "ydc"}
console.log(Array.from(set));//["hxj","ydc"],
console.log(set);//{"hxj", "ydc"} 使用Array.from(set)不会转换原来set的类型
let hd=new Set("12345");
console.log([...hd]);// ["1", "2", "3", "4", "5"]
console.log(hd);//{"1", "2", "3", "4", "5"}
//筛选集合hd中大于3的元素
let arr=[...hd].filter(function(item){
return item>3;
});
console.log(arr);//["4", "5"]
console.log(new Set(arr));//{"4", "5"}
//数组转Set类型
let a=[1,2,3,4,1,1];
let s=new Set(a)
console.log(s);// {1, 2, 3, 4}
console.log([...s])//[1,2,3,4]
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set类型的元素遍历</title>
</head>
<body>
</body>
<script>
let set =new Set(["hxj","ydc"]);
console.log(set.values());//{"hxj", "ydc"}
console.log(set.keys());//{"hxj", "ydc"}实际上Set类型的键和值是一样的
console.log(set.entries());
//遍历
for(let value of set){
console.log(value);
}// hxj ydc
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>并集交集和差集</title>
</head>
<body>
</body>
<script>
let a= new Set([1,2,3,4,5]);
let b=new Set([4,5,6,7,2]);
//取并集
console.log(new Set([...a,...b]));{1, 2, 3, 4, 5,6,7}
let c=new Set([1,2,3,4,5]);
let d=new Set([4,5,6,7,2]);
//取差集，提取c中不属于d的元素
let e =[...c].filter(function(item){
return !d.has(item);
});
//注意点1：filter是数组的方法，必须先将Set类型转成数组类型
//注意点2：数组的filter方法会遍历所有元素，返回值是满足条件的新数组元素
//注意点3：filter过滤数组，返回新数组元素用一个变量接收一下，但原数组保持不变
//注意点4：Set类型的数据判断集合内是否含有某元素d.has(item),返回true/false
console.log(c);//{1, 2, 3, 4, 5}
console.log(e);//[1, 3]
//取交集
let f=new Set([1,2,3,4,5]);
let g=new Set([4,5,6,7,2]);
//提取既在f中又在g中的元素
let h=[...f].filter(function(item){
return g.has(item);
});
console.log(h);//[2, 4, 5]
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用Set类型处理网站关键词</title>
</head>
<body>
<input name='search' />
<ul></ul>
</body>
<script>
let obj={
data:new Set(),
set keyWord(word){
this.data.add(word);
},
show(){
let ul=document.querySelector("ul");
ul.innerHTML="";
this.data.forEach(function(item){
ul.innerHTML +=`<li>${item}</li>`;
});
}
};
let input =document.querySelector("[name='search']");
input.addEventListener("blur",function(){
obj.keyWord=this.value;
obj.show();
});
</script>
</html>
