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 的知识
