JavaScript初學者的入門天地!(20)陣列


JavaScript初學者的入門天地!(20)陣列




JavaScript中的陣列到底有多重要?學完它,很多事就事半功倍啦!


陣列(Arrays)

JavaScript 中的「陣列(Arrays)」,可被比喻成「可以一次承裝多個值的變數」。

大家應該都聽說過,一般的變數一次只能裝一個值,但陣列一次可裝多個變數!

例如,現在我們有三個課程名稱「HTML」、「CSS」、「JS」,就需要設立三個變數來承裝。原始碼如下所示:


var course1 ="HTML"; 
var course2 ="CSS"; 
var course3 ="JS"; 

但若是使用「陣列(Arrays)」,就可以把原始碼精簡成一行文,就像下面所示範的:


var courses = new Array("HTML", "CSS", "JS"); 

語法解析:上述示範的代碼,是宣告名為「courses」的陣列。這個陣列包含三個值(或稱元素)。建立新陣列的寫法為「new Array(元素一,元素二,元素三)」


取出陣列的某一元素

陣列裡含這麼多元素,當我們要找出某個元素時,就需要把索引號碼寫在方括號內。要取出陣列中的第 X 個元素,語法為「陣列名稱[X-1]」(因為陣列元素的編號是從零開始,不是從一開始,所以第一個元素的索引號為「0」、第二個元素的索引編號為「1」,由此類推⋯⋯)

我們承接前一段「名稱為 courses 的陣列」的例子,假如今天我們要從 courses 陣列中取出「JS」,並且把「JS」改成「JQuery」,寫法如下:

var courses = new Array("HTML", "CSS", "JS"); 
var course = courses[2]; // 取出第三個元素「JS」
courses[2] = "JQuery"; //將第三個元素名稱改成「JQuery」 
See the Pen JavaScript-Array1 by Tedutw (@Tedutw) on CodePen.

若當我們輸入的索引數字,已經超過了陣列元素數目減去「1」的數字時(例如上述例子的陣列中只有三個元素,但是你卻輸入了「3」或是比「3」還大的數字,則 JavaScript 會回傳「undefined」)。如以下所示:

var courses = new Array("HTML", "CSS", "JS");
document.write(courses[3])
                        
See the Pen JavaScript-Array2 by Tedutw (@Tedutw) on CodePen.

使用其他方式來建立陣列 Array

除了上述方式,我們還可以藉由先輸入陣列元素個數、之後再告知哪個序號對應到哪個元素的方式來建立陣列。

例如,我們把上述的 courses 陣列使用此方法來寫,則 JavaScript 原始碼如下:


var courses = new Array(3);
courses[0] = "HTML";
courses[1] = "CSS";
courses[2] = "JS";

JavaScript 的陣列是動態的,因此我們在上述例子中的第一行「var courses = new Array(3);」,也可以不給元素的數目,即為「var courses = new Array();」。此時,後面的元素就可自由增加如下:


var courses = new Array();
courses[0] = "HTML";
courses[1] = "CSS";
courses[2] = "JS";
courses[3] = "JQuery"

 

實務上常用:陣列實字 (Array literal)

以上介紹了JavaScript陣列的寫法。而為了提高前端工程師的執行速度,我們可以把以上的寫法,簡化成陣列實字 (Array literal)寫法,如下所示:


var courses = ["HTML", "CSS", "JS"]; 

這樣子的寫法,等同於「var courses = new Array("HTML", "CSS", "JS");」,差別是陣列實字的寫法,少了關鍵字「new Array」,並且把元素左右側的括號改成方形括號。此種簡化的寫法,最常被前端工程師所使用。

今天就介紹到這裡,在接下來「JavaScript入門教學#21」的文章中,我們將繼續介紹陣列的屬性、合併方法等。建議讀者們先消化一下陣列的寫法,再進入下一章學習陣列的活用,才會學得更輕而易舉。





延伸閱讀文章:

JavaScript初學者的入門天地!(21)陣列的方法與屬性

總整理:免費的java開發工具推薦!

JavaScript的變數命名竟然有規範?

JavaScript入門教學#18|創造JavaScript物件(Objects)

你是我的眼!Google AI 眼鏡助視障朋友「看見」世界

差點被拋棄的冠軍程式語言-Java入門教學(一) Java 身世之謎/寫出第一個Java程式

APCS 是什麼?所有 APCS 檢定的問題這篇都會回答你!


這個網誌中的熱門文章

前端工程師設定CSS背景的五種方法(一)背景固定模式設定

前端工程師設定CSS背景的五種方法(五)設定背景顏色

RWD和AWD是啥?差別又是什麼?前端工程師課程大解密!