什么时候适合使用 Map 而不是 Object

偏执的太偏执、 2022-12-01 01:14 214阅读 0赞

作者：前端公虾米 公号 / 黄老湿Sneaker  
学习研究转载自：[前端大全][Link 1]

如有侵权，请联系作者删除

### map到底是个啥 ###

首先我们先有请「Map」简单介绍下自己

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center]

以下是通过控制台打印出来的map

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 1]

「Map」映射是一种经典的数据结构类型，其中数据以 「key/value」 的键值对形式存在

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>Map</th> 
   <th>Object</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>默认值</td> 
   <td>默认不包含任何职，只包含显式插入的键</td> 
   <td>一个Object有一个原型，原型上的键名有可能和自己对象上设置的键名冲突</td> 
  </tr> 
  <tr> 
   <td>类型</td> 
   <td>任意</td> 
   <td>String 或 Symbol</td> 
  </tr> 
  <tr> 
   <td>长度</td> 
   <td>键值对个数通过size属性获取</td> 
   <td>键值对个数只能手动计算</td> 
  </tr> 
  <tr> 
   <td>性能</td> 
   <td>频繁增删键值对的场景下表现更好</td> 
   <td>频繁添加和删除键值对的场景下未作出优化</td> 
  </tr> 
 </tbody> 
</table>

### Map 基本用法 ###

**接受任何类型的键 划重点，是任何 any ! ! !**

**除了NaN比较特殊外，其他「Map」的get方法都是通过对比键名是否相等（===）来获取，不相等则返回undefined**

const testMap = new Map()
    
    let str = '今天不学习',
        num = 666,
        keyFunction = function () { },
        keySymbol = Symbol('Web'),
        keyNull = null,
        keyUndefined = undefined,
        keyNaN = NaN
    //添加键值对
    //基本用法
    testMap.set('key', 'value') // Map(1) {"key" => "value"}
    
    testMap.set(str, '明天变辣鸡')
    testMap.set(num, '前端Libin')
    testMap.set(keyFunction, '你的函数写的好棒棒哦')
    testMap.set(keySymbol, '大前端')
    testMap.set(keyNull, '我是个Null')
    testMap.set(keyUndefined, '我是个Undifined')
    testMap.set(keyNaN, '我是个NaN')
    
    testMap.get(function () { }) //undefined
    testMap.get(Symbol('Web')) //undefined
    
    //虽然NaN !== NaN 但是作为Map键名并无区别
    testMap.get(NaN) //"我是个NaN"
    testMap.get(Number('NaN')) //"我是个NaN"

这里注意一下 ，NaN !== NaN ，我刚看到的时候才想起来这个，这是JS里比较基础的且容易出错的东西

这里在代码中我们 console 一下 testMap 和所有执行的结果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 2]

大家可以很明确的看到执行的结果

我们代码中

keySymbol = Symbol('Web'),
    testMap.set(keySymbol, '大前端')

执行结果中变成了 4 : “大前端”（在图中可以看到）

> 所以到底什么是Symbol呢，很多小伙伴可能和我一样只闻其名  
> ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值  
> 它是 JavaScript 语言的第七种数据类型  
> Symbol 值通过Symbol函数生成  
> 凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。

下图是在控制台中的测试  
![在这里插入图片描述][20200825150507444.png_pic_center]  
好，以上是大概插播的 Symbol 的概念

### 比较 Map 和 Object ###

##### 1. 定义 #####

//Map
    const map = new Map();
    map.set('key', 'value'); // Map(1) {"key" => "value"}
    map.get('key'); // 'value'
    
    //Object
    const someObject = { };
    someObject.key = 'value';
    someObject.key; // 'value'

执行结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 3]  
这里可以明显看出其实其定义行为是十分相似的，想必看到这里大家还没看出来「Map」到底在何时使用才是最佳实践，别急接着来。

##### 2. 键名类型 #####

JavaScript 「Object」只接收两种类型的键名 String 和 Symbol，你可以使用其他类型的键名，但是最终 JavaScript 都会隐式转换为字符串

const obj = { }
    //直接看几种比较特殊的键名
    obj[true] = 'Boolean'
    obj[1] = 'Number'
    obj[{ '前端':'Sneaker'}] = '666'
    
    Object.keys(obj) // ["1", "true", "[object Object]"]

以下为执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 4]  
再来看看 「Map」 的，其接收任何类型的键名并保留其键名类型 (此处简单举例，详细可看文章开头「Map」基本使用)

下图为执行结果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 5]  
「Map」支持正则表达式作为键名，这在Object是不被允许的直接报错

##### 3. 原型 ProtoType #####

「Object」不同于「Map」，它不仅仅是表面所看到的。「Map」只包含你所定义的键值对，但是「Object」对象具有其原型中的一些内置属性

如果操作不当没有正确遍历对象属性，可能会导致出现问题，产生你意料之外的 bug

const newObject = { };
    newObject.constructor; // ƒ Object() { [native code] }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 6]  
举个例子：

下图为执行结果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 7]  
这个例子灵感来源于《Effective TypeScript》一书

##### 4. 迭代器 #####

「Map」 是可迭代的，可以直接进行迭代，例如forEach循环或者for…of…循环

//forEach
    const map = new Map();
    map.set('key1', 'value1');
    map.set('key2', 'value2');
    map.set('key3', 'value3');
    map.forEach((value, key) => { 
      console.log(key, value);
    });
    // key1 value1
    // key2 value2
    // key3 value3
    
    //for...of...
    for(const entry of map) { 
      console.log(entry);
    }
    // ["key1", "value1"]
    // ["key2", "value2"]
    // ["key3", "value3"]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 8]  
**但是对于「Object」是不能直接迭代的，当你尝试迭代将导致报错**

const object = { 
      key1: 'value1',
      key2: 'value2',
      key3: 'value3',
    };
    for(const entry of object) { 
      console.log(entry);
    }
    // Uncaught TypeError: object is not iterable

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 9]  
这时候你就需要一个额外的步骤来检索其键名、键值或者键值对

for(const key of Object.keys(object)) { 
      console.log(key);
    }
    // key1
    // key2
    // key3
    
    for(const value of Object.values(object)) { 
      console.log(value);
    }
    // value1
    // value2
    // value3
    
    for(const entry of Object.entries(object)) { 
      console.log(entry);
    }
    // ["key1", "value1"]
    // ["key2", "value2"]
    // ["key3", "value3"]
    
    for(const [key,value] of Object.entries(object)) { 
      console.log(key,value);
    }
    //"key1", "value1"
    //"key2", "value2"
    //"key3", "value3"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 10]

当然也可以使用for…in…进行遍历循环键名

for(const key in object) { 
      console.log(key);
    }
    // key1
    // key2
    // key3

![在这里插入图片描述][20200825153106712.png_pic_center]

##### 5. 元素顺序和长度 #####

Map 保持对长度的跟踪，使其能够在O(1)复杂度中进行访问

const map = new Map();
    map.set('key1', 'value1');
    map.set('key2', 'value2');
    map.set('key3', 'value3');
    map.size; // 3

![在这里插入图片描述][20200825153340913.png_pic_center]  
而另一方面，对于「Object」而言，想要获得对象的属性长度，需要手动对其进行迭代，使其为O(n)复杂度，属性长度为n

在上文提及的示例中，我们可以看到「Map」始终保持按插入顺序返回键名。但「Object」却不是。从 ES6 开始，String和Symbol键是按顺序保存起来的，但是通过隐式转换保存成String的键就是乱序的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 11]

##### 6. Object/Map 何为最佳实践 #####

如上就是 「Map」 和 「Object」 的基本区别，在解决问题考虑两者的时候就需要考虑两者的区别。

*  当插入顺序是你解决问题时需要考虑的，并且当前需要使用除 String 和 Symbol 以外的键名时，那么 「Map」 就是个最佳解决方案
 *  如果需要遍历键值对（并且需要考虑顺序）,那我觉得还是需要优先考虑 「Map」
 *  Map是一个纯哈希结构，而Object不是（它拥有自己的内部逻辑）。Map 在频繁增删键值对的场景下表现更好，性能更高。因此当你需要频繁操作数据的时候也可以优先考虑 Map
 *  再举一个实际的例子，比如有一个自定义字段的用户操作功能，用户可以通过表单自定义字段，那么这时候最好是使用 Map，因为很有可能会破坏原有的对象

const userCustomFields = { 
      'color':    'blue',
      'size':     'medium',
      'toString': 'A blue box'
    };

下图是正常obj的toString输出与自定义了对象toString之后的输出，已经破坏了原有的对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 12]

此时用户自定义的 toString 就会破坏到原有的对象 而 「Map」 键名接受任何类型，没有影响

function isMap(value) { 
      return value.toString() === '[object Map]';
    }
    
    const actorMap = new Map();
    
    actorMap.set('name', 'Harrison Ford');
    actorMap.set('toString', 'Actor: Harrison Ford');
    
    // Works!
    isMap(actorMap); // => true

![在这里插入图片描述][20200825154306966.png_pic_center]

*  当你需要处理一些属性，那么 「Object」 是完全受用的，尤其是需要处理 JSON 数据的时候。由于 「Map」 可以是任意类型，因此没有可以将其转化为 JSON 的原生方法。

var map = new Map()
    map.set('key','value')
    JSON.stringify(map)  //"{}"

![在这里插入图片描述][20200825154411263.png_pic_center]

*  当你需要通正则表达式判断去处理一些业务逻辑时，「Map」将是你的最佳解决方案  
    以下是正则过滤错误信息使用 map 的写法

const actions = ()=>{ 
      const functionA = ()=>{ /*do sth*/}
      const functionB = ()=>{ /*do sth*/}
      const functionC = ()=>{ /*send log*/}
      returnnewMap([
        [/^guest_[1-4]$/,functionA],
        [/^guest_5$/,functionB],
        [/^guest_.*$/,functionC],
        //...
      ])
    }
    
    const onButtonClick = (identity,status)=>{ 
      let action = [...actions()].filter(([key,value])=>(key.test(`${ identity}_${ status}`)))
      action.forEach(([key,value])=>value.call(this))
    }

### 总结 ###

「Object」对象通常可以很好的保存结构化数据，但是也有相应的局限性：

1.  键名接受类型只能用 String 或者 Symbol
2.  自定义的键名容易与原型继承的属性键名冲突（例如 toString，constructor 等）
3.  对象/正则无法用作键名 而这些问题通过 「Map」 都可以解决，并且提供了诸如迭代器和易于进行大小查找之类的好处

**注：不要将「Map」作为普通「Object」的替代品，而应该是普通对象的补充**

[Link 1]: https://mp.weixin.qq.com/s/s2XG4Ly1V5lov1ZciWF0xg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/684f315c07a6433cbfe779450f89ebae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/df139e6279c3486d86d8e8448b6c1931.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/5b7bde7f6f164429b1edc5f364c347ec.png
[20200825150507444.png_pic_center]: /images/20221123/4fe1f5399eea433281de7dc97ad04f11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/89cd1f2580cc416489f8a19765bd5f8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/fd28a3304e1c483a936c884871dc316d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/3c6fed105e814f9ca7b2ec18744b27d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/47935f0dc4364942acb42281db180a4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/800c5e79b79d4253ac34707c6ef893b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/88b4757068cd4dcea4200a01e9c2fd69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/eb209d4888514c5f91cd9d3423474515.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/2ed6ad411d28482b8b0d97df3e238fb2.png
[20200825153106712.png_pic_center]: /images/20221123/0e0eadb875064f00a9f3414df4423c3e.png
[20200825153340913.png_pic_center]: /images/20221123/905976de20f04beda5909f13bb0a02ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/54d78fd494ff45ff9b3abb3ce4d48a20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/d890dc5bf2454e75ad0f7853dc74986a.png
[20200825154306966.png_pic_center]: /images/20221123/a00cf540319c4b408985a360a4d47dd5.png
[20200825154411263.png_pic_center]: /images/20221123/00d152d7a2ed4a738be2e3bf6165be1e.png