知識文章JavaScript 陣列

JavaScript 陣列

大量的使用連續名稱的變數情況下,其實可以改用陣列,陣列是程式中常常被使用的一種變數喔!

在練習程式的路上各位一定常常碰到需要存一連串資料的狀況,例如下面狀況,你必須要用 user_1、user_2、user_3 來記錄這三個人的成績,並且記算總成績!

var user_1 = 85, user_2 = 80, user_3 = 83;
  
var sum = user_1 + user_2 + user_3;
  
console.log (sum);

 

這樣的狀況下,其實會發現 user_1、user_2... 當有很多位的時候,那你豈不就要寫很多個!?所以陣列的誕生就很重要了!在 JavaScript 世界中陣列就是 用兩個中括號 代表,例如:[]、[1, 2, 3]、["abc", "hello", 123]... 等,而在 中括號內的東西稱為 “元素,元素可以是任何值(字串、數字..)。

 

依照剛才的例子,我們可以將原來變數改成陣列的方式如下,用一個變數存空陣列,所以可以改成 var users = [],代表說變數 users 是一個陣列型態(一般我們會用複數單字來當名稱),並且下面給予第 0、1、2 個 “元素” 值(陣列第一個會以 0 計算)。給予個別的元素內容值後,其實也試著可用 console 印看看 “陣列變數” 在 Console 下是長怎樣!

var users = [];
users[0] = 85;
users[1] = 80;
users[2] = 83;
console.log (users);
  
var sum = users[0] + users[1] + users[2];
console.log (sum);

 

不過範例中不知道各位是否有發現,還是有一點美中不足,因為每次都要計算用到第幾個元素,所以其實很麻煩,於是針對這個寫法,其實可以做改善的!

如下範例,只要是 “陣列變數” 的情況,都可使用陣列的函式,例如 .push,因為 users 是陣列變數,所以就有 users.push 可以使用,那 push 是什麼呢?push 就代表加入元素,每使用一次 push 就代表加入一個元素。

var users = [];
users.push (85);
users.push (80);
users.push (83);
console.log (users);
  
var sum = users[0] + users[1] + users[2];
console.log (sum);

 

哇!看起來好像很專業了!?

但是眼尖的各位應該還是有發現美中不足的地方,那就是 sum 還是要去計算 0 ~ 2 的元素還是很不方便,這時候就可以搭配迴圈” 使用了!

之前 介紹 的 for 迴圈,剛好可以派上用場,for 迴圈有三個參數位置要擺放,分別是 宣告、判斷、計算,所以如下範例就可以一開始宣告個 i 並且從 0 開始,每次都 + 1,然後跑三次,如此就可以取得每一個元素的內容值了。將一開始的 sum 設為 0,然後與每次的元素作加總,就會是總和了!

var users = [];
users.push (85);
users.push (80);
users.push (83);
console.log (users);
  
var sum = 0;
for (var i = 0; i < 3; i++) {
  sum = sum + users[i];
}
console.log (sum);

 

如果是有點經驗的工程師,一定又會提出疑問了,那我怎麼知道要跑三次!?沒錯,還記得我們 users 是 “陣列變數” 吧,所以有陣列函式可以用啊!要用什麼!? 答案就是 .length,也就是這樣寫 users.length,如此一來就可以知道此陣列有多少元素了!

 

如下例子只要把 i < 3 改成 i < users.length 就不用特別去知道 users 到底有多少個元素,因為 for 迴圈就會乖乖地跑完所有元素,到時候 users 有 n 個也可以順利的計算完畢!

var users = [];
users.push (85);
users.push (80);
users.push (83);
console.log (user);
  
var sum = 0;
for (var i = 0; i < users.length; i++) {
  sum = sum + users[i];
}
console.log (sum);

 

 

如果你想脫離初心者工程師,那你一定會對 “陣列變數” 到底有哪些函式可以用而感到好奇吧!那一樣用上面的例子講下去,其實可以只用陣列的函式就可以做完,如果你的功力夠,就繼續看下去吧!

 

其實啊,講得這麼多,基本上就藉由陣列的函式 .reduce 就可以完成了!所以就改成 users.reduce () 來處理即可!不過這邊要對函式有基本了解,關於函式之前也有介紹過囉!

var users = [];
users.push (85);
users.push (80);
users.push (83);
console.log (users);
  
var sum = users.reduce (function (a, b) {
  return a + b;
});
console.log (sum);

 

JavaScript 陣列函式其實有很多很多,尤其常用的 forEach、map 都可以去試試看!這邊也很多介紹 陣列函式,大家有空都可以自己去練習!

這次的 GitHub 範例在這裡,若是對文章內提到的 變數、迴圈、函式 不了解的,可以點閱這裡 JavaScript 變數JavaScript 迴圈JavaScript 函式

張貼者:吳政賢發佈。
瀏覽人數:32 人