深入浅出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'));	// 5
console.log(map1.has('c'));	// true
map1.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的内容都是常用的或者相对重要的，如果你想学习更多细节内容请观看：http://es6.ruanyifeng.com/#docs/iterator 预知ES2018新增内容如何，请小伙伴们时刻关注我哦 （＾∀＾）/~~~

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

欢迎访问我的GitHub，喜欢的可以star，项目随意fork，支持转载但要下标注，同时恭候：个人博客

等一下( •́ .̫ •̀ )，我还有最后一句话：
这里虽然没有都市的繁华，
也没有山林的鸟语花香，
只有一片如水的宁静，
古人云：
既来之则安之，
既然来到了这里，
就可以静心休憩你的灵魂，
调养你疲惫的心，
再见…