1- Set() 的功能
– Set 類似 Array，但其中元素的值都會是唯一不重複的。
– Set 甚至可以搭配 Array 使用，例如將 Array 的值 unique (唯一值)。
2-Set 建構式
1 | new Set([iterable]) |
Set 接受一個可迭代的參數或是 null 或是不給予，且建構式將回傳一個 Set 物件實例
1 2 3 4 5 6 7 8 9 10 | const setArr1 = new Set() console.log(setArr1) // [object Set] const arr = [1, 2, 3, 4, 5, 5, '5'] const setArr2 = new Set(arr) for (let i of setArr2) { console.log(i) } // 1 2 3 4 5 5 |
Set 的值將會唯一，但給予的參數不會自轉型別，因此數字 5 與最後字串 '5' 將被視為不同的兩個值。
運行之後的二個數字 5 運算後視為重覆的值，而最後的 5 就是字串 '5'。
3-Set 方法 – .add() 新增元素
1 2 | const set = new Set() console.log(set) |
指令輸入完後，會回應是一個 Set [] (空的類陣列) ，點開 <entries> 裡面也是空的。
![[重點整理]Vue出一個電商網站-46. 元件 章節作業說明-2](/wp-content/uploads/重點整理Vue出一個電商網站-46.-元件-章節作業說明-2.jpg)
接著使用 Set 的方法 .add() 將值加入到變數 const set 裡。
1 2 | set.add(1) set.add(2) |
此時可以見到 <entries> 的變數，但特別的地方是 size: 2。
![[重點整理]Vue出一個電商網站-46. 元件 章節作業說明-3](/wp-content/uploads/重點整理Vue出一個電商網站-46.-元件-章節作業說明-3.jpg)
接著將值在加入字數 5 與字串 '5'。
1 2 3 4 | set.add(5) console.log(set.size) // 3 set.add('5') console.log(set.size) // 4 |
比較 FireFox 與 Chrome 的結果，不知為何 FireFox 會在 set.add(5) 時裡面會 size: 4 ，正常比照 Chrome 的話是 size: 3。
![[重點整理]Vue出一個電商網站-46. 元件 章節作業說明-4](/wp-content/uploads/重點整理Vue出一個電商網站-46.-元件-章節作業說明-4.jpg)
![[重點整理]Vue出一個電商網站-46. 元件 章節作業說明-5](/wp-content/uploads/重點整理Vue出一個電商網站-46.-元件-章節作業說明-5.jpg)
4-Set 方法 – .delete() 移除 set 中的元素
.delete() 方法移除 set 中的元素，返回 true / false 的布林值。
1 2 3 | console.log(set.delete(1)) // true console.log(set.delete('apple')) // false console.log(set.size) // 3 |
資料來源
– 2018 iT 邦幫忙鐵人賽 – CIAN – 重新學習網頁設計系列 第 11 篇 – DAY 11. JavaScript Map and Set
– 阮一峰 – ECMAScript 6 入门 – Set 和 Map 数据结构