# sparse array

[JS](../../..) ⟩ [object](../../obj) ⟩ [built-in](..) ⟩ [Array]() ⟩ sparse array

{% hint style="success" %}
* array that has "<mark style="color:yellow;">**holes**</mark>" in it.&#x20;
* "<mark style="color:yellow;">**holes**</mark>" are (usually) treated as [**undefined**](../../prim/undefined).
{% endhint %}

{% hint style="warning" %}
[**loops**](../../../grammar/statement/loop) and [array methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) <mark style="color:yellow;">**treat**</mark> "<mark style="color:yellow;">**holes**</mark>" in <mark style="color:purple;">**sparse arrays**</mark> <mark style="color:red;">**differently**</mark>.

* [**for-of**](../../../grammar/statement/loop/for/of)：<mark style="color:yellow;">**treats**</mark> "<mark style="color:yellow;">**holes**</mark>" as [**undefined**](../../prim/undefined).
* [**forEach**](../../../grammar/statement/loop/for/foreach)：<mark style="color:red;">**ignores**</mark> "<mark style="color:yellow;">**holes**</mark>".&#x20;
* <mark style="color:blue;">**map**</mark> ：<mark style="color:yellow;">**preserves**</mark> holes.
* <mark style="color:blue;">**filter**</mark> ：<mark style="color:red;">**ignores**</mark> holes.

:point\_right: [holes](sparse/holes "mention")
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
[**deleting**](../../obj/prop/create/delete) an array [element](element "mention") leaves a “<mark style="color:yellow;">**hole**</mark>” in the array and <mark style="color:red;">**does not**</mark>**&#x20;**<mark style="color:yellow;">**change**</mark> the array’s <mark style="color:yellow;">**length**</mark>:exclamation: (<mark style="color:purple;">**sparse array**</mark>)
{% endhint %}

{% hint style="info" %}
* if an [**array literal**](create/arr) <mark style="color:yellow;">**contains multiple**</mark> [**commas**](../../../grammar/token/punctuator/comma) <mark style="color:yellow;">**in a row**</mark>, <mark style="color:red;">**with no value between**</mark>, the array is <mark style="color:purple;">**sparse**</mark>.
* [**array literal**](create/arr) syntax <mark style="color:yellow;">**allows**</mark> an <mark style="color:yellow;">**optional**</mark> [**trailing comma**](../../../grammar/token/literal/trailing-comma), so `[,,]` has a <mark style="color:orange;">**length**</mark> of <mark style="color:yellow;">**2**</mark>, <mark style="color:red;">**not 3**</mark>:exclamation:
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [holes](sparse/holes "mention")
* [iterate](iterate "mention") - for-of and forEach() treat "holes" differently.
{% endtab %}

{% tab title="👥 相關" %}
* [arr.filter](method/arr.filter "mention") - remove "holes" in array.
* [arr.removevalue](ext/arr.removevalue "mention")
* [arr.removeundefined](ext/arr.removeundefined "mention")
* [fill](static-methods/fill "mention")
{% endtab %}

{% tab title="💈範例" %}
```javascript
let arr = [];
arr[1] = 1;
arr[3] = 2;
// ⭐️ same as: [  , 1,  , 2 ]
//               ^     ^  <---- holes ⭐️ 
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Better Programming ⟩ [What Are Holes in Arrays?](https://betterprogramming.pub/what-are-holes-in-arrays-3ac5fcbcd1c)
* [ ] [javascript-the-definitive-guide](../../../../master/ref/javascript-the-definitive-guide "mention") ⟩&#x20;
  * [ ] 7.1.1 Array Literals
  * [ ] 7.3 Sparse Arrays
{% endtab %}

{% tab title="📘 手冊" %}
* [Array.prototype method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
{% endtab %}
{% endtabs %}

## Array(n) vs. Array(n).fill()

{% hint style="warning" %}
**Array(3)**&#x20;

* 只會設定<mark style="color:yellow;">**陣列長度**</mark> `{length: 3}`，並<mark style="color:red;">**不會設定**</mark><mark style="color:red;">「</mark><mark style="color:red;">**整數索引**</mark><mark style="color:red;">」</mark>屬性
* 如果做 `.map()`，只會得到**空陣列**，因為 `.map()` 會保留「洞」。\


**Array(3).fill()**&#x20;

* 會填入 <mark style="color:purple;">`undefined`</mark>，並<mark style="color:yellow;">**設定**</mark><mark style="color:yellow;">「</mark><mark style="color:yellow;">**整數索引**</mark><mark style="color:yellow;">」屬性</mark>，這時使用 `.map()` 就會有實際效果。
{% endhint %}
