前言

昨天把set講完，今天換Map，首先要注意不要跟array的方法Array.prototype.map()搞混，這是不一樣的東西，那就 let’s go 今天的主題。

Map跟object一樣都是key-value pairs，不同的是Map的key可以是任意類型。

map 的基本方法跟屬性

  • new Map() => 創造 map。
  • set() => 為 map 裡面設定 key 跟 value。
  • get() => 取出 map 裡面的 key 跟 value。
  • delete() => 刪除 map 裡面的 key。
  • has() => map 裡存在指定的 key。
  • clear() => 刪除 map 裡面所有東西。
  • size => 會回傳 map 裡面元素的數量。

有些其實跟set來使用看看吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const map = new Map();
console.log(map); // Map(0) {}

// ↑一開始創建出來，map裡面是空的

map.set(1, "a");
map.set(2, "b");
map.set(3, "c");
console.log(map); // Map(3) { 1 => 'a', 2 => 'b', 3 => 'c' }

// ↑幫map新設定了三組key跟value

console.log(map.get(1)); // a

// ↑從map裡面取出key是1的value

map.delete(1);
console.log(map); // Map(2) { 2 => 'b', 3 => 'c' }

// ↑把map裡面key是1的那一個key-value pairs刪除

console.log(map.has(1)); // false
console.log(map.has(2)); // true

// ↑判斷map裡面有沒有叫做1跟2的key

console.log(map.size); // 2

// ↑map裡面數量有兩個

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

// ↑把map裡面所有東西都清空

除了用set()添加元素外，也能透過array添加

先創立一個Map的空間出來，再set()是比較直覺添加元素的方式，但其實也可以直接在創建時就添加完畢，只要最開始創建的new Map()就直接塞array就可以達成。

1
2
3
4
5
6
7
8
const fruits = new Map([
  ["apple", 10],
  ["banana", 5],
  ["orange", 10],
]);

console.log(fruits);
// Map(3) { 'apple' => 10, 'banana' => 5, 'orange' => 10 }

set()除了可以添加元素外，也可以重新設置現有元素

set()在完全沒有東西時，是添加元素的功能，但在已經有東西的地方上，假如又在使用set()添加在同一個key東西上去，會直接覆蓋上一個key的value，因為同一組key只能同時擁有一組value，而這種方式也能達到重新設置現有元素的功能。

1
2
3
4
5
6
7
const fruits = new Map();

fruits.set("apple", 10);
console.log(fruits); // Map(1) { 'apple' => 10 }

fruits.set("apple", 5);
console.log(fruits); // Map(1) { 'apple' => 5 }

創立 map 是使用new Map()，那我不想new行不行？

不行，Map一定只能用new operator來建立，JavaScript就是這樣規定的，不這樣做就會送你報錯。

1
2
3
const map = Map();

//TypeError: Constructor Map requires 'new'

可以理解成一些特別的內建物件會需要用構造函數的方式來進行物件的實體化。
順帶一提，Set也是一定要用new operator，不然會送報錯。

Map 用途

當希望物件的key不會重複時，可以使用Map，或者是想要讓物件的key是各種型別的時候。

還有順序如果很重要的話，就會考慮使用Map，因為使用Map時元素的使用順序會被保留。

reference

[1] MDN - Map
[2] W3Schools - JavaScript Maps
[3] The Modern JavaScript Tutorial - Map and Set
[4] JS 原力覺醒 Day29 - Set / Map
[5] PJCHENder -JavaScript Map
[6] 前端工程師用 javaScript 學演算法 - Map