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

蛙人

关注

发布于: 2021 年 03 月 10 日

前言

初衷： 最近在读《深入理解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) // 这样实现代码非常简洁