?? 個人主頁歡迎訪問 ??
大家好灰粮，本人名叫蘇日儷格粘舟，大家叫我 （格格） 就好柑肴，在上一章節(jié)中我們學到了async函數(shù)的用法晰骑，下面我們一起來繼續(xù)學習Set & Map數(shù)據(jù)結構：
學過Java的人都知道硕舆，Set是一個集合骤公，那么在我們JavaScript中阶捆，他作為一個類數(shù)組的數(shù)據(jù)結構出現(xiàn)洒试，為什么叫做類數(shù)組呢？它又有什么功能呢娱挨？它和數(shù)組有什么不同之處呢跷坝？下面我們帶著疑問一起來看一下：
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輸出效果：
從上面兩者輸出的內容就可以看出他們的不同：
因為他沒有我們數(shù)組的長度(length)淮韭，只有個數(shù)(size)靠粪，把個體放進一個花括號內占键，因此我個人還是喜歡稱呼Set為一個集合元潘，大家都應該知道牲距，我們第一次認識這個概念的地方應該是在我們的數(shù)學課上钥庇，就有了集合的概念评姨，其實和這個類似参咙，除此之外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和value是相等的
既然我們數(shù)組里都有一些操作方法净宵，那我們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():使用回調函數(shù)遍歷每個成員
let set1 = new Set([1,2,3,4]);
set1.forEach((value, index)=>{
console.log(value, index);
// 1 1
// 2 2
// 3 3
// 4 4
});
小白：說了這么多，具體什么時候用，到底有多大用呢妥箕？
格格：它的最大用處就是數(shù)組去重坎吻，非常方便省去了很多代碼：
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]
很簡單就是將數(shù)組放到集合中黍瞧，再通過擴展運算符轉換成數(shù)組污尉，轉換成數(shù)組才不會被局限于那些set自帶的方法，可以使用數(shù)組的所有方法兴喂，還是很靈活的酱酬，舉一個例子：
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}
小白：可不可以用數(shù)組來操作json呢？
格格：既然已經(jīng)說了缀皱，Set集合是一個類似于數(shù)組的東西赁咙，就是用來和數(shù)組一塊玩的，不過偏要往里放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添加進去，然后再循環(huán)出來
格格：由于Set操作json很麻煩，因此有了第二個東西宫患，那就是Map
小白：這個好像在java里面也見過畜吊，大學的數(shù)據(jù)結構里面也有吧
Set集合類似于數(shù)組捌年，那么這個Map就類似于json托酸，也可以把這個Map視為其他語言的Map的數(shù)據(jù)結構应结，即一組鍵值對，那么為啥和json不一樣呢贱案？有什么區(qū)別呢瘩燥？
由于JavaScript中的鍵值對的key的命名只能是字符串服鹅，其實用其他數(shù)據(jù)類型比如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值
初次之外呢，循環(huán)的用法也是和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循環(huán)
// console.log(index, val);
//});
for (let [key, value] of map1) { // for..of..循環(huán)
console.log(key, value);
}
我的個人理解叶组，Map集合是具備json的所有功能溢十，還多出了命名是任意類型张弛，所以Map就是強化版的json覆糟，以后工作中可以常用Set集合和Map集合
關于Set & Map數(shù)據(jù)結構我們都已經(jīng)了然于心滩字，以上所有的ESNext的內容都是常用的或者相對重要的挟裂，如果你想學習更多細節(jié)內容請觀看：http://es6.ruanyifeng.com/#docs/iterator 預知ES2018新增內容如何交排，請小伙伴們時刻關注我哦 （＾?＾）/~~~
本文的所有內容均是一字一句敲上去的，希望大家閱讀完本文可以有所收獲，因為能力有限，掌握的知識也是不夠全面施符，歡迎大家提出來一起分享往声！謝謝O(∩_∩)O~
歡迎訪問我的GitHub，喜歡的可以star戳吝，項目隨意fork浩销，支持轉載但要下標注，同時恭候：個人博客
等一下( ?? .? ?? )听哭，我還有最后一句話：
這里雖然沒有都市的繁華撼嗓，
也沒有山林的鳥語花香，
只有一片如水的寧靜欢唾，
古人云：
既來之則安之且警，
既然來到了這里，
就可以靜心休憩你的靈魂礁遣，
調養(yǎng)你疲憊的心斑芜，
再見...
