JavaScript - 陣列(Array) - 筆記長也NotesHazuya

JavaScript - 陣列(Array)

2018-04-14 17:45:45   JavaScript

JavaScript的陣列有超過一種的宣告方式,也提供了很多的函數可以使用。

JavaScript中的陣列

在JS當中,陣列既是一種資料集合,也是一種物件。

宣告陣列

以Array方法宣告

這種方法大致上是利用建構子建構出一個Array物件,例如:

var p=new Array(10);
p[1]=50;

這樣可以宣告出共有10個元素的陣列,索引值由0至9。

var p=new Array();
p[5]=50;

如果不給定元素個數也是可以的,當我們令該陣列索引值為5的內容為50的時候,會產生索引值0~4內容為空的陣列。

直接宣告

這種方法不透過Array方法宣告,直接利用大多數程式語言的通用方法宣告:

var todo=[];//空陣列
var todo=["完成JS","看統一球賽","吃晚餐","倒垃圾"];//長度為4的陣列且指定內容,索引值依序由0~3
console.log(todo[1]);//看統一球賽

JSON方式

這種方法利用JSON的資料格式來建立陣列,可以指定索引值,與PHP的關聯陣列很類似,例如:

var dis={"NZ":"楠梓","SH":"士林"};
console.log(dis["NZ"]);//楠梓
console.log(dis.SH);//士林
//由於這種方法是建立為物件,當中的NZ與SH可以視為該物件的屬性

新增陣列元素

push方法

陣列名稱.push(資料) : 在陣列最後面加入資料,可以輸入多個參數

var st=["創新路"];
st.push("土庫二路","楠梓路");
//st[創新路,土庫二路,楠梓路]

unshift方法

陣列名稱.unshift(資料) : 在陣列最前端加入資料,可以輸入多個參數

var st=["創新路"];
st.push("土庫二路","楠梓路");
st.unshift("建楠路","重新路三段","士商路");
//st[建楠路,重新路三段,士商路,創新路,土庫二路,楠梓路]

刪除陣列元素

var t=["長","也"];
t[0]=null;//null
t[0]="";//空字串

上面兩種指定方式都沒辦法將陣列的元素清除,只能將內容指定為空或者空字串,如果要將陣列的整個元素移除,可以使用下列方法:

pop方法

陣列名稱.pop() : 這種方法可以刪除陣列中最後的元素,括號中的引數無論給多少都是刪除末端資料。

var todo=["完成JS","看統一球賽","吃晚餐","倒垃圾"];
todo.pop();
//todo["完成JS","看統一球賽","吃晚餐"]

shift方法

陣列名稱.shift() : 刪除陣列前端元素,引數無論多少都是刪除前端資料。

var todo=["完成JS","看統一球賽","吃晚餐","倒垃圾"];
todo.shift();
//todo["看統一球賽","吃晚餐","倒垃圾"]

splice方法

陣列名稱.splice() : 刪除指定元素,並且新增元素。(從第幾個開始刪除 , 刪除幾個 欲增加元素),如果刪除幾個的參數為空,會刪除到陣列結束為止,欲增加元素為空就不會加入新元素。

var todo=["完成JS","看統一球賽","吃晚餐","倒垃圾"];
todo.splice(1,1,"看富邦球賽");
//todo["完成JS","看富邦球賽","吃晚餐","倒垃圾"]

找尋陣列元素

indexOf方法

陣列名稱.indexOf("查找內容") : 陣列內容存在,回傳所在索引;不存在則回傳-1

var todo=["完成JS","看統一球賽","吃晚餐","倒垃圾"];
console.log(todo.indexOf("完成JS"));//0

filter方法

陣列名稱.filter() : 回傳符合指定條件的陣列內容,並建立為一個新的陣列,這個方法需要建立一個匿名函數。

var nt=todo.filter(function (value){
	return value==="吃晚餐";
});
console.log(nt[0]);//吃晚餐

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)