[前端攻坚]：Map的使用
theme: smartblue highlight: foundation
开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情
总结一些日常需要用到的一些api，也是在一些面试中会经常出现的题目，今天分享的是Map的一些用法和个人的一些理解， 同时文章也被收录到我的《JS基础》专栏中，欢迎大家点击收藏加关注。
Map类型是键值对的有序列表，而键和值都可以是任意类型
- set()
- get()
- has()
- size
先看下简单的调用
- set 用来设置键和值
- get 通过键获取值
- has 判断是否存在某个值
- size 返回map中的个数
- clear 清空map
js 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
基本使用
- 可以使用set来对map设置键值，并且可以使用链式操作来进行设置
- 键可以是任意数据类型
- 键只能出现一次；它在
Map的集合中是独一无二的 - entries和values的使用
js //基本数据类型 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会设置一个新键
```js //情况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的使用
```js 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都是相同的，结果的数据也是相同的
js
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的应用场景，可以放到实现深拷贝中进行使用，存储对象中的复杂数据类型