> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/builtin/arr/sparse.md).

# sparse array

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

{% hint style="warning" %}
[**loops**](/web/js/grammar/statement/loop.md) 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**](/web/js/grammar/statement/loop/for/of.md)：<mark style="color:yellow;">**treats**</mark> "<mark style="color:yellow;">**holes**</mark>" as [**undefined**](/web/js/val/prim/undefined.md).
* [**forEach**](/web/js/grammar/statement/loop/for/foreach.md)：<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: [how array methods deal with "holes" ?](/web/js/val/builtin/arr/sparse/holes.md)
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
[**deleting**](/web/js/val/obj/prop/create/delete.md) an array [element](/web/js/val/builtin/arr/element.md) 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**](/web/js/val/builtin/arr/create/arr.md) <mark style="color:yellow;">**contains multiple**</mark> [**commas**](/web/js/grammar/token/punctuator/comma.md) <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**](/web/js/val/builtin/arr/create/arr.md) syntax <mark style="color:yellow;">**allows**</mark> an <mark style="color:yellow;">**optional**</mark> [**trailing comma**](/web/js/grammar/token/literal/trailing-comma.md), 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="🔴 主題" %}

* [how array methods deal with "holes" ?](/web/js/val/builtin/arr/sparse/holes.md)
* [iterating elements](/web/js/val/builtin/arr/iterate.md) - for-of and forEach() treat "holes" differently.
  {% endtab %}

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

* [arr.filter()](/web/js/val/builtin/arr/method/arr.filter.md) - remove "holes" in array.
* [arr.removeValue()](/web/js/val/builtin/arr/ext/arr.removevalue.md)
* [arr.removeUndefined()](/web/js/val/builtin/arr/ext/arr.removeundefined.md)
* [Array(n) vs. Array(n).fill()](/web/js/val/builtin/arr/static-methods/fill.md)
  {% 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](/web/master/ref/javascript-the-definitive-guide.md) ⟩&#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 %}