iT邦幫忙

1

[筆記][JavaScript]關於陣列的基本操作

  • 分享至 

  • xImage
  •  

陣列和物件很像(其實陣列也是物件,但這時候說的是使用上相似),都是由一個索引對上一個值,但唯一不同的是,陣列的索引是由零開始的數字,每個數字都會對應一個值,這些值又稱為陣列中的元素,而要建立陣列最簡單的方式就是使用陣列字面值,如下:

//首先用陣列字面值宣告一個陣列arr
//同時在arr的第0,1,2個索引位置中分別指定給他'a','b','c'三個字串元素
var arr=['a','b','c'];

//讀取陣列arr中的所有元素
arr;  //取得['a','b','c']

//用中括號讀取第0個索引位置
arr[0]; //會得到'a'

//也可以重新設定陣列中任何一個元素的值
arr[0]='x';

//讀取陣列arr中的所有元素
arr;  //取得['x','b','c']

以上是使用陣列字面值來宣告陣列,但在文章一開始有提到陣列其實也是物件,所以他也可以使用「建構器」來宣告陣列,如下:

//用「建構器」宣告一個空陣列arr1
var arr1 = new Array(2); //宣告一個陣列,並給他兩個位置,但這時候這兩個位置的值都是undefined

//用建構器宣告一個含有值的陣列
var arr1 = new Array('a','b','c'); //效果等同於var arr=['a','b','c'];

//但是我們其實會避免使用上述的方式,因為他無法建立值為數字的陣列
var arr1 = new Array(2) //這個建構子的結果不會等同var arr1=[2];,而是宣告一個位置為2的空陣列

//再來一個例子
var arr1 = new Array(3.5) //這個建構子也不會等同var arr1=[3.5];,而是會出現範圍錯誤

當然陣列也有一些方法,如下:

//首先比較特別的是陣列中的length是可以被改變的
var arr=['a','b','c'];
arr.length; //會回傳陣列長度,為3
//我們試著改變陣列的長度
arr.length = 2; 
//再一次讀取arr
arr; //會得到['a','b'],發現在第三個位置的'c'被移除了
//如果我們試著增加陣列長度
arr.length = 3;
//再一次讀取arr
arr; //會得到['a','b',empty],會在多出來的位置中出現一個空值
//試著讀取那個空的位置
arr[2]; //會取得undefined

//接著如果我們要增加索引及值到陣列中可以用push()
arr.push('d'); //增加一個'd'到arr中
//再讀取一次arr
arr;  //會得到['a','b',empty,'d'],會增加值到新的索引中

//接著如果我們想要移除當中的空值,也可以使用splice()
arr.splice(2,1); //splice的第一個參數為第幾個索引,第二個為從第一個參數開始幾個索引長度
//讀取arr
arr; //會得到['a','b','d'];可以發現原本該陣列中的第2個索引已經被移除掉了。

//再來如果我們要在該陣列的第1個和第2個索引中增加一個值也可以用splice()
arr.splice(2,0,'c'); //我們改了第二個參數為0,因為這個參數代表移除幾個長度,如果設0原本的值就不會被影響了,第三個參數為要寫入的值。
//直接讀取arr
arr; //會得到['a','b','c','d'];

//來運用上面兩種splice()的使用方法,若我們要將中間的第一個和第二個索引值取代成1個e字串值
arr.splice(1,2,'e');
//讀取arr
arr; //會得到['a','e','d'];,splice(1,2,'e')是指第一、二個參數就是從第1個索引值開始,作用2個長度的範圍,第三個參數再增加一個'e'值。

接著講一個不重要的,因為陣列也是物件,所以他也能擁有「特性」,但他不算陣列的一部份

var arr = ['a','b','c'];
//為arr設定一個特性
arr.name='arr';
arr[name]; //還是能透過物件的方法取得name特性的值'arr'
arr; //會取得['a','b','c',name:'arr']
//但是當我們去讀取第三個索引值時
arr[3]; //會回傳undefined,因為name是「特性」,並不是陣列中的值

以上如果我有觀念錯誤的地方,還麻煩各位大大指點了,謝謝大家!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言