# how array methods deal with "holes" ?

[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](https://lochiwei.gitbook.io/web/js/val/builtin/arr/sparse) ⟩ how array methods deal with "holes" ? 

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

* [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="📗 參考" %}

* [ ] 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") ⟩ 
  * [ ] 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 %}

{% 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).
* `concat` — keeps holes
* `copyWithin` — holes are copied
* `entries`, `keys`, `values` — treats holes as `undefined`
* `every` — ignores holes
* `fill` — fills holes
* [**filter**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)： <mark style="color:red;">**removes**</mark> holes (its result is <mark style="color:yellow;">**always a "dense" array**</mark>).  :point\_right: [arr.filter](https://lochiwei.gitbook.io/web/js/val/builtin/arr/method/arr.filter "mention")
* `find` — treats holes as elements
* `findIndex` — treats holes as elements
* [**flat**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) - <mark style="color:red;">**removes**</mark> <mark style="color:yellow;">**holes**</mark> <mark style="color:red;">**but**</mark> <mark style="color:orange;">**keeps**</mark> [**undefined**](https://lochiwei.gitbook.io/web/js/val/prim/undefined).&#x20;
* [**forEach**](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/foreach)： <mark style="color:red;">**ignores**</mark> holes (closure not invoked).  :point\_right: [vs-foreach](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/of/vs-foreach "mention")
* `indexOf` — ignores holes
* `join` — converts holes to empty strings
* `lastIndexOf` — ignores holes
* [**map**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)： <mark style="color:yellow;">**preserves**</mark> holes (but <mark style="color:red;">**ignored**</mark> by mapping function)
* `pop` — treat holes as elements
* `push` — preserves holes
* `reduce` , `reduceRight`— ignores holes
* `reverse` — preserves holes
* `shift` — treat holes as `undefined`
* `slice` — preserves holes
* `sort` — preserves holes
* `toString` — preserves holes
* `unshift` — preserves holes
* `values` — converts holes to `undefined`
  {% endhint %}