JavaScript学习日记 : Day24 - Map

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
}