前言

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