带你轻松理解数据结构之Map

时间:2021-6-4 作者:qvyue

Map结构跟我们上节讲解的set结构语法差不多《理解数据结构之Set,只要5分钟》,不同是Map语法是一种数组键值对格式,Map也是处理了防止对象键值强制类型转换问题。Map是利用数组特性解决的,我们都知道数组可以传入任意类型值,所以Map结构也接收所有类型值。我们刚才说了值不会向对象那样进行强制类型转换,如24和”24″就是两种类型关系,互不会影响 。

基础语法

Map.set添加

let map = new Map()
map.set("name", "蛙人")
console.log(map)

上面example中,创建一个Map对象,上面我们说过Map是一个数组对象,里面还接收一个数组对象也就是二维数组,里面的参数也就是键值对形式,然后设置map值,map.set方法接收两个参数,前者是key值后者是value值。这时Map对象添加了name值

Map.size长度

let map = new Map()
map.set("name", "蛙人")
console.log(map.size) // 1

上面example中,Map对象提供了查看size属性,查看当前Map结构有几组数据。

Map.get获取

let map = new Map()
map.set("name", "蛙人")
console.log(map.get("name")) // 蛙人

上面example中,我们使用Map.get方法获取对象的属性值。如果获取一个Map对象中不存在的则返回undefined。

Map.has查询

let map = new Map()
map.set("name", "蛙人")
console.log(map.has("name")) // true

上面example中,Map.has返回的是一个Boolean值,会去这个Map中查找如果找到返回true,否则返回false,一般用于检测这个Map中存在该值的时候使用。

Map.delete删除

let map = new Map()
map.set("name", "蛙人")
console.log(map.delete("name")) // true

上面example中,Map.delete方法删除结构中某个值,如果这个值存在Map结构中删除则返回true,如果删除一个不存在的值则返回false。

Map.clear清除

let map = new Map()
map.set("name", "蛙人")
map.clear()

上面example中,Map.clear该方法则会清除Map结构中所有的属性。

Map使用forEach

let map = new Map([
    ["name", "蛙人"],
    ["age", 24],
    ["sex", "male"]
])

map.forEach((value, key, self) => {
    console.log(value, key, self) 
})

上面example中,可以看到Map结构是一个二维数组,里面是键值对形式的。Map结构也可以使用forEach遍历,它接收3个参数:

  • 对象的value值
  • 对象的key值
  • 对象本身

注意:这里与Set结构不同,Set结构前两个参数都是对象值,那是因为Set结构没有key值这个概念
Map快速转换对象

我们上面讲了Map可以forEach遍历,这样循环解析也可以组成一个新的对象。那么Es6方法新提供了快速将这种结构转换为对象。

let map = new Map([
    ["name", "蛙人"],
    ["age", 24],
    ["sex", "male"]
])
console.log(Object.fromEntries(map)) // {name: "蛙人", age: 24, sex: "male"}

Set结构和Map结构的区别

一句话总结:Set结构主要用作于判断某个值是否存在该对象中,而Map结构主要用作于从当前结构中获取该对象的值。

应用场景

数据缓存

有的情况下我们需求想实现,我第一次请求后台接口Api,当我请求过后第二次就走缓存,不在发送接口Api。

let map = new Map()
function fn() {
    if (!map.has("api")) {
        let res = axios.get("api")
        map.set("api", res.data)
        return res.data
    } else {
 return map.get("api")
    }
}
fn()

废弃 if else侠

我们在项目需求时,肯定会遇到一个状态对应着一种操作,如下:

let text = ""
if (status == 1) {
    text = "启用"
} else if (status = 2) {
    text = "停用"
}
// 省略...

// 以上我们需要写一堆的 if else这样代码非常的繁琐冗余
let operation = new Map([
    [1, "启用"],
    [2, "停用"],
    [3, "注销"]
])
text = operation.get(status) // 这样实现代码非常简洁
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。