[鐵人賽] JavaScript Array 介紹 - Node.js Day 8

JavaScript Array

前言

今天要討論 Array，在 Array 是個很重要的物件型態，在 JavaScript 裡面有許多 Array 好用的方式，這次將會為大家介紹 Array 優秀之處。

內文

陣列也是屬於 JavaScript 的原生物件之一，在實際開發會有許多時候需要使用 Array 的方法，先來介紹一下陣列要怎麼宣告。

陣列宣告

宣告方式，

var a=['a', 'b', 'c'];

var a=new Array('a', 'b', 'c');

以上這兩種方式都可以宣告成陣列，接著我們將 a 這個變數印出來看一下，

console.log(a);
//print: [0, 1, 2]

Array 的排列指標從 0 開始，像上面的例子來說， a 的指標就有三個，0, 1, 2，如果要印出特定的某個陣列數值，使用方法，

console.log(a[1]);
//print: b

如果要判斷一個變數是不是 Array 最簡單的方式就是直接使用 Array 的原生方法，

var a=['a', 'b', 'c'];

console.log(Array.isArray(a));
//print: true

var b='a';
console.log(Array.isArray(b));
//print: false

如果要取得陣列變數的長度可以直接使用，

console.log(a.length);

length 為一個常數，型態為 Number，會列出目前陣列的長度。

pop, shift

以前面所宣告的陣列為範例，

var a=['a', 'b', 'c'];

使用 pop 可以從最後面取出陣列的最後一個值。

console.log(a.pop());
//print: c

console.log(a.length);
//print: 2

同時也可以注意到，使用 pop 這個方法之後，陣列的長度內容也會被輸出。
另外一個跟 pop 很像的方式就是 shift，

console.log(a.shift());
//print: a

console.log(a.length);
//print: 1

shift 跟 pop 最大的差異，就是從最前面將數值取出，同時也會讓呼叫的陣列少一個數組。

slice

前面提到 pop, shift 就不得不說一下 slice，使用方式，

console.log(a.slice(1,3));
//print: 'b', 'c'

第一個參數為起始指標，第二個參數為結束指標，會將這個陣列進行切割，變成一個新的陣列型態。 如果需要給予新的變數，就可以這樣子做，完整的範例。

var a=['a', 'b', 'c'];

var b=a.slice(1,3);

console.log(b);
//print: 'b', 'c'

concat

concat 這個方法，可以將兩個 Array 組合起來，

var a=['a'];

var b=['b', 'c'];

console.log(a.concat(b));
//print: 'a', 'b', 'c'

concat 會將陣列組合，之後變成全新的數組，如果以例子來說，a 陣列希望變成 ['a', 'b', 'c']，可以重新將數值分配給 a，範例來說

a = a.concat(b);

Iterator

陣列資料，必須要有 Iterator，將資料巡迴一次，通常是使用迴圈的方式，

var a=['a', 'b', 'c'];

for(var i=0; i < a.length; i++) {
    console.log(a[i]);
}

//print: a
//       b
//       c

事實上可以用更簡單的方式進行，

var a=['a', 'b', 'c'];

a.forEach(function (val, idx) {
    console.log(val, idx);
});

/*
print:
a, 0
b, 1
c, 2
*/

在 Array 裡面可以使用 foreach 的方式進行 iterator， 裡面給予的 function (匿名函式)，第一個變數為 Array 的 Value, 第二個變數為 Array 的指標。

結語

陣列大致上就先介紹到此為止，在實戰應用的時候，會有更多時間點使用 Array 的原生型態，或者進行 Array 的組合分割技巧，在這邊就先以基本的 Array 方法為主。
明天會進入 function, class 的方法，這些部份，有些東西漸漸的會變得比較隱晦，我也不想去解釋太多，畢竟這邊是以實戰為主，就一起來期待明天吧！