在陣列的課題中，新手的我覺得最難的部分之一是如何靈活運用陣用不同的方法，特別是迭代(forEach,map,reduce等)的部分。因為鐵人賽的關係，所以也多看了關於陣列的知識，之後發現自己連基本的陣列定義、屬性和方法都還未掌握好(崩潰QQ，因此還是先回到基本步，整理一下之前未學過的基本知識，再跳更深的坑。

陣列是物件(object)的一種，它會順序排列資料，當中的資料可以是不同資料型別，而索引(index)是由0開始數起。

定義陣列

我們可以用兩種方法來定義陣列：

• 陣列實字 (最常用)
• 用new的方法 (不建議使用)

陣列實字(Array literal)，最常寫法：

//陣列實字寫法
const color = ['red','blue','yellow']

//或者

const color = []
color[0] = 'red'
color[1] = 'blue'
color[2] = 'yellow'

console.log(color); ["red","blue","yellow"]
console.log(color.length); //3

new寫法：

const a = new Array();
a[0] = 'Tom';
a[1] = 'Mary';
a[2] = 'Kate';

//或者直接在()裏帶入資料
const a = new Array('Tom','Mary','Kate');

但注意，如果()裏放進一個數字，它就會當這數字是陣列的總長度

const x = new Array(10);
console.log(x) //回傳一個裏面有10個undefined的值

因為這個方法很易混淆，效能也沒有特別好，所以不建議用new的寫法去建立陣列。

陣列種類

我們經常見到的陣列都會密密集集排在一起，例如[1,2,3,4,5]這樣，它們被稱為密集陣列，但其實陣列還會有其他種類：

• 稀疏陣列
• 多維陣列
• 類陣列

稀疏陣列(或多洞陣列)

意思是整個陣列裏，有些位置沒有被塞值進去而丢空著，使資料與資料之間有一些空隙：

let sparseArr = ['cat','dog',,'bird','fish',,'monkey'];

console.log(sparseArr[2]) //undefined
console.log(sparseArr) 
//["cat", "dog", empty, "bird", "fish", empty, "monkey"]

陣列中的資料之間有空隙，並沒有塞值，所以從陣列中，可見沒有值的資料一律被顯示為empty，而它們的值其實就是undefined。

//即使是undefined，也會被算進.length裏
let a = [,];
let b = [undefined,undefined,false,null];

console.log(a.length) //1
console.log(b.length) //4

我們很少特意去建立一個稀疏陣列，但有時候沒留心而錯置了資料的話，就可能會埋下一個稀疏陣列：

let arr = [];
arr[0] = 'a';
arr[2] = 'b';
arr[3] = 'c';

console.log(arr.length) //4
console.log(arr[1]) //undefined

多維陣列

簡單講就是陣列裏包陣列：

const y = [
    [1,3,5,7,9],
    [11,13,15],
    [17,19]
]

console.log(y[1][1]) //13

類陣列(array-like)

類陣列是指那些看似是陣列，但其實不是陣列的物件。我們無法在這些類陣列上用陣列內建的方法，例如indexOf、forEach。

Some objects in JavaScript look like an array, but they aren’t one. That usually means that they have indexed access and a length property, but none of the array methods. Examples include the special variable arguments, DOM node lists, and strings.

陣列(Array)特性：

• 當有新的資料被加入，length屬性會自動被更新
• 把length屬性設定成比原本length屬性值更少的值，就會截短了整個陣列
• 能夠用陣列內建方法去處理
• class屬性為Array

類陣列(Array-like)的特性：

• 可以訪問length屬性
• 不能用內建陣列方法，例如：push、forEach、indexOf

最常見的例子是DOM method的document.getElementsByClassName()

<div class="array-like">123</div>
<div class="array-like">456</div>
<div class="array-like">789</div>

JavaScript:

console.log(document.getElementsByClassName('array-like'))
console.log(document.getElementsByClassName('array-like')[0]) 
console.log(document.getElementsByClassName('array-like').length) 

根據上面的定義，在這個例子中我們可以訪問這個類陣列的長度，但不會更新：

//不能更新陣列的length

let arrayLike = document.getElementsByClassName('array-like')
arrayLike.length = 5
console.log(arrayLike) 
//仍然是[div.array-like, div.array-like, div.array-like]

此外，我們也不能用陣列內建方法去處理這些類陣列。

arrayLike.forEach( (item) => {
    console.log(item)
})
//Uncaught TypeError: arrayLike.forEach is not a function

如果要把一個類陣列轉成陣列，我們會用其他方法去處理，但這裏就先不作討論。

陣列屬性之一：length

在處理陣列時常常會用列length來取得該陣列的長度。除了一般的用法，也有一些地方需要注意：

• 新增屬性不會影響陣列的length
• 把length設定為比原陣列的length短，就會截短原陣列

新增屬性不會影響陣列的length

因為陣列也是物件的一種，所以也是可以增加屬性，範例如下：

const test = [
    'Mary',
    true,
    1,
    {age: 12}
];

test.name = 'Tom'

console.log(test)
console.log(test.length) //4

這裏的name不會被算進陣列長度，它只是陣列裏的其中一個屬性。

把length設定為比原陣列的length短，就會截短原陣列

舉個例子：

const test = [12,3,5,7]
test.length = 2
console.log(test) //[12,3]

總結

定義陣列：

• 陣列實字 (最常用)
• new方法 (不建議使用)

陣列種類：

• 稀疏陣列
• 多維陣列
• 類陣列

類陣列可以被訪問length屬性，但不能夠用陣列內建方法去處理。

length屬性的其他注意事項：

• 新增屬性不會影響陣列的length
• 把length設定為比原陣列的length短，就會截短原陣列

参考資料

JS 陣列 Array 有哪幾種？
你懂 JavaScript 嗎？#5 值（Values）Part 1 - 陣列、字串、數字
JavaScript: The Definitive Guide, 6th Edition - Array-Like Objects
JavaScript quirk 8: array-like objects
陣列．從ES6開始的JavaScript學習生活