在前一篇，我們提到了一些 Javascript 的語法和基本功能，包括宣告變數、資料型別、條件陳述式，接下來就繼續來了解迴圈、函式、物件、陣列的觀念和用法。

流程控制 — 迴圈

有時候希望可以自動重複執行某些動作，JavaScript 提供了各式各樣的迴圈機制，讓我們能夠用不同的方法來執行重複動作，比如 for、while、do...while ...等。

以 for 來說明，一個 for 陳述式通常會長成下面這個樣子：

for (let i = 0; i < 10; i++){
//執行任務
}

分別講解一下 for 的結構和作用流程，當迴圈開始執行的時候：

• Step1：執行初始表達式 let i = 0，這個變數 i 通常會作為迴圈計數器，用來控制迴圈的重複執行。
• Step2：判斷條件式 i < 10，如果結果為 true，則會繼續第三步驟執行任務；如果結果為 false，迴圈就會終止。
• Step3：執行區塊內指定的重複動作
• Step4：更新迴圈計數器 i++，讓變數 i 加一以便執行下一次的動作，接下來迴圈就會重複第二步驟~第四步驟，直到判斷條件式的結果為 false 才終止迴圈。

舉例來說，要自動將數值 k 從零開始，每次加二重複十次：

let k = 0;
for (let i = 0; i < 10; i++){
    k = k + 2;
}

console.log(k)    //20

函式(Function)

函式(Function) 是用於執行某個任務的程式碼區塊，可以選擇性的定義傳入的參數（數據），讓程式碼模組化易於維護和修改。舉例來說，一個基本的函式會長成這樣：

function test(num) {
  let result = num * 20;
  return result;
}

• 函式名稱 - test
• 參數 - num
• 函式執行的任務 - {...}：可用 return 在函式執行後回傳數值

箭頭函式(Arrow Function)

除了透過關鍵字 function 定義函式，還有另一種建立函式的方法 — 箭頭函式(Arrow Function)：

let test = (num) => {
  let result = num * 20;
  return num * 20;
}

呼叫函式執行

定義出函式的參數和執行的任務後，就可以透過呼叫函式函式名稱()來執行任務，如果有回傳值會儲存到所指定的變數中。

let answer = test(5);    //100

物件(Object)

在Javascript裡，物件(Object) 擁有與自身相關的資料，包含屬性(properties) 或函式(methods)，可以看做是資料模型，方便我們去建立、存取物件的數據。

宣告物件

物件的內容會由大括號 {} 包住；屬性可以當作是用在物件內部的變數，只是在宣告物件時要用冒號 : 賦予其值。舉例來說，一個物件可能會長成這樣：

let obj = {
    name: "May",
    score: 80,
    introduction: function () {
        console.log("I'm a student")
    }
};

取得物件屬性

取得物件屬性的方法，可以在物件名稱後使用點符號 . 或是 ['屬性名稱'] 來存取；函式的話記得要加上小括號 () 來呼叫；而要修改物件屬性的值就會跟一般變數的用法一樣，用等於 = 修改值：

obj.property_1 = "Bob";

obj.name                //'Bob'
obj['score']            //80
obj.introduction()      //"I'm a student"

陣列(Array)

陣列(Array)是一種似列表(list-like)的物件，可以將資料儲存形成一連串的數組，沒有固定的長度或是型別限制。

let fruits = ["apple", "banana", "orange"];

取得陣列元素

取得陣列中某個數值的方法，可以在陣列名稱後使用 [索引值] 來存取，而所有陣列的元素索引值都是從 0 開始；若是要修改陣列元素的值也是用等於 = 來修改：

fruits[0] = 'watermelon'

fruits[0]    //"watermelon"
fruits[1]    //"banana"
fruits[2]    //"orange"

陣列方法

因為陣列是一種物件，本身原型(Prototype)擁有各種預設的方法(Methods)，可以用來針對陣列執行一些操作，比如新增刪除元素的 push / pop、遍歷陣列內每個元素的 forEach / map...等等。

• push：加入新的項目至陣列末端

  fruits.push('peach')
  // ["watermelon", "banana", "orange", "peach"]
  

• pop：移除陣列末端項目

  fruits.pop()
  // ["watermelon", "banana", "orange"]
  

• forEach：遍歷陣陣列內的每個元素，傳入指定的函式並執行。

  fruits.forEach(function(item, index) {
    console.log(item, index);
  });
  
  // "watermelon" 0
  // "banana" 1
  // "orange" 2
  

• map：遍歷陣陣列內的每個元素，依據經由函式運算後所回傳的結果，建立一個新的陣列。

  const newArray = fruits.map((item,index) => item + index );
  
  console.log(newArray);
  // ["watermelon0","banana1","orange2"]
  

小結

跟上一篇一樣直接利用一個小範例來當作結尾，複習今天提到的一些觀念。現在想要計算幾個學生的平均成績，我們將所有資料儲存在一個物件中，分別有每個學生的姓名、三項成績：

let data = [
  { name: "May", score: [90, 80, 40]},
  { name: "Bob", score: [77, 88, 66]},
];

接著定義函式，要根據傳入的學生資料，將所有成績加總，計算出平均成績儲存到物件當中：

function Average(student) {
  let total = 0;
  student.score.forEach((item) => {
    total += item;
  });

  return total / student.score.length;
}

最後使用 Array.forEach，呼叫函式計算每個學生的平均成績，並且印出結果，這樣就完成了今天的內容囉！

data.forEach((item) => {
  item.average = Average(item);
  console.log(`${item.name}的平均成績是${item.average}`);
});

// "May的平均成績是70"
// "Bob的平均成績是77"

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

參考資料

• MDN - Javascript