Map與Object

Map是像object一樣帶有key、value的集合，只是最大的差別是Map允許任何類型的key值，底下為屬性與方法:

1. new Map() : 創建map
2. map.set(key, value) : 新增key與value
3. map.get(key) : 根據key取得value
4. map.has(key) : 判斷是否存在key，回傳true/false
5. map.delete(key) : 根據key刪除key與value
6. map.clear() : 清空所有key與value
7. map.size : 返回目前key數量

舉個簡單的例子:

let map = new Map();

map.set("name", "John");
map.set(1, "數字");
map.set('1', "字串");
map.set(true, "布林值");

console.log(map.get(1)); // 數字
console.log(map.get('1')); // 字串
console.log(map.size); // 4

因為Map允許任何的key值，所以上面的1(string與number)分別顯示出不同的值，而object一律都會轉為字串。

也能將object設定為key:

let cat = { name: "white cat" };


let catMap = new Map();

// cat 是 catMap 中的key
catMap.set(cat, 123);

console.log( catMap.get(cat) ); // 123

如果是object的話，因為會把key轉換為字串的關係，以上面的例子就會變成"[object,objetc]"，並不是我們想要的結果。

Map的循環方法

1. map.keys() : 返回所有的key
2. map.value : 返回所有的value
3. map.entries() : 返回所有的element，[key, value]
4. map.forEach((value,key,map)=> {...})

實際例子:

let catMap = new Map([
    ['white', 5],
    ['black', 4],
    ['grey', 6]
])

for(let color of catMap.keys()) {
    console.log(color)
}

for(let entry of catMap.entries()) { //let entry of catMap 結果相同
    console.log(entry)
}

catMap.forEach((value,key) => console.log(value,key))

object轉Map

像上面舉的例子，new Map可以透過放入一個數組，每個element以[key,value]的形式，來建立一個map，所以可以配合Object.keys()來達到我們要的結果:

let obj = {
    name: "David",
    height:180,
    weight:70
}

let map = new Map(Object.entries(obj));

console.log(map.get('height')); // 180

Object.fromEntries()則是反向操作，把[key,value]的array，轉變為object的形式:

let map = new Map();

map.set("name", "John");
map.set("height", 175);
map.set('weight', 60);

let obj = Object.fromEntries(map.entries());

console.log(obj)

// 

obj = {
    height: 175
    name: "John"
    weight: 60
}