# Map

breadcrumb 🚧

{% hint style="info" %}
[es6](https://lochiwei.gitbook.io/web/js/feature/es6 "mention")

🚧
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %} <mark style="color:purple;">**Map**</mark>&#x20;

* is [iterable](https://lochiwei.gitbook.io/web/js/iteration/iterable "mention").
* is a [data](https://lochiwei.gitbook.io/web/appendix/data "mention").
* is a <mark style="color:yellow;">**better alternative**</mark> for [associated-array](https://lochiwei.gitbook.io/web/js/concept/associated-array "mention").
  {% endhint %}
  {% endtab %}

{% tab title="👥 相關" %}

* [set](https://lochiwei.gitbook.io/web/js/val/builtin/set "mention")
  {% endtab %}

{% tab title="📘 手冊" %}

* [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) ⟩ [Objects vs. Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#objects_vs._maps)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ [Map & Set](https://javascript.info/map-set)
* [ ] [javascript-the-definitive-guide](https://lochiwei.gitbook.io/web/master/ref/javascript-the-definitive-guide "mention") ⟩ 11.1.2
  {% endtab %}
  {% endtabs %}

雖然 Object 與 Map 都是 JS 用來實現 Dictionary 的方法，但它們存在基本的不同點。

## Maps vs. Objects

<table><thead><tr><th width="160">feature</th><th width="194.07142857142856">Map</th><th>Object</th></tr></thead><tbody><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a></td><td><ul><li>✅ use <strong>[...map]</strong> to convert into Array.</li><li>✅ <strong>for</strong>(const <strong>[key, value]</strong> <strong>of</strong> map){...}</li><li>✅ <strong>for</strong>(const <strong>key</strong> <strong>of</strong> map.<strong>keys()</strong>){...}</li><li>✅ <strong>for</strong>(const <strong>value</strong> <strong>of</strong> map.<strong>values()</strong>){...}</li><li><p>✅ map.forEach((<strong>value</strong>, <strong>key</strong>) => {...})</p><p></p></li></ul></td><td><ul><li>❌ does not implement  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">iteration protocol</a>.</li><li>❌ not directly iterable using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a>.</li><li>⭕ can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> to iterate over <em>enumerable</em> properties.</li></ul></td></tr><tr><td>keys</td><td>can be <strong>any value</strong> (including <strong>functions</strong>, <strong>objects</strong>, or any <strong>primitive</strong>).</td><td>must be either <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol"><code>Symbol</code></a>.</td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/size">size</a></td><td>✅ number of items in a <code>Map</code></td><td>❌ no such property</td></tr></tbody></table>

## Map ⇔ Array

```javascript
// Array => Map
const map = new Map([['key1', 'value1'], ['key2', 'value2']])

// Map => Array<[Key, Value]>
[...map]        // [['key1', 'value1'], ['key2', 'value2']]

// Map => Array<Value>
[...map.values()]
```

## Other Topics

* #### [Cloning and merging Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#cloning_and_merging_maps) <a href="#cloning_and_merging_maps" id="cloning_and_merging_maps"></a>