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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/val/builtin/arr.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.