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 函式。