JavaScript Map 和 JavaScript Set 相較 Array 和 Object 算是比較沒那麼常用的資料結構，導致每次要用的時候都要去查 MDN，所以決定來筆記一下，這篇就先來筆記 Map 吧！
Table of Contents
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
如果覺得我的文章有幫助的話，歡迎幫我的粉專按讚哦~謝謝你！