乐趣区

关于javascript:带你轻松理解数据结构之Map

前言

初衷: 最近在读《深刻了解 Es6》这本书,之前没好好全面学过 Es6 语法,也是趁着不忙的阶段从新好好浏览整顿一下笔记分享给大家,不喜勿喷。

适宜人群: 前端高级开发,大佬绕道。

内容构造: 意识 Map -> 根底用法 -> 利用场景

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"}

下面 example 中,能够疾速将 Map 这种数据结构转换为传统对象字面量格局。也能够看我这篇文章哦《总结 | Es6 对象扩大了哪些个性?》

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) // 这样实现代码十分简洁

感激

谢谢各位在百忙之中点开这篇文章,心愿对你们能有所帮忙,如有问题欢送各位大佬斧正。

我是蛙人,如果感觉写得能够的话,请点个赞吧。

感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨

往期高赞好文

《这些工作中用到的 JavaScript 小技巧你都晓得吗?》

《了解数据结构之 Set,只有 5 分钟!》

《【倡议珍藏】分享一些工作中罕用的 Git 命令及非凡问题场景怎么解决》

《解构:使数据拜访更便捷!》

《你真的理解 ES6 中的函数个性么?》

《一看就懂的 var、let、const 三者区别》

退出移动版