javascript 的 Map 與 Set

Map 和 Set 是 ES6 新加入的資料結構,Map 很像物件,因為它們可以將一個鍵對應到一個值,Set 很像陣列,但它無法被複製。

Map

在 ES6 之前,當你需要將鍵對應到值的時候,會使用物件,因為物件可以讓鍵對應到各種型態的物件值,可是這樣使用物件會有許多缺點:

  • 因為物件的原型特性,代表你有可能會對應到意外的東西。
  • 你不容易知道一個物件裡面有多少對應
  • 鍵必須是字串或符號,讓你無法將物件對應到值
  • 物件不保證特性的順序

 

Map 物件可以解決這些缺點,而且很適合將鍵對應到值,比如說想要將使用者物件對應到角色:

const u1={name: 'John'}
const u2={name: 'Tom'}
const u3={name: 'Mary'}

建立 map

const userRoles= new Map();

 

使用 map 的 set() 來指派角色給使用者。

userRoles.set(u1, 'User')
userRoles.set(u2, 'User')
userRoles.set(u3, 'Admin')

 

也可以鏈結

userRoles.set(u1, 'User')
.set(u2, 'User')
.set(u3, 'Admin')

 

也可以傳遞陣列的陣列給建構式

const userRoles= new Map([
  [u1, 'User'],
  [u2, 'User'],
  [u3, 'Admin']
]);

 

如果想要知道 u2 角色是什麼,可以使用 get() 方法

userRoles.get(u2); //User

 

也可以透過 has() 方法來判斷是否有某個鍵

userRoles.has(u2) //true

 

要修改某個鍵的值則是用以下寫法:

userRoles.get(u1); //User
userRoles.set(u1, "Admin");  
userRoles.get(u1); //Admin

 

size 特性可以回傳 map 內的項目數量

userRoles.size; //3

 

使用 keys() 方法來取得 map 內的鍵,values() 回傳值,entries() 取得項目陣列。

for(let u of userRoles.keys()){
  console.log(u.name)
}

 

for(let r of userRoles.values()){
  console.log(r)
}

 

for(let ur of userRoles.entries()){
  console.log(`${ur[0].name}: ${ur[1]}`)
}

使用解構

for(let [u, r] of userRoles.entries()){
  console.log(`${u.name}: ${r}`)
}

 

要刪除 map 的一個項目,可以使用 detele() 方法

userRoles.delete(u2)

要刪除 map 的所有項目,可以使用 clear() 方法

userRoles.clear()

 

Set

set 是一組不重複的資料,在之前的範例中,我們可能想要賦與一個使用者多個角色,比如所有使用者都有 User 角色,但如果有 Admin 角色的同時也會有 User 角色,這時候就可使用 set。

首先建立一個 Set 實例:

const roles=new Set();

 

如果想要替一個使用者增加角色,可以使用 add() 方法:

roles.add("User")

再增加管理員的角色

roles.add("Admin")
roles.size; //2

 

要刪除角色的話使用 delete() 方法

roles.delete("Admin")

 

 

課程推薦

AI工作術全面學習實戰營:6 堂精選課程,學會最好用 AI 工具,翻轉你的人生

AI工作術全面學習實戰營:6 堂精選課程,學會最好用 AI 工具,翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師,打造上述 6 堂實用課程,教你學會時下最好用的 AI 工具,導入生成式 AI 來產製工作內容,改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上,同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學,加上 ChatGPT 的輔助,您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗,還會大幅提高網站的搜索引擎排名,進而增加訪客流量和潛在客戶。
用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

用AI強化職場競爭力 ChatGPT、Midjourney從入門到精通

在快速變遷的職場中,提升競爭力成為關鍵。透過引領潮流的AI技術,ChatGPT和Midjourney將助您勇攀高峰。無論您是AI新手還是專家,這個課程將引導您從入門到精通,解密AI的奧秘,並學習如何運用於職場。
GitHub Copilot AI 程式碼編輯工具應用實務班

GitHub Copilot AI 程式碼編輯工具應用實務班

讓學員瞭解有效地使用該工具來加速開發流程、提高程式碼品質和生產力。課程重點放在以 JavaScript 程式語言為例,介紹 Copilot 的基本原理、使用方法和最佳實踐。

輸入折扣碼 TC1456JA 還可以額外獲得 NT$500 優惠喔。

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

掌握Clipchamp AI的操作技巧,靈活運用Clipchamp AI進行影片編輯和創作,實現創意表達和傳播目的。

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

如何串接多種數位工具資訊?Looker Studio 資料視覺化實戰班|GoogleAds x FB廣告 x GA流量數據

Looker Studio除了可協助使用者監控網站流量、廣告成效、選擇匯入資源的管道之外,還可以將數據資料多平台整合、數據報表即時更新、數據範本可重複套用的效益,透過自動化系統,將數據全部匯入同一個報表平台,是企業不可或缺的重要工具。

輸入折扣碼 TC1270JIA 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。