昨天把set
講完,今天換Map
,首先要注意不要跟array
的方法Array.prototype.map()
搞混,這是不一樣的東西,那就let's go 今天的主題。
Map
跟object
一樣都是key-value pairs
,不同的是Map
的key
可以是任意類型。
有些其實跟set
來使用看看吧:
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
就可以達成。
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
,而這種方式也能達到重新設置現有元素的功能。
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 }
new Map()
,那我不想new
行不行?不行,Map
一定只能用new operator
來建立,JavaScript
就是這樣規定的,不這樣做就會送你報錯。
const map = Map();
//TypeError: Constructor Map requires 'new'
可以理解成一些特別的內建物件會需要用構造函數的方式來進行物件的實體化。
順帶一提,Set
也是一定要用new operator
,不然會送報錯。
當希望物件的key
不會重複時,可以使用Map
,或者是想要讓物件的key
是各種型別的時候。
還有順序如果很重要的話,就會考慮使用Map
,因為使用Map
時元素的使用順序會被保留。
[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