Map的基本使用

另外一个新增的数据结构是Map，用于存储映射关系。
但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？

• 事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
• 某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；

//Javascript中的对象是不能使用对象类型作为key的
const obj1 = {
  name: "curry",
};
const obj2 = {
  name: "why",
};
const obj3 = {
  [obj1]: "aaa",
  [obj2]: "bbb",
};
console.log(obj3); // { '[object Object]: 'bbb'}

在创建对象的过程中，obj1,obj2作为obj3的键名，最终被转换为了字符串'[object Object]',
同样的键名，后面的键值会覆盖前面的

那么我们就可以使用Map：
Map数据结构允许我们使用对象类型作为key

1.创建一个Map数据结构

//1.创建一个Map数据结构,方法一：
const m = new Map();

//给m添加元素
m.set("abc", 123);
m.set(123, "aaa");
m.set({ name: "why" }, "bbb");

console.log(m);
// Map(3) { 'abc' => 123, 123 => 'aaa', { name: 'why' } => 'bbb' }

//2.创建一个Map数据结构,方法二：
const n = new Map([
  ["abc", 123],
  [{ name: "why" }, "ccc"],
]);
console.log(n);
//Map(2) { 'abc' => 123, { name: 'why' } => 'ccc' }

2.Map数据结构的属性

size:返回Map中元素的个数

console.log(m.size, n.size) // 3 2

3.Map数据结构的方法

• set(key, value)：在Map中添加key、value，并且返回整个Map对象；
• get(key)：根据key获取Map中的value；
• has(key)：判断是否包括某一个key，返回Boolean类型；
• delete(key)：根据key删除一个键值对，返回Boolean类型；
• clear()：清空所有的元素；
• forEach(callback, [, thisArg])：通过forEach遍历Map；
• Map也可以通过for of进行遍历。

const m = new Map();

//给m添加元素
m.set("abc", 123);
m.set(123, "aaa");
m.set({ name: "why" }, "bbb");
m.set("芦培培", '李静昕妈妈');
//获取m中键名为'芦培培'的值
console.log(m.get('芦培培')) // 李静昕妈妈
//删除m中键名为'芦培培'的值
console.log(m.delete('芦培培')) //true

//查看m中是否包含键名'芦培培'
console.log(m.has('芦培培')) //false

//清空m
m.clear()
console.log(m) // Map(0) {}

4.Map数据结构的遍历

const n = new Map([
  ["abc", 123],
  [{ name: "why" }, "ccc"],
]);
n.forEach((value, key) => {
  console.log(value, key)
})
// 123 abc
// ccc { name: 'why' }

for(const item of n) {
  console.log(item)
}
// [ 'abc', 123 ]
// [ { name: 'why' }, 'ccc' ]

for(const [key, value] of n) {
  console.log(key, value)
}
// abc 123
// { name: 'why' } ccc

WeakMap的使用

和Map类型的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。
那么和Map有什么区别呢？

• 区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
• 区别二：WeakMap的key对对象的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；
• 区别三：不能被遍历

//Map数据结构允许我们使用对象类型作为key

//1.创建一个Map数据结构,方法一：
const obj1 = {
  name: "curry",
};
const obj2 = {
  name: "why",
};
const m = new WeakMap();

//给m添加元素,只能使用对象作为键名
m.set(obj1, "aaa");
m.set(obj2, "bbb");

console.log(m); //WeakMap { <items unknown> }  因为无法被遍历

const obj1 = {
  name: "curry",
};
const obj2 = {
  name: "why",
};
//2.创建一个Map数据结构,方法二：
const n = new WeakMap([
  [obj1, 123],
  [obj2, "ccc"],
]);
console.log(n);
//WeakMap { <items unknown> }  因为无法被遍历

WeakMap常见的方法有四个：

• set(key, value)：在Map中添加key、value，并且返回整个Map对象；
• get(key)：根据key获取Map中的value；
• has(key)：判断是否包括某一个key，返回Boolean类型；
• delete(key)：根据key删除一个键值对，返回Boolean类型；

const m = new WeakMap();
const obj1 = {
  name: "curry",
};
//给m添加元素
m.set(obj1, "李静昕妈妈");
//获取m中键名为obj1的值
console.log(m.get(obj1)); // 李静昕妈妈
//删除m中键名为obj1的值
console.log(m.delete(obj1)); //true

//查看m中是否包含键名obj1
console.log(m.has(obj1)); //false

非常感谢王红元老师的深入JavaScript高级语法让我学习到很多 JavaScript 的知识