[前端攻坚]：Map的使用

总结一些日常需要用到的一些api，也是在一些面试中会经常出现的题目，今天分享的是Map的一些用法和个人的一些理解， 同时文章也被收录到我的《JS基础》专栏中，欢迎大家点击收藏加关注。

Map类型是键值对的有序列表，而键和值都可以是任意类型

1.set()
2.get()
3.has()
4.size

先看下简单的调用

1.set 用来设置键和值
2.get 通过键获取值
3.has 判断时候存在某个值
4.size 返回map中的个数
5.clear 清空map

let n = new Map()
n.set(1, 'a')
console.log(n)//Map(1) { 1 => 'a' }
console.log(n.get(1))//a
console.log(n.has(1))//true
n.set(2, 'a')
console.log(n.size)//2
n.clear()
n.size // 0 

基本使用

1.可以使用set来对map设置键值，并且可以使用链式操作来进行设置
2.键可以是任意数据类型
3.键只能出现一次；它在 Map 的集合中是独一无二的
4.entries和values的使用

//基本数据类型 
let m = new Map()
m.set(1, 'a').set(2, 'b').set(3, 'c') // 链式操作
// console.log(m) //Map(3) { 1 => 'a', 2 => 'b', 3 => 'c' } 

键只能出现一次

情况1：在这里set设置的都是同一个值，所以在这里键会被认为是同一个值，会更改值，而不会新加一个键 情况2：这种情况下set会设置一个新键

//情况1
let a = {a:2}
m.set(a, 'a').set(a, 'b')
console.log(m)//Map(1) { { a: 2 } => 'b' }
console.log(m.has(a)) //true
console.log(m.has({a:2})) //false

//情况2
m.set({a:1}, 'a').set({a:1}, 'b')
console.log(m)//Map(2) { { a: 1 } => 'a', { a: 1 } => 'b' }
console.log(m.has({a:1})) //false
let a = {a:1}
console.log(m.has(a))//false

//对于情况2的解释
console.log({a:1}==={a:1}) //false 因为复杂数据类型判断是时候不相等，所以map在复杂数据类型的设置键上会有同样的效果
console.log(a==={a:1}) //false 

4.遍历：entries的使用

const map = new Map([['F', 'no'],['T','yes'],
]);
for (let [key, value] of map.entries()) {console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {console.log(key, value);
}
// "F" "no"
// "T" "yes" 

上面是map的使用方法，entries可以用在map上面，object的遍历也有用到entries这个功能，只是写法不一样，写法如下，用法和map都是相同的，结果的数据也是相同的

const map = {'F':'no','T':'yes'
}
for (let [key, value] of Object.entries(map) ){console.log(key, value);//F no//T yes
} 

应用场景

从这里我们可以看出map的存储类型和object的存储非常相似，都是通过键值对的方式存储，并且可以通过遍历输出，不同的是map的键可以是任意的数据类型

对于map的应用场景，可以放到实现深拷贝中进行使用，存储对象中的复杂数据类型

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享