iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 27
1

資料結構 Met 使用方式
上一篇學習了 Set,今天要練習的 Map 也是 ES6 中提出的一種資料結構,跟 Set 蠻像的,只是 Map 存取的是鍵值對,所以也跟物件蠻像的,但有以下差別:

  • Map 的鍵值(key)可以是任意的資料型態,包括函數,物件以及原始的資料型態。
  • 可以使用 size 獲得 Map 的大小。
  • Map 是可迭代的。
  • 如果要頻繁新增或刪除鍵值對,Map 可能表現得更好。

今天就來練習看看使用方式ㄅ!有些方法跟 Set 蠻類似的,在開始之前建議可以了解一下 Set 歐:

文章連結:陣列好兄弟 Set 怎麼用? - 以 30 天平民滷肉飯挑戰為例

使用方式

以朋友名單為例,假如我們用 Map 紀錄我的好友們的特性:

const friends = new Map();

● set() 新增元素

映萱是我的朋友:

const friends = new Map();
friends.set('映萱',80);
console.log(friends); // Map(1) {"映萱" => 80}

鍵值可以是任意型態,所以也可以這寫:

const friends = new Map();
friends.set({'姓名':'映萱','體重巔峰':80,'綽號':'兄兄'},'82/7/27');

● get() 取得屬性值

想要知道映萱的體重,可以這樣寫:

const friends = new Map();
friends.set('映萱',80)
console.log(friends.get('映萱')); // 80

● size 取得鍵值對的數量

const friends = new Map();
friends.set('映萱',80)
friends.set('阿華',75)
console.log(friends.size); //2

● has() 查看某個屬性是否存在 Map 中,返回 true 或 false

看看好友名單有沒有映萱

console.log(friends.has('映萱')); // true

● delete() 刪除元素

跟阿華絕交了:

friends.delete('阿華');
console.log(friends); // Map(1) {"映萱" => 80}

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

突然很負面,覺得我沒有真正的朋友:

friends.clear();
console.log(friends); // Map(0) {}

● 可以使用 forEach() 循環

const friends = new Map([['映萱',80],['阿華',75]]);
friends.forEach(function(value,key){
  console.log(`${key}的人生巔峰是${value}`);
  //映萱的人生巔峰是80
  //阿華的人生巔峰是75
});

參考資料:
MDN:Map
CodecastsJS:ES6 Map


上一篇
Day26【ES6 小筆記】 陣列好兄弟 Set 怎麼用? - 以 30 天平民滷肉飯挑戰為例
下一篇
Day28【ES6 小筆記】 建構式ㄉ語法糖 - Class 超基本使用範例
系列文
透過 ESLint 練習 JavaScript ES630

尚未有邦友留言

立即登入留言