iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
1
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 26

Day26【ES6 小筆記】 陣列好兄弟 Set 怎麼用? - 以 30 天平民滷肉飯挑戰為例

資料結構 Set 使用方式

Set (集合) 是 ES6 中提出的一種資料結構,跟陣列蠻像的,只是他所有的元素都是唯一的,不會有重複的值存在,也沒有順序之分,所以也不能透過 [0] 這種方式取得元素!

Set 也有很多豐富的方法提供我們使用,今天我們就以 30 天平民滷肉飯挑戰為例來應用看看ㄅ~


使用方式

假如我們需要一個 Set 儲存熊哥吃的滷肉飯,就可以這樣寫:

const rice = new Set();

將前幾天吃過的滷肉飯先新增進去:

const rice = new Set(['玉女號魯肉飯','原味魯肉飯','司機俱樂部魯肉飯','檸檬奶油煙燻鮭魚燉飯']);

● add() 新增元素

今天吃了「萬和無招牌魯肉飯」,可以這樣新增:

rice.add('萬和無招牌魯肉飯');

● size 確認元素總共有幾個

想知道總共吃了幾間滷肉飯,可以這樣寫:

console.log(rice.size); 

● has() 檢驗某個元素是否存在,回傳 false 或 true

明天想吃「源味滷肉飯」,但有點眼熟,不確定有沒有吃過,可以這樣確認:

console.log(rice.has('源味滷肉飯')); // false

但如果是去吃已經吃過的「玉女號魯肉飯」,會無法新增到 Set 中,因為 Set 中不會有重複的值:

const rice = new Set(['玉女號魯肉飯','原味魯肉飯','司機俱樂部魯肉飯','檸檬奶油煙燻鮭魚燉飯']);
rice.add('玉女號魯肉飯');
console.log(rice);
// Set(4) {"玉女號魯肉飯", "原味魯肉飯", "司機俱樂部魯肉飯", "檸檬奶油煙燻鮭魚燉飯"}

● delete() 刪除元素

今天赫然發現前幾天去那一天義法餐館吃的 檸檬奶油煙燻鮭魚燉飯 不小心算進去了,可以這樣刪除:

rice.delete('檸檬奶油煙燻鮭魚燉飯');

● clear() 移除掉所有的元素

熊哥突然就是想要刪除所有滷肉飯紀錄:

rice.clear(); // Set(0) {}

以上就是基本使用介紹啦!我們謝謝熊哥!


Set 應用 - 取出並集、交集、差集

如果我跟映萱要一起辦個烤肉趴,各自邀請自己的朋友共襄盛舉,需要整理一個邀請名單,各自存在陣列中:

let me = ['阿華','老伴','狗狗'];
let sh = ['老伴','蟲蟲','狗狗'];

去除重複的值(並集)

跟映萱要整理出重複邀請的朋友有誰:

friends = [...me,...sh]; // 先將陣列合併
friendsSet = new Set(friends); // 將合併好的陣列轉為 Set 去重
friends = [...friendsSet] // 再利用展開運算子將 Set 轉回陣列

console.log(friends); // ["阿華", "老伴", "狗狗", "蟲蟲"]

成功得到邀請名單囉!

找出兩個陣列中重複的值(交集)

看一下重複邀請的人有哪些:

sh = new Set(sh);
friends = me.filter(name=> sh.has(name));

console.log(friends); // ["老伴", "狗狗"]

找出兩個陣列中的差集

映萱不認識我的哪個朋友:

sh = new Set(sh);
friends = me.filter(name=> !sh.has(name));

console.log(friends); // ["阿華"]

我不認識映萱哪個朋友:

me = new Set(me);
friends = sh.filter(name=> !me.has(name));

console.log(friends); // ["蟲蟲"]

參考資料:
TechBridge:用 JavaScript 學習資料結構和演算法:集合(Set)篇
程式前沿:ES6學習筆記之Set和Map資料結構詳解
CodecastsJS:ES6 Set
應熊:30天30碗平民魯肉飯完食!


上一篇
Day25【ES6 小筆記】有點規矩!讓你的程式碼整整齊齊~
下一篇
Day27【ES6 小筆記】 物件好兄弟 Map 使用方式
系列文
透過 ESLint 練習 JavaScript ES630

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2019-10-16 04:04:00

等等....
檸檬奶油煙燻鮭魚燉飯
/images/emoticon/emoticon19.gif

我要留言

立即登入留言