iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Modern Web

JavaScript 從零開始系列 第 14

JavaScript 從零開始 - Day14 - Array 陣列 的基本認識

  • 分享至 

  • xImage
  •  

JavaScript Note

進入一個新的名稱,陣列 (Array) 與物件 (Object),看到新名稱就心慌慌,但搞清楚後就有點豁然開朗,來記錄目前所學的這兩個新語法。

Array 陣列

Array 原本的英文意思是數列,有興趣的可以去查字典或是 Google 看看。透過英文原本的意思,再回到程式來看,會比較知道為什麼要取這樣的名字,其實沿用原本英文的意義,這樣就會好懂些!

陣列內可以是原始的資料類型其他陣列函式等等。 要注意的是,陣列是個有順序性的集合,且只能透過 [] 來存取。

一切從變數開始

JavaScript 的世界,是從變數開始,然後用 console.log 做驗證。所以在陣列的觀念中也是從變數延伸,但如果變數很多的時候,不可能把所有的變數都一股腦丟給對方,這樣收到一堆變數會很崩潰。所以陣列的出現就是將相同的變數集合成一個數列,於是陣列就這樣出現了,透過英文的意思來聯想會比較好記!。


複習一下變數的寫法是,用 「var」 宣告變數,自定義「變數名稱」,給予變數的「值」,如下所示:

var man = "menName";

但工作上不可能只有一排變數,如果以家庭為例:

var father = "Tom";
var mother = "Mary";
var son = "John";
var daughter = "Linda";

如上就有四個變數,但如果變數項目增加,但內容不同該怎麼辦? 像是有 4 張椅子,有紅色,有藍色,就會變下方這樣:

var father = "Tom";
var mother = "Mary";
var son = "John";
var daughter = "Linda";
var chair = 4;
var chair1 = "red";
var chair2 = "blue";

這樣程式碼就變多了,如果要套很多資料,也不好撰寫,可能要寫好幾次,這時候就需要陣列。


陣列的寫法

一樣是用變數宣告,自定義陣列名稱,但陣列要用中括號 [] 呈現,結束要用分號 ; 收尾,寫法如下:

var array = ["a"];

所以椅子有四張,有紅色,有藍色可以這樣寫成陣列,有相同的名稱,有不同的參數,要用逗號 , 分開,呈現如下:

var chair =["red" , "blue"];


陣列的排序

一般排序的邏輯會從 1 開始,但陣列的世界是從 0 開始,所以今天如果家裡有四個地方要增加桌子,就要增加四個變數,但這樣太多行了,如果使用陣列,並且知道哪個房間有幾張桌子,可以這樣寫,目前實務上也比較常見這樣的寫法,要抓取陣列資料會這樣寫:

var desk = [4, 1, 2, 3];
console.log(desk[0]); // 因為排序第一是 4,所以結果會出現 4

以此類推,如果在 console 裡面的中括號,寫其他順序,會出現相對應的結果。

也可以這樣寫:

var desk = [4, 1, 2, 3];
var desk1 = desk[0];
console.log(desk1); // 結果會出現 4

length 長度

要查陣列的資料長度可以使用 length 這個語法,英文原意也是長度的意思。

var desk = [4, 1, 2, 3];
var desk1 = desk[0];
console.log(desk[0]); // 結果會出現 4

console.log(desk.length); //結果會出現 4,代表有陣列的長度有四個

.push 增加陣列的語法

若想要在陣列外新增元素時,可以透過 number.push() 這個語法增加,透過 . 代表要增加後面的屬性

var number = [1, 2, 3];
number.length; // 會顯示 3,指有三個陣列資料

number.push(4);
console.log(number); // [1, 2, 3, 4] 新增第四個陣列資料

.splice 刪除陣列語法

有增加就有刪除,可以透過 number.splice(起始位置,資料數量) 這個語法刪除:

var number = [1, 2, 3];
number.length; // 會顯示 3,指有三個陣列資料

number.splice(0, 2); //從第一筆資料刪除,刪除兩筆資料
number; // [3]

參考資料 https://ithelp.ithome.com.tw/articles/10190962


上一篇
JavaScript 從零開始 - Day13 - 利用函式 function 寫一個計算題
下一篇
JavaScript 從零開始 - Day15 - Object 物件的基本認識
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
leonpj
iT邦新手 5 級 ‧ 2020-09-16 02:15:45

版主您好~
陣列的排序中的
var desk = [4, 1, 2, 3];
var desk1 = desk[0];
console.log(desk[0]); // 結果會出現 4
是否應該改成
var desk = [4, 1, 2, 3];
var desk1 = desk[0];
console.log(desk1); // 結果會出現 4

Tim Hsu iT邦新手 1 級 ‧ 2020-09-16 10:22:40 檢舉

感謝回覆,我重新在開發人員工具試過後,結果是 4 喔~

0
leonpj
iT邦新手 5 級 ‧ 2020-09-16 14:09:30

https://ithelp.ithome.com.tw/upload/images/20200916/201069850IT8V1RDSD.jpg

那請問var desk1 = desk[0];為什麼要這樣寫~~

Tim Hsu iT邦新手 1 級 ‧ 2020-09-16 16:25:35 檢舉

喔喔~我看懂你意思了,我以為是說結果,是寫法寫錯了,應該是要取得 desk1 才對,感謝提醒

leonpj iT邦新手 5 級 ‧ 2020-09-16 16:44:59 檢舉

length 長度
這段也有一個喔~

我要留言

立即登入留言