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
如果覺得我的文章有幫助的話,歡迎幫我的粉專按讚哦~謝謝你!