Skip to content

Latest commit

 

History

History
149 lines (104 loc) · 3.6 KB

File metadata and controls

149 lines (104 loc) · 3.6 KB

Array

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

Array 陣列宣告

宣告方式

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

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

console.log(a);
//print: ["a", "b", "c"]

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,會列出目前陣列的長度。

Array 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 最大的差異,就是從最前面將數值取出,同時也會讓呼叫的陣列少一個數組。

Array 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'

Array 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);

Array 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 的方法,這些部份,有些東西漸漸的會變得比較隱晦,許多實際應用部分在實際開發的時候會看到更多主要執行方式。