前言
当我们需要存储一些数据的时候，首先想到的是定义一个变量用来存储，之后我们可能学了数组，发现数组比变量可以存储更多的数据，接着可能有其它的存储数据的方法等等，这里介绍的是在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);//1,2,3,4,5
}
</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>五、set实例属性和方法
1、size属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>set中的size属性</title>
</head>
<body>
<script type="text/javascript">
const set=new Set();
//向set中添加成员
set.add(1);
set.add(2);
set.add(3);
//链式方法
set.add(4).add(5).add(6);
console.log(set.size);//6
</script>
</body>
</html>2、操作方法add()、delete()、has()、clear()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>set中的操作方法add()、delete()、has()、clear()</title>
</head>
<body>
<script type="text/javascript">
const set=new Set();
//向set中添加成员
set.add(1);
set.add(2);
set.add(3);
//链式方法
set.add(4).add(5).add(6);
console.log(set.size);//6
console.log(set.has(1));//true
set.delete(1);
console.log(set.has(1));//false
set.clear();//清空全部set成员
console.log(set.size);//0
</script>
</body>
</html>3、遍历方法keys()、values()、entries()、forEach()
注意：set的遍历顺序就是插入顺序，由于set没有键名，只有键值(或者说键名和键值是同一个值)，所以keys()和values()方法的行为完全一致<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>set中的遍历方法keys(),values(),entries(),forEach()</title>
</head>
<body>
<script type="text/javascript">
let set=new Set(['red','blue','green']);
//遍历全部的key
for(let key of set.keys()){
console.log(key);//red,blue,green
}
//遍历全部的value
for(let value of set.values()){
console.log(value);//red,blue,green
}
//遍历全部的key和value
for(let item of set.entries()){
console.log(item);//['red','red'],['blue','blue'],['green','green']
}
set.forEach((key,value)=>{
console.log(key+':'+value);
})
</script>
</body>
</html>Map数据结构
一、Map简介
es6中的map很大程度上和set相似，但是map是以键值对的形式存储数据的
二、常用的属性和方法
属性：
size：返回map结构的成员总数
方法：
set(key,value)：设置键名key对应的键值value,然后返回整个map结构，如果key已经有值，则键值会被更新，否则就新生成该键
get(key)：读取key对应的键值，如果找不到key,则返回undefined
has(key)：返回一个布尔值，表示某个键是否在当前map对象中
delete(key)：删除某个key,返回true,如果删除失败，返回false
clear()：清除所有成员，没有返回值
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：遍历map的所有成员
三、实例剖析
1、size属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map中的size属性</title>
</head>
<body>
<script type="text/javascript">
const map=new Map();
map.set('foo',true);
map.set('bar',false);
console.log(map.size);//2
</script>
</body>
</html>2、set(key,value)方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map中的set()方法</title>
</head>
<body>
<script type="text/javascript">
const map=new Map();
map.set('1','a');//键是字符串
map.set(2,'b');//键是数值
map.set(undefined,'3');//键是undefined
console.log(map);//'1'=>a,2=>b,undefinde=3
const myMap=new Map();
//链式写法
myMap.set(1,'a').set(2,'b').set(3,'c');
console.log(myMap);//1=>a,2=>b,3=>c
</script>
</body>
</html>3、get(key)方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map中的get()方法</title>
</head>
<body>
<script type="text/javascript">
const map=new Map();
const hello=function(){
console.log('你好');
}
map.set(hello,'es6');//键是函数
console.log(map.get(hello));//es6
</script>
</body>
</html>4、has(key)方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map中的has()方法</title>
</head>
<body>
<script type="text/javascript">
const map=new Map();
//链式写法
map.set('a',1).set('b',2).set('c',3);//向map中添加成员
console.log(map.has('a'));//true
console.log(map.has('b'));//true
console.log(map.has('c'));//true
console.log(map.has('d'));//false
</script>
</body>
</html>5、delete(key)方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map中的delete方法</title>
</head>
<body>
<script type="text/javascript">
const map=new Map();
map.set('a',1);
console.log(map.has('a'));//true
map.delete('a');//删除键a
console.log(map.has('a'));//false
</script>
</body>
</html>6、clear()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map中的clear()方法</title>
</head>
<body>
<script type="text/javascript">
const map=new Map();
map.set('foo',true);//向map中添加成员
map.set('bar',false);
console.log(map.size);//2
map.clear();//清除map中的全部成员
console.log(map.size);//0
</script>
</body>
</html>7、遍历方法keys()、values()、entries()、forEach()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍历方法keys(),values(),entries(),forEach()</title>
</head>
<body>
<script type="text/javascript">
const map=new Map();
//向map中添加成员
map.set(1,'a');
map.set(2,'b');
map.set(3,'c');
//遍历全部的键
for(let key of map.keys()){
console.log(key);//1,2,3
}
//遍历全部的值
for(let values of map.values()){
console.log(values);//a,b,c
}
//遍历全部的键和值
for(let [key,value] of map.entries()){
console.log(key,value);//1=>a,2=>b,3=>c
}
for(let item of map.entries()){
console.log(item[0],item[1]);//1=>a,2=>b,3=>c
}
for(let [key,value] of map){
console.log(key,value);//1=>a,2=>b,3=>c
}
map.forEach(function(value,key){
console.log(key,value);
})
</script>
</body>
</html>注意：
这里的forEach()是值在前，键在后