Js中map与Object对比思考

客官°小女子只卖身不卖艺 2022-09-05 00:27 179阅读 0赞

> 在实际应用中，有用到map来存数据，自然联想到了普通对象Object和数组
> 
> 我知道数组有序，对象无序，那map这种特殊的结构是有序吗？
> 
> 思考后查阅了资料，整理总结如下

### 文章目录 ###

*   *  map
     *  Object
     *  map&Object对比Objects
     *  map&Object应用场景

## map ##

一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for…of 循环在每次迭代后会返回一个形式为\[key，value\]的数组。

## Object ##

一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for…of 循环在每次迭代后会返回一个形式为\[key，value\]的数组。

## map&Object对比Objects ##

和 Map类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。

Map是Object的实例对象，而Object显然不可能是Map的实例对象。

map有序！map有序！map有序！

<table> 
 <thead> 
  <tr> 
   <th>对比</th> 
   <th>map</th> 
   <th>Object</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>意外的键</td> 
   <td>Map 默认情况不包含任何键。只包含显式插入的键。</td> 
   <td>一个 Object 有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。<b>tips:</b> 虽然 ES5 开始可以用 Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。</td> 
  </tr> 
  <tr> 
   <td>键的类型</td> 
   <td>一个 Map的键可以是任意值，包括函数、对象或任意基本类型。</td> 
   <td>一个Object 的键必须是一个 String 或是Symbol。</td> 
  </tr> 
  <tr> 
   <td>键的顺序</td> 
   <td>Map 中的 key 是有序的。因此，当迭代的时候，一个 Map 对象以插入的顺序返回键值。</td> 
   <td>一个 Object 的键是无序的。<b>注意</b> ：自ECMAScript 2015规范以来，对象确实保留了字符串和Symbol键的创建顺序； 因此，在只有字符串键的对象上进行迭代将按插入顺序产生键。</td> 
  </tr> 
  <tr> 
   <td>性能</td> 
   <td>在频繁增删键值对的场景下表现更好。</td> 
   <td>在频繁添加和删除键值对的场景下未作出优化。</td> 
  </tr> 
  <tr> 
   <td>迭代</td> 
   <td>Map 是 iterable 的，所以可以直接被迭代。</td> 
   <td>迭代一个Object需要以某种方式获取它的键然后才能迭代</td> 
  </tr> 
  <tr> 
   <td>Size</td> 
   <td>Map 的键值对个数可以轻易地通过size 属性获取</td> 
   <td>Object 的键值对个数只能手动计算</td> 
  </tr> 
 </tbody> 
</table>

## map&Object应用场景 ##

尽管，Map相对于Object有很多优点，依然存在某些使用Object会更好的场景，毕竟Object是JavaScript中最基础的概念。

*  如果你知道所有的key，它们都为字符串或整数（或是Symbol类型），你需要一个简单的结构去存储这些数据，Object是一个非常好的选择。
 *  构建一个Object并通过知道的特定key获取元素的性能要优于Map（字面量 vs 构造函数，直接获取 vs get()方法）。
 *  如果需要在对象中保持自己独有的逻辑和属性，只能使用Object。
 *  JSON直接支持Object，但尚未支持Map。因此，在某些我们必须使用JSON的情况下，应将Object视为首选。
 *  Map是一个纯哈希结构，而Object不是（它拥有自己的内部逻辑）。使用delete对Object的属性进行删除操作存在很多性能问题。所以，针对于存在大量增删操作的场景，使用Map更合适。
 *  不同于Object，Map会保留所有元素的顺序。Map结构是在基于可迭代的基础上构建的，所以如果考虑到元素迭代或顺序，使用Map更好，它能够确保在所有浏览器中的迭代性能。
 *  Map在存储大量数据的场景下表现更好，尤其是在key为未知状态，并且所有key和所有value分别为相同类型的情况下。