> For the complete documentation index, see [llms.txt](https://mistborn.gitbook.io/til-coding/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mistborn.gitbook.io/til-coding/javascript/arrays.md).

# 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"
```