# JS 學習筆記(3) - 陣列(Array)

- [重新認識 JavaScript: Day 04 物件、陣列以及型別判斷](https://ithelp.ithome.com.tw/articles/10190962)
- [The JavaScript languageObjects: the basics - Array](https://zh.javascript.info/array)

物件允許存儲鍵值集合，但是我們有時候會需要有序集合，將元素按順序排列，這時候使用物件就不是很方便，因為物件不能提供管理元素順序的方法，因此就可以使用 Array，它能儲存有序的集合。

## 陣列聲明

聲明陣列

// 方括號 (常見)
let arr = [item1, item2...];
// new Array (少見)
let arr = new Array(item1, item2...);

添加初始元素

let fruits = ["Apple", "Orange", "Plum"];

陣列從 0 開始編號(索引 , Index)

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits[0] ); // Apple
alert( fruits[1] ); // Orange
alert( fruits[2] ); // Plum
alert( fruits.length ); // 陣列長度為 3
alert( fruits ); // Apple,Orange,Plum

添加與替換元素

fruits[2] = 'Pear'; // ["Apple", "Orange", "Pear"]
fruits[3] = 'Lemon'; // ["Apple", "Orange", "Pear", "Lemon"]

陣列可以儲存任何型別的元素

// 混合值
let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];

// 獲取索引為 1 的物件然後顯示它的 name
alert( arr[1].name ); // John

// 獲取索引為 3 的函數並執行
arr[3](); // hello

清空陣列的方法

let arr = [1, 2, 3, 4, 5];
arr.length = 0;

## push & pop 方法

push 方法，將元素加入到陣列末尾：

let fruits = ["Apple", "Orange"];
fruits.push("Pear");
alert( fruits ); // Apple, Orange, Pear

pop 方法，從陣列末尾將元素取出：

let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.pop() ); // 取出 "Pear" 
alert( fruits ); // Apple, Orange

## shift & unshift 方法

unshift 方法，將元素加入到陣列頭部：

let fruits = ["Orange", "Pear"];
fruits.unshift('Apple');
alert( fruits ); // Apple, Orange, Pear

shift 方法，從陣列頭部將元素取出：

let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.shift() ); // 移除 Apple
alert( fruits ); // Orange, Pear

一次添加多個元素

let fruits = ["Apple"];

fruits.push("Orange", "Peach");
fruits.unshift("Pineapple", "Lemon");

// ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]
alert( fruits );

## 陣列的遍歷

使用 for 循環

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

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

使用 `for..of`

此方式不能獲取陣列的索引值，只能獲取陣列的值

let fruits = ["Apple", "Orange", "Plum"];

for (let fruit of fruits) {
  alert( fruit );
}

不要使用 `for..in`

## 多維陣列

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

alert( matrix[1][1] ); // 5

其他陣列方法：https://zh.javascript.info/array-methods