深入浅出ES6教程『Set & Map数据结构』

大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了async函数的用法，下面我们一起来继续学习Set & Map数据结构：

学过Java的人都知道，Set是一个集合，那么在我们JavaScript中，他作为一个类数组的数据结构出现，为什么叫做类数组呢？它又有什么功能呢？它和数组有什么不同之处呢？下面我们带着疑问一起来看一下：

let arr = [1,2,5,4];console.log(arr);  // [1, 2, 5, 4]

arr输出效果：

let set1 = new Set([1,2,5,4]);console.log(set1);  // {1, 2, 5, 4}

set输出效果：

从上面两者输出的内容就可以看出他们的不同：
因为他没有我们数组的长度(length)，只有个数(size)，把个体放进一个花括号内，因此我个人还是喜欢称呼Set为一个集合，大家都应该知道，我们第一次认识这个概念的地方应该是在我们的数学课上，就有了集合的概念，其实和这个类似，除此之外set集合还有哪些特点呢？

let arr = [1,2,1];let set1 = new Set([1,2,1]);console.log(arr);   // [1, 2, 1]console.log(set1);  // {1, 2}

set集合里面的元素不会重复，也就是唯一的，默认的值是value值，没有key

既然我们数组里都有一些操作方法，那我们Set集合也有自己的方法：

• add(value):添加某个值，一个一个的添加，返回Set结构本身

let set1 = new Set();console.log(set1);  // {}set1.add(1);
set1.add(2);console.log(set1);  // {1, 2}

• delete(value):删除某个值，一个一个的删除，返回一个布尔值，表示删除成功

let set1 = new Set([1,2,3,4]);
console.log(set1);  // {1, 2, 3, 4}set1.delete(1);
set1.delete(2);
console.log(set1);  // {3, 4}

• has(value):返回一个布尔值，表示Set集合里是否含有该子集

let set1 = new Set([1,2,3,4]);console.log(set1);  // {1, 2, 3, 4}console.log(set1.has(1));   // true

• clear():清除集合里的所有成员，没有返回值

let set1 = new Set([1,2,3,4]);console.log(set1);  // {1, 2, 3, 4}set1.clear();console.log(set1);  // {}

• forEach():使用回调函数遍历每个成员

let set1 = new Set([1,2,3,4]);
set1.forEach((value, index)=>{    console.log(value, index);//  1 1//  2 2//  3 3//  4 4});

小白：说了这么多，具体什么时候用，到底有多大用呢？
格格：它的最大用处就是数组去重，非常方便省去了很多代码：

let arr = [1,2,2,3,5,2,5,4,8,3,6,1];let set1 = new Set(arr);console.log([...set1]); // [1, 2, 3, 5, 4, 8, 6]

很简单就是将数组放到集合中，再通过扩展运算符转换成数组，转换成数组才不会被局限于那些set自带的方法，可以使用数组的所有方法，还是很灵活的，举一个例子：

exp：有一个集合set1，将该集合中的每一项加上1，返回一个新集合set2：

let set1 = new Set([1,2,3,4]);let arr = [...set1].map((val) => val + 1);let set2 = new Set(arr);console.log(set2);  // {2, 3, 4, 5}

小白：可不可以用数组来操作json呢？
格格：既然已经说了，Set集合是一个类似于数组的东西，就是用来和数组一块玩的，不过偏要往里放json呢，也绝对不含糊

let set1 = new Set();let json1 = {    a: 1,    b: 2};
set1.add(json1);console.log(set1);  // Set(1) {{…}}set1.forEach((item) => {    console.log(item);  // {a: 1, b: 2}});

如果直接在定义里面就写入json的话事会报错的，像这样new Set({1,2}); 只能是用add添加进去，然后再循环出来

格格：由于Set操作json很麻烦，因此有了第二个东西，那就是Map
小白：这个好像在java里面也见过，大学的数据结构里面也有吧

Set集合类似于数组，那么这个Map就类似于json，也可以把这个Map视为其他语言的Map的数据结构，即一组键值对，那么为啥和json不一样呢？有什么区别呢？

由于JavaScript中的键值对的key的命名只能是字符串，其实用其他数据类型比如Number也很合理，那么Map就可以解决这个问题，Map的方法我就不一一举例了，下面我们一块来了：

let map1 = new Map();let json1 = {    a: 1,    b: 2};
map1.set(json1, 3);
map1.set('c', json1);
map1.set('c1', 5);console.log(map1);  // Map(3) {{…} => 3, "c" => {…}, "c1" => 5}console.log(map1.get('c1'));    // 5console.log(map1.has('c')); // truemap1.delete(json1);console.log(map1);  // Map(2) {"c" => {…}, "c1" => 5}

综上所述，Map的所有方法都是通过操作key的，

• set(key,value)：是通过set来设置键值对的

• get(key)：通过get获取key来得到value值
  初次之外呢，循环的用法也是和Set的一模一样：

let map1 = new Map();let json1 = {    a: 1,    b: 2};
map1.set(json1, 3);
map1.set('c', json1);
map1.set('c1', 5);//map1.forEach((val, index) => {  // forEach循环//  console.log(index, val);//});for (let [key, value] of map1) {  // for..of..循环
    console.log(key, value);
}

我的个人理解，Map集合是具备json的所有功能，还多出了命名是任意类型，所以Map就是强化版的json，以后工作中可以常用Set集合和Map集合

关于Set & Map数据结构我们都已经了然于心，以上所有的ESNext的内容都是常用的或者相对重要的

本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~

作者：苏日俪格
链接：https://www.jianshu.com/p/2c8ff58134b0