###### tags: `前端技能樹`

# 初探Javascript基本功能 — 函式、迴圈 / 陣列、物件

在前一篇，我們提到了一些 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;
  });

  student.average = total / student.score.length;
}

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

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

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

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

### 參考資料
- [MDN - Javascript](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript)