JavaScript Map

【 JavaScript 】Map 筆記

JavaScript Map 和 JavaScript Set 相較 Array 和 Object 算是比較沒那麼常用的資料結構,導致每次要用的時候都要去查 MDN,所以決定來筆記一下,這篇就先來筆記 Map 吧!

JavaScript Map

1. 特性

  • Map 由多筆的 key-value pairs 組成,類似資料結構中的 hash
  • key 可以是任意的資料型態,ex: function, object, number, string…
  • 在頻繁的 create, delete key-value pairs 的情況下,Map 的效能可能比 object 來得好

2. 宣告 Map

可以直接 new Map, 也可以用 Array 給定初始的 key-value pairs:

// 方法一
const map = new Map();
console.log(map)
// Map(0) {}

// 方法二
const data = [
  [1, { name: 'Jimmy', email: '[email protected]' }],
  [2, { name: 'Jed', email: '[email protected]' }],
  [3, { name: 'Frank', email: '[email protected]' }]
]
const map2 = new Map(data)
console.log(map2)
/* Map(3) {
  1 => { name: 'Jimmy', email: '[email protected]' },
  2 => { name: 'Jed', email: '[email protected]' },
  3 => { name: 'Frank', email: '[email protected]' }
}*/

3. 操作 Map

const data = [
  [1, { name: 'Jimmy', email: '[email protected]' }],
  [2, { name: 'Jed', email: '[email protected]' }],
  [3, { name: 'Frank', email: '[email protected]' }]
]
const map = new Map(data)

// 取得 key-value pairs 的個數
console.log(map.size)
// 3

// 某個 key-value pair 是否存在
const isFirstUserExist = map.has(1)
const isForthUserExist = map.has(4)
console.log(isFirstUserExist)
// true
console.log(isForthUserExist)
// false

// 用 key 取得 value
const firstUser = map.get(1)
console.log(firstUser)
// { name: 'Jimmy', email: '[email protected]' }

// 新增、更新 key-value pairs
map.set(4, { name: 'John', email: '[email protected]' })
console.log(map.get(4))
// { name: 'John', email: '[email protected]' }

// 刪除 key-value pairs
map.delete(4)
console.log(map)
/* Map(3) {
  1 => { name: 'Jimmy', email: '[email protected]' },
  2 => { name: 'Jed', email: '[email protected]' },
  3 => { name: 'Frank', email: '[email protected]' }
} */

// 清空 Map
map.clear()
console.log(map)
// Map(0) {}

4. 迭代 Map

const data = [
  [1, { name: 'Jimmy', email: '[email protected]' }],
  [2, { name: 'Jed', email: '[email protected]' }],
  [3, { name: 'Frank', email: '[email protected]' }]
]
const map = new Map(data)

// 方法一:for...of
for (const [key, value] of map) {
  console.log(`${key} = ${JSON.stringify(value)}`);
}

// 方法二:forEach (注意 key, value 的 argument 順序)
map.forEach((value, key) => {
  console.log(`${key} = ${JSON.stringify(value)}`);
});

// 方法三:for..of 搭配 entries
for (const [key, value] of map.entries()) {
  console.log(`${key} = ${value}`);
}

/* 以上結果都是:
1 = {"name":"Jimmy","email":"[email protected]"}
2 = {"name":"Jed","email":"[email protected]"}
3 = {"name":"Frank","email":"[email protected]"} */

// 迭代 keys
for (const key of map.keys()) {
  console.log(key);
}
// 1
// 2
// 3

// 迭代 values
for (const value of map.values()) {
  console.log(JSON.stringify(value));
}
// {"name":"Jimmy","email":"[email protected]"}
// {"name":"Jed","email":"[email protected]"}
// {"name":"Frank","email":"[email protected]"}

5. clone 和 merge Map

const data = [
  [1, 'Jimmy'],
  [2, 'Jed'],
  [3, 'Frank']
]
const map = new Map(data)

// clone Map
const duplicateMap = new Map(map)
console.log(duplicateMap.get(1))
// Jimmy
console.log(map === duplicateMap)
// false

// merge Map
const map1 = new Map([
  [1, 'Jimmy'],
  [2, 'Jed'],
  [3, 'Frank']
])
const map2 = new Map([
  [4, 'John'],
  [5, 'Josh']
])
const mergedMap = new Map([...map1, ...map2])
console.log(mergedMap)
/* Map(5) {
  1 => 'Jimmy',
  2 => 'Jed',
  3 => 'Frank',
  4 => 'John',
  5 => 'Josh'
} */

6. 轉換成 Array

const arr = [
  [1, 'Jimmy'],
  [2, 'Jed'],
  [3, 'Frank']
]
const map = new Map(arr)

// 將 key-value pairs 轉換成二維陣列
console.log(Array.from(map))
// [ [ 1, 'Jimmy' ], [ 2, 'Jed' ], [ 3, 'Frank' ] ]
console.log([...map])
// [ [ 1, 'Jimmy' ], [ 2, 'Jed' ], [ 3, 'Frank' ] ]

// 將 keys 轉換成陣列
console.log([...map.keys()])
[ 1, 2, 3 ]

// 將 values 轉換成陣列
console.log([...map.values()])
[ 'Jimmy', 'Jed', 'Frank' ]

參考資料

Map – JavaScript – MDN Web Docs – Mozilla

看完這篇文章是不是想換工作了呢(咦?那就千萬別錯過 2024 職涯博覽會!想換工作的,有機會在博覽會遇見更好的另一半,不想換工作的,有機會在博覽會遇見更好的工作!趕快點擊下面的 banner,拯救你的人生!!!https://s.yourator.co/jimmy

如果覺得我的文章有幫助的話,歡迎幫我的粉專按讚哦~謝謝你!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top