Jimmy 的架站筆記

嗨~我是 Jimmy!我可能不是你認識的第 1 個 Jimmy,但一定是最帥的那個。


【 JavaScript 】Map 筆記

By Jimmy 2022-08-25
發表於 javascript front-end-note
【 JavaScript 】Map 筆記

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

JavaScript Map

1. 特性

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 ]
Array.from(map.keys())
// [ 1, 2, 3 ]

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

參考資料

Map - JavaScript - MDN Web Docs - Mozilla


你可能也會喜歡

【JavaScript基礎】:Array Methods — 陣列方法整理

【JavaScript基礎】:Array Methods — 陣列方法整理

陣列(array)屬於物件(object)的一種,在Javacript中有許多陣列方法(array methods)可做轉換或運算,來整理一下在看到陣列常見和相關的方法。 1. Array and String:陣列與字串的轉換 字串與陣列相關的方法 1.1 字串轉換成陣列 1.1.1 **Array.from()** 這個方法不只可以轉換字串,還可以轉換類陣列等等。 語法: > Array.f

Read More