彭彭學院

JS Array 陣列使用說明

彭彭JavaScript 程式技術2018-03-01

建立陣列的語法

在 JavaScript 中,陣列以物件的形式存在,我們可以根據需求,使用以下語法建立陣列:

// 建立一個空陣列 []
let a1=new Array();
// 建立一個長度為 3 的陣列,無存放資料 [ , , ]
let a2=new Array(3);
// 直接使用 JSON 實字建立長度為 3 的陣列,且存放 3, 4, 5 三個資料
let a3=[3, 4, 5];

陣列的基本操作

陣列中可以包含多個資料,按照順序編號,第 1 個資料編號 0,第 2 個資料編號 1,第 N 個資料編號 N-1。我們可以操作陣列中的資料如下:

let a=[3, 4, 5];
let len=a.length; // 取得陣列長度 3
// 第一個資料改為 6,陣列變成 [6, 4, 5]
a[0]=6;
// 第二個資料改為 2,陣列變成 [6, 2, 5]
a[1]=2;
// 分別取出陣列的資料,並做加法,結果是 13
let result=a[0]+a[1]+a[2];

陣列的動態資料操作

JavaScript 陣列是一種動態資料結構,陣列的長度會自動擴張或縮小,可對陣列的特定位置做資料的插入、附加、或刪除。

let a=[3, 4, 5];
// 在陣列的尾巴加入新資料,陣列變成 [3, 4, 5, 6]
a.push(6);
// 在陣列的開頭插入新資料,陣列變成 [2, 3, 4, 5, 6]
a.unshift(6);
// 刪除並取得陣列尾巴資料,取得 6,陣列變成 [2, 3, 4, 5]
let data=a.pop();
// 刪除並取得陣列開頭資料,取得 2,陣列變成 [3, 4, 5]
data=a.shift();
// 刪除陣列編號 1 起算 2 筆資料,陣列變成 [3]
a.splice(1, 2);

陣列的搜尋與篩選

我們可以搜尋特定資料是否包含在陣列中,或者篩選出符合特定條件的資料,程式碼參考如下:

let a=[3, 4, 5];
// 搜尋陣列中是否包含 4,回傳位置編號 1
let index=a.indexOf(4);
// 搜尋陣列中是否包含 10,回傳位置編號 -1 表示不包含
index=a.indexOf(10);
// 取得陣列中大於 3 的資料,passed 是新的陣列 [4, 5]
let passed=a.filter(function(data){
	return data>3;
});

逐一處理陣列中的資料

將陣列中的資料逐一處理,並取得處理的結果:

let a=[3, 4, 5];
// 將陣列中的資料放大兩倍,big 存放處理的結果 [6, 8, 10]
let big=a.map(function(data){
	return data*2;
});

更多參考資訊

JavaScript 的陣列支援非常多方便的操作,以上列舉一些彭彭認為基礎且重要的部份。若需要參考更多資訊,可至陣列的參考資料中查詢。若想學習更多 JavaScript 進階的技術和陣列的運用,也歡迎參考 JavaScript 前端工程實務課程。感謝你的閱讀,希望會有些幫助 :)


返回前頁

回到上方

相關課程推薦