> 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.md).

# Array

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md)⟩ [built-in](/web/js/val/builtin.md) ⟩ Array

{% hint style="success" %} <mark style="color:yellow;">**(**</mark>[Object](/web/appendix/typescript/type/object.md)<mark style="color:yellow;">**)**</mark>&#x20;

* an <mark style="color:yellow;">**ordered**</mark>**&#x20;collection** of [**values**](/web/js/val.md).&#x20;
* <mark style="color:yellow;">**each value**</mark> is called an [**element**](/web/js/val/builtin/arr/element.md). &#x20;
* each element has a <mark style="color:yellow;">**numeric position**</mark> in the array, known as its [**index**](/web/js/val/builtin/arr/element/index.md).&#x20;

JavaScript arrays are <mark style="color:yellow;">**untyped**</mark>:&#x20;

* an array element may be of <mark style="color:red;">**any**</mark> [**type**](/web/js/val/type.md).&#x20;
* different elements of the same array may be of <mark style="color:red;">**different**</mark>**&#x20;**<mark style="color:yellow;">**types**</mark>.
  {% endhint %}

{% tabs %}
{% tab title="🧨" %}
{% hint style="warning" %}
[arrays are iterated "live"❗️](/web/js/grammar/statement/loop/for/of/live-array.md)
{% endhint %}
{% endtab %}

{% tab title="⭐️" %}
{% hint style="warning" %} <mark style="color:purple;">**array**</mark>&#x20;

* <mark style="color:yellow;">**is**</mark> [iterable](/web/js/iteration/iterable.md)
* <mark style="color:yellow;">**is**</mark>**&#x20;**<mark style="color:red;">**not**</mark> [associated array](/web/js/concept/associated-array.md).
* inherits <mark style="color:yellow;">**methods**</mark> from <mark style="color:blue;">**Array.prototype**</mark>, <mark style="color:orange;">**most**</mark> of these methods are <mark style="color:yellow;">**generic**</mark>, they work correctly for any "[**array-like**](/web/js/val/builtin/arr/array-like.md)" object.
  {% endhint %}

{% hint style="warning" %}
:scales: **array&#x20;**<mark style="color:yellow;">**object properties**</mark> **vs**. <mark style="color:orange;">**array elements**</mark>&#x20;

* thery are <mark style="color:red;">**separate**</mark>:exclamation:
* array's [traversal and mutation operations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#array_methods) <mark style="color:red;">**cannot**</mark>**&#x20;**<mark style="color:yellow;">**be applied**</mark> to these <mark style="color:yellow;">**named properties**</mark>.

setting / accessing via <mark style="color:yellow;">**anything**</mark>**&#x20;**<mark style="color:red;">**other than**</mark> <mark style="color:blue;">**nonnegative**</mark>**&#x20;**<mark style="color:yellow;">**integers**</mark>：

* <mark style="color:yellow;">**will**</mark>**&#x20;**<mark style="color:red;">**not**</mark> set / retrieve an array element
* <mark style="color:green;">**will**</mark> set / access one of the array's [object properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#properties).&#x20;
  {% endhint %}

{% hint style="warning" %}
[**deleting**](/web/js/val/obj/prop/create/delete.md) an <mark style="color:purple;">**array**</mark> [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: ([sparse array](/web/js/val/builtin/arr/sparse.md))
{% endhint %}

{% hint style="info" %}
If an array literal contains multiple commas in a row, with no value between, the array is sparse.
{% endhint %}
{% endtab %}

{% tab title="🔴" %}

* :small\_orange\_diamond:[element](/web/js/val/builtin/arr/element.md)
* :small\_orange\_diamond:[element index](/web/js/val/builtin/arr/element/index.md)
* :small\_orange\_diamond:[array object property](/web/js/val/builtin/arr/obj-prop.md)
* :beginner: [<mark style="color:yellow;">**creating arrays**</mark>](/web/js/val/builtin/arr/create.md)
  * :1234:[array literal](/web/js/val/builtin/arr/create/arr.md)
* :beginner: [<mark style="color:yellow;">**accessing elements**</mark>](/web/js/val/builtin/arr/access.md)
* :beginner: [<mark style="color:yellow;">**iterating elements**</mark>](/web/js/val/builtin/arr/iterate.md)
* :beginner: <mark style="color:yellow;">**extending Array**</mark>
  * [Array extension](/web/js/val/builtin/arr/ext.md)
* <mark style="color:yellow;">**other topics**</mark>
  * :mushroom: [array-like](/web/js/val/builtin/arr/array-like.md) - object that has <mark style="color:yellow;">indexes</mark> and <mark style="color:yellow;">length</mark>.
  * :mushroom: [sparse array](/web/js/val/builtin/arr/sparse.md) - array that has "<mark style="color:yellow;">holes</mark>" in it.
    {% endtab %}

{% tab title="🔸" %}

* :beginner: [<mark style="color:yellow;">**accessing elements**</mark>](/web/js/val/builtin/arr/access.md)
  * push() - append element.
  * pop() - remove and return last element.
  * unshift() - prepend element.
  * shift() - remove and return first element.
* <mark style="color:yellow;">**combine elements**</mark>
  * [**join**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) - 連接所有元素、<mark style="color:red;">**合併成一個字串**</mark>。
  * reduce((result, element, index, array) => {...}) -&#x20;
  * reduceRight - reduce array from highest index to lowest. (from right to left)
* <mark style="color:yellow;">**find & search elements**</mark>
  * [**find**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) - 回傳<mark style="color:yellow;">**第一個**</mark><mark style="color:red;">**符合條件的元素**</mark>。否則回傳 [`undefined`](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/undefined)。
  * [**findIndex**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) - returns <mark style="color:yellow;">**index**</mark> of <mark style="color:yellow;">**first matching element**</mark>, <mark style="color:blue;">`-1`</mark> <mark style="color:red;">**otherwise**</mark>.
  * [**includes**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) - 判斷陣列是否<mark style="color:red;">**包含特定元素**</mark>。
  * [**some**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some) - 測試陣列中是否<mark style="color:red;">**有符合條件的元素**</mark>。
  * [**every**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every) - returns true if every element satisfies the condition.
    {% endtab %}

{% tab title="👥" %}

* [NodeList vs. Array](/web/browser/dom/type/nodelist/nodelist-vs.-array.md)
* Array is [iterable](/web/js/iteration/iterable.md).
* [bracket notation \[\]](/web/js/val/obj/prop/access/bracket-notation.md) is used to access [element](/web/js/val/builtin/arr/element.md).
  {% endtab %}

{% tab title="📗" %}

* [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) > Ch. 7 Arrays
  {% endtab %}

{% tab title="📘" %}

* Guides ⟩ [Arrays](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays) ⭐️
* [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) ⟩
  * [array elements cannot be accessed using arbitrary strings as indexes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#notes)&#x20;
    {% endtab %}

{% tab title="✨" %}

* codepen ⟩ [Array: intersection, union, difference ...](https://codepen.io/lochiwei/pen/MWvYdqb?editors=0012)
* [randomPassword()](/web/appendix/custom/custom-functions/random-password.md)
* [randomInt()](/web/js/val/prim/num/random/randomint.md)
  {% endtab %}

{% tab title="📍" %}
( 🚧 to be removed ... )

* [matrix methods](/web/js/val/builtin/arr/matrix-methods.md) (instance):
  * [mat.transpose()](/web/js/val/builtin/arr/matrix-methods/mat.transpose.md) - see matrix in "columns"
  * [mat.matrixMap()](/web/js/val/builtin/arr/matrix-methods/mat.matrixmap.md)
  * [mat.maxElementInEachColumn()](/web/js/val/builtin/arr/matrix-methods/mat.maxelementineachcolumn.md) - for number matrices only.
    {% endtab %}

{% tab title="🗣" %}

* How to get first N number of elements from an array
* [Remove empty elements from an array](https://stackoverflow.com/a/2843625/5409815)
  {% endtab %}
  {% endtabs %}