乐趣区

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

jiezi

前言

初衷： 最近在读《深刻了解 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 三者区别》

退出移动版