# Arrays

## Declaration

```javascript
let arr = new Array();
let arr = [];

// most time use [...]
let fruits = ["Apple", "Orange", "Plum"];
alert( fruits[0] ); // Apple
alert( fruits[1] ); // Orange
alert( fruits[2] ); // Plum

// replace
fruits[2] = 'Pear'; // now ["Apple", "Orange", "Pear"]

// add new one
fruits[3] = 'Lemon'; // now ["Apple", "Orange", "Pear", "Lemon"]

// length
let fruits = ["Apple", "Orange", "Plum"];
alert( fruits.length ); // 3

// store any type data
// mix of values
let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];

// get the object at index 1 and then show its name
alert( arr[1].name ); // John

// get the function at index 3 and run it
arr[3](); // hello
```

## Methods pop/push, shift/unshift

* `.pop()` 從 array 最後拿走一個值。

  ```javascript
  let fruits = ["Apple", "Orange", "Pear"];

  alert( fruits.pop() ); // remove "Pear" and alert it

  alert( fruits ); // Apple, Orange
  ```
* `.push()` 從 array 最後增加一個或多個值。

  ```javascript
  let fruits = ["Apple", "Orange"];

  fruits.push("Pear");
  fruits[fruits.length] = "Pear";

  alert( fruits ); // Apple, Orange, Pear
  ```
* `.shift()` 從 array 前面拿走一個值。

  ```javascript
  let fruits = ["Apple", "Orange", "Pear"];

  alert( fruits.shift() ); // remove Apple and alert it

  alert( fruits ); // Orange, Pear
  ```
* `.unshift()` 從 array 前面增加一個或多個值。

  ```javascript
  let fruits = ["Orange", "Pear"];

  fruits.unshift('Apple');

  alert( fruits ); // Apple, Orange, Pear
  ```

## Internals

array 是特殊的物件， key 是有順序的數字，複製的物件一樣指向相同記憶體。

```javascript
let fruits = ["Banana"]

let arr = fruits; // copy by reference (two variables reference the same array)

alert( arr === fruits ); // true

arr.push("Pear"); // modify the array by reference

alert( fruits ); // Banana, Pear - 2 items now
```

我們可以像一般的物件使用 array ，但會讓引擎認為他是一般的物件，而不能使用針對 array 做的優化及方法。誤用 array 的情況如下：

* 增加非數字的屬性 `arr.test = 5` 。
* 增加值但並非依照排列。增加 `arr[0]` 、 `arr[1000]` 他們中間沒有任何值。
* 新增值但順序相反 `arr[1000]`、`arr[999]` 。

```javascript
let fruits = []; // make an array

fruits[99999] = 5; // assign a property with the index far greater than its length

fruits.age = 25; // create a property with an arbitrary name
```

## Performance

![](/files/-LhV12_QqFMrGtpv5oqA)

```javascript
fruits.shift(); // take 1 element from the start
```

![](/files/-LhV15Bgf22TKoxAq-cL)

```javascript
fruits.pop(); // take 1 element from the end
```

![](/files/-LhV1AAgd7Z-kfXJbPwV)

## Loops

```javascript
let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) {
  alert( arr[i] );
}

// same
// iterates over array elements
for (let fruit of fruits) {
  alert( fruit );
}

// same
// 可以使用 for..in 但會造成一些問題；有些類似 array 的物件，有其他屬性也會被帶入迴圈；用這個方法效能比較差
for (let key in arr) {
  alert( arr[key] ); // Apple, Orange, Pear
}
```

## A word about “length”

array 的 length 屬性準確地說是 index 值 +1，所以當 index 很大 length 也很大。

```javascript
let fruits = [];
fruits[123] = "Apple";

alert( fruits.length ); // 124
```

減少 length 屬性會造成資料被刪除，所以要清除 array 的方法有 arr.length = 0。

```javascript
let arr = [1, 2, 3, 4, 5];

arr.length = 2; // truncate to 2 elements
alert( arr ); // [1, 2]

arr.length = 5; // return length back
alert( arr[3] ); // undefined: the values do not return
```

## new Array()

```javascript
let arr = new Array("Apple", "Pear", "etc");

// 用 new 創造 array 可能會造成 array 存在但裡面沒有值。
let arr = new Array(2); // will it create an array of [2] ?

alert( arr[0] ); // undefined! no elements.

alert( arr.length ); // length 2
```

## Multidimensional arrays

```javascript
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // the central element
```

## toString

array 轉換 string 會返回 ， 分離的值，轉換用的方法為 toString()。

```javascript
let arr = [1, 2, 3];
alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true

alert( [] + 1 ); // "1"
alert( [1] + 1 ); // "11"
alert( [1,2] + 1 ); // "1,21"

// same
alert( "" + 1 ); // "1"
alert( "1" + 1 ); // "11"
alert( "1,2" + 1 ); // "1,21"
```


---

# 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://mistborn.gitbook.io/til-coding/javascript/arrays.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.