JS趴趴往上走-陣列篇

陣列

陣列，是一種JS儲放資料的物件，可以放零到多個集合，它的值是有順序序列的，已[ ]包覆資料

陣列基本樣式

 var 陣列名稱=[];

可在[ ]放置資料

 var a=[123,46,"Hello",45,"oole"];

我們也可以使用new來建立

 var a=new Array("aaa","bbb",124);

陣列有個屬性:length，提供存取陣列的長度，以下範例來說答案是5

 var a=[123,46,"Hello",45,"oole"]; //共五筆

 a.length; //5  

存取

當我們想把資料取出來時，就需要使用到索引編號
這邊要提醒的是陣列的索引是從0開始計算的哦!


當我們取得第三個的Hello，但它的索引是2

 var a=[123,46,"Hello",45,"oole"]; //共五筆


//陣列名稱[索引編號];
a[2]; //Hello

建立陣列

我們可以透過元素帶入陣列

一種是帶入你要的順序和元素

 var a=[] //空字串

a[0]='aaa'; //第0順位帶入'aaa'
a[1]='bbb';
a[2]='ccc';

console.log(a); //["aaa","bbb","ccc"]

以上面方式，我們也可以更改哪個順位的元素

 var a=["aaa","bbb","ccc"];

 a[1]=123;

 console.log(a); //["aaa",123,"ccc"];

或者也可以元素直接帶入想要的順位

 var a=["aaa","bbb","ccc"];

 a[6]=123;

 console.log(a); //["aaa",123,"ccc",undefined, undefined, undefined, 123];

若想在陣列末端新增元素可以透過

push()

 var a=["aaa","bbb","ccc"];

 a.push('ddd');

 console.log(a);  //["aaa", "bbb", "ccc", "ddd"]
 a.length; //4

pop

:移除陣列末端元素

 var a=["aaa","bbb","ccc"];

 a.pop();

 console.log(a); //["aaa",'bbb']
 a.length; //2

arrayObject.splice(index,howmany,item1,.....,itemX)

刪除/更改陣列其中的元素可使用

• index:想刪除或更改陣列的位置
• hownany:刪除/更改的長度，若設置為0則不會刪除項目
• item1,.....,itemX:更改後的元素

 var a=["aaa","bbb","ccc"];
 var b=["111","222","333","444"];

 //在第一個位置做更改兩個長度，修改成"ddd","eee"
 a.splice(1,2,"ddd","eee");
 console.log(a);//["aaa","ddd","eee"]

//在第二個位置刪除一個
 b.splice(2,1);
 console.log(b);//["111","222","444"]

arrayObject.reverse()

:反轉陣列元素

 var a=["aaa","bbb","ccc"];

 a.reverse();
 console.log(a);//["ccc", "bbb", "aaa"]

將陣列中所有的元素連接成一個字串，並回傳:

arr.join([separator])

 var a=["aaa","bbb","ccc"];
 var b=["111","222","333","444"];
 
 //使用空白建連接
 a.join(" ");

 //使用-連接
 b.join("-");

 console.log(a);//"aaa bbb ccc"
 console.log(b);//"111-222-333-444"

還有許多陣列修改大家也可以上MDN看看~~~~

最後給大家，陣列和物件的應用

var classRoom=[
   {
     StudentNum:'A10101',
     Name:'John',
     Age:20,
     Gender:'Male',
     MathGrade:[80,67,97],
     local:true
   },
   {
     StudentNum:'A10102',
     Name:'Herry',
     Age:20,
     Gender:'Male',
     MathGrade:[60,67,57],
     local:true
   },
   {
     StudentNum:'A10103',
     Name:'Marry',
     Age:19,
     Gender:'Female',
     MathGrade:[90,87,95],
     local:false
   },
   {
     StudentNum:'A10104',
     Name:'Judy',
     Age:20,
     Gender:'Female',
     MathGrade:[73,58,67],
     local:true
   },
   {
     StudentNum:'A10105',
     Name:'Bob',
     Age:19,
     Gender:'Male',
     MathGrade:[67,67,55],
     local:false
   },

]

classRoom.length; //5
classRoom[1];// StudentNum:'A10102',Name:'Herry',Age:20,Gender:'Male',MathGrade:[60,67,57],local:true