Objects 和 maps 的比较

朴灿烈づ我的快乐病毒、 2022-11-09 00:57 150阅读 0赞

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