# sparse array

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [object](https://lochiwei.gitbook.io/web/js/val/obj) ⟩ [built-in](https://lochiwei.gitbook.io/web/js/val/builtin) ⟩ [Array](https://lochiwei.gitbook.io/web/js/val/builtin/arr) ⟩ 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**](https://lochiwei.gitbook.io/web/js/val/prim/undefined).
  {% endhint %}

{% hint style="warning" %}
[**loops**](https://lochiwei.gitbook.io/web/js/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**](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/of)：<mark style="color:yellow;">**treats**</mark> "<mark style="color:yellow;">**holes**</mark>" as [**undefined**](https://lochiwei.gitbook.io/web/js/val/prim/undefined).
* [**forEach**](https://lochiwei.gitbook.io/web/js/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](https://lochiwei.gitbook.io/web/js/val/builtin/arr/sparse/holes "mention")
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
[**deleting**](https://lochiwei.gitbook.io/web/js/val/obj/prop/create/delete) an array [element](https://lochiwei.gitbook.io/web/js/val/builtin/arr/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**](https://lochiwei.gitbook.io/web/js/val/builtin/arr/create/arr) <mark style="color:yellow;">**contains multiple**</mark> [**commas**](https://lochiwei.gitbook.io/web/js/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**](https://lochiwei.gitbook.io/web/js/val/builtin/arr/create/arr) syntax <mark style="color:yellow;">**allows**</mark> an <mark style="color:yellow;">**optional**</mark> [**trailing comma**](https://lochiwei.gitbook.io/web/js/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](https://lochiwei.gitbook.io/web/js/val/builtin/arr/sparse/holes "mention")
* [iterate](https://lochiwei.gitbook.io/web/js/val/builtin/arr/iterate "mention") - for-of and forEach() treat "holes" differently.
  {% endtab %}

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

* [arr.filter](https://lochiwei.gitbook.io/web/js/val/builtin/arr/method/arr.filter "mention") - remove "holes" in array.
* [arr.removevalue](https://lochiwei.gitbook.io/web/js/val/builtin/arr/ext/arr.removevalue "mention")
* [arr.removeundefined](https://lochiwei.gitbook.io/web/js/val/builtin/arr/ext/arr.removeundefined "mention")
* [fill](https://lochiwei.gitbook.io/web/js/val/builtin/arr/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](https://lochiwei.gitbook.io/web/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()` 會保留「洞」。<br>

**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 %}