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

JavaScript Array

前言

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

內文

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

陣列宣告

宣告方式,

var a=['a', 'b', 'c'];<br></br><br></br>var a=new Array('a', 'b', 'c');<br></br>

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

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

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

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

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

var a=['a', 'b', 'c'];<br></br><br></br>console.log(Array.isArray(a));<br></br>//print: true<br></br><br></br>var b='a';<br></br>console.log(Array.isArray(b));<br></br>//print: false<br></br>

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

console.log(a.length);<br></br>

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

pop, shift

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

var a=['a', 'b', 'c'];<br></br>

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

console.log(a.pop());<br></br>//print: c<br></br><br></br>console.log(a.length);<br></br>//print: 2<br></br>

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

console.log(a.shift());<br></br>//print: a<br></br><br></br>console.log(a.length);<br></br>//print: 1<br></br>

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

slice

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

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

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

var a=['a', 'b', 'c'];<br></br><br></br>var b=a.slice(1,3);<br></br><br></br>console.log(b);<br></br>//print: 'b', 'c'<br></br>

concat

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

var a=['a'];<br></br><br></br>var b=['b', 'c'];<br></br><br></br>console.log(a.concat(b));<br></br>//print: 'a', 'b', 'c'<br></br>

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

a = a.concat(b);<br></br>

Iterator

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

var a=['a', 'b', 'c'];<br></br><br></br>for(var i=0; i < a.length; i++) {<br></br> console.log(a[i]);<br></br>}<br></br><br></br>//print: a<br></br>// b<br></br>// c<br></br>

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

var a=['a', 'b', 'c'];<br></br><br></br>a.forEach(function (val, idx) {<br></br> console.log(val, idx);<br></br>});<br></br><br></br>/*<br></br>print:<br></br>a, 0<br></br>b, 1<br></br>c, 2<br></br>*/<br></br>

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

結語

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

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn