[前端攻坚]：Map的使用

theme: smartblue
highlight: foundation

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

总结一些日常需要用到的一些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的应用场景，可以放到实现深拷贝中进行使用，存储对象中的复杂数据类型