前言
当我们需要存储一些数据的时候,首先想到的是定义一个变量用来存储,之后我们可能学了数组,发现数组比变量可以存储更多的数据,接着可能有其它的存储数据的方法等等,然而我今天需要介绍的是在ES6中比较常见使用的数据类型结构,Set和Map。
Set数据结构
一、Set简介
-
set中成员的值都是唯一的,没有重复的值
-
向set中添加成员时,不会发生类型转换
-
向set中添加的对象总是不想等
二、常用的属性和方法
属性:
-
size:返回set实例的成员总数
方法:
-
add():添加某个值,返回set本身
-
delete():删除某个值,返回一个布尔值,判断删除是否成功
-
has():返回一个布尔值,表示该值是否为set成员
-
clear():清除所有成员,没有返回值
-
keys():返回键名的遍历器
-
values():返回键值的遍历器
-
entries():返回键值对的遍历器
-
forEach():使用回调函数遍历每个成员
三、实例剖析
为了方便大家更好的了解和学习set,我在这里会将这些方法和属性进行分类整理和讲解
1、set的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组去重</title>
</head>
<body>
<script type="text/javascript">
const set=new Set(); //创建set数据结构
[1,1,2,3,4,5].forEach(x=>{
set.add(x);
})
console.log(set); //1,2,3,4,5
for(let i of set){
console.log(i);
}
</script>
</body>
</html>
可以看到向Set添加成员时,不会添加重复的值
2、数组作为参数传入到set结构中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
// const set=new Set([1,2,3]);
// console.log(...set);//1,2,3,使用扩展运算符
const set=new Set(document.querySelectorAll('div'));
console.log(set.size);//5 size返回set实例的成员总数
//如上代码相当于
const item=new Set();
document.querySelectorAll('div').forEach(x=>{
item.add(x);
})
console.log(item);
console.log(item.size);//5
</script>
</body>
</html>
3、set中添加的值不会发生类型转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>向set中添加成员时,不会发生类型转换</title>
</head>
<body>
<script type="text/javascript">
let mySet=new Set();
mySet.add(5);
mySet.add('5');
console.log(mySet);//5,'5'
let set=new Set();
let a=NaN;
let b=NaN;
set.add(a);
set.add(b);
console.log(set);//NaN
</script>
</body>
</html>
向 Set 加入值的时候,不会发生类型转换,所以5
和"5"
是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(===)
,主要的区别是向 Set 加入值时认为NaN
等于自身,而精确相等运算符认为NaN
不等于自身。
4、set中添加的对象总是不想等的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>向set中添加的对象总是不想等</title>
</head>
<body>
<script type="text/javascript">
let set=new Set();
set.add({});//向set中添加一个空对象
console.log(set.size);//1
set.add({});//向set中添加另一个空对象
console.log(set.size);//2
</script>
</body>
</html>
由于两个空对象不相等,所以它们被视为两个值
5、Array.from()方法
Array.from()可以将set结构转为数组,这就提供了去除数组重复成员的另一种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array.from()方法</title>
</head>
<body>
<script type="text/javascript">
const items=new Set([1,2,3,4,5]);
console.log(items);//1,2,3,4,5
const array=Array.from(items);
console.log(array);//1.2.3,4,5
//Array.from()方法实现数组去重
function dedupe(arr){
return Array.from(new Set(arr))
}
console.log(dedupe([1,1,2,3]));//1,2,3
</script>
</body>
</html>
四.遍历的应用
1、数组去重
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组去重</title>
</head>
<body>
<script type="text/javascript">
let set=new Set(['red','blue','green']);
let arr=[...set];
console.log(arr);//red,blue,green
//数组去重
let arrs=[1,1,3,3,4,5,6];
let unique=[...new Set(arrs)];
console.log(unique);//1,3,4,5,6
</script>
</body>
</html>
2、间接使用数组的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>间接使用数组的方法</title>
</head>
<body>
<script type="text/javascript">
let set=new Set([1,2,3,4,5]);
set=new Set([...set].map(x=>x*2));//使用数组的map方法
console.log(set);//2,4,6,8,10
let mySet=new Set([1,2,3,4,5]);
mySet=new Set([...mySet].filter(x=>x%2==0));//使用数组的filter方法
console.log(mySet);//2,4
</script>
</body>
</html>
3、实现并集,交集,差集
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现并集,交集,差集</title>
</head>
<body>
<script type="text/javascript">
let a=new Set([1,2,3]);
let b=new Set([4,3,2]);
//并集
let union=new Set([...a, ...b]);
console.log(union);//1,2,3,4
//交集
let intersect=new Set([...a].filter(x=>b.has(x)));
console.log(intersect);//2,3
//差集
let difference=new Set([...a].filter(x=>!b.has(x)));
console.log(difference);//1
</script>
</body>
</html>