在昨天的文章中，我們學會了如何使用條件判斷與迴圈來控制程式的走向，但隨著我們寫的程式碼越來越多，你會發現有些功能必須一直重複寫，例如：在好幾個地方都要計算商品的折扣金額，難道每次都要複製貼上那五六行程式碼嗎。

假設，如果我們有一百件商品的名字要記錄，難道要宣告一百個變數（如 item1、item2...）嗎？

為了解決這兩個實務上的大麻煩，今天我們要學習JavaScript裡非常實用的兩個核心工具：函式（Function） 與 陣列（Array）。

什麼是 函式 (Function)

簡單來說，函式就是「幫一段程式碼綁上名字，包裝成一個指令」。

當你發現某段計算或操作會被重複使用時，就把它包進函式裡，以後只要呼叫這個函式的名字，它就會自動執行裡面整整齊齊的程式碼，不需要再重複重寫。

函式的標準結構

定義一個函式需要三個基本要素：

1. 名稱：這個功能叫什麼名字（例如：calculateReset）。
2. 參數（輸入）：執行這個功能需要傳入什麼資料？寫在小括號() 裡。
3. 回傳值（輸出）：執行完畢後，要吐出什麼結果？使用關鍵字 return。

什麼是陣列(Array)？

簡單來說，陣列就是「一個可以同時塞進很多資料的清單清冊」。

以前一個變數只能放一個值（例如const name = "小明";），而陣列可以用一組中括號 [ ]，把一大堆資料整齊地排列在一起，並用逗號隔開。

陣列的核心規則：索引值 (Index)

陣列裡的每一筆資料都有一個專屬的位置編號，稱為索引值（Index）。
請注意：程式的編號是從0開始計算的！

• 第一筆資料的位置是 [0]
• 第二筆資料的位置是 [1]
• 第三筆資料的位置是 [2]，以此類推。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day24 函式與陣列基礎應用</title>
</head>
<body>
    <h1 style="text-align: center;">請打開 Console 觀看函式與陣列的運作</h1>
    <script>
        // 1. 陣列的基礎操作
        console.log("陣列基礎");
        
        // 建立一個包含三個數字的價格陣列
        const prices =[1000,2500,3000];

        // 讀取陣列裡特定位置的資料 (記得編號從0開始)
        console.log("第一件商品的原始價格："+prices[0]+"元"); //印出1000
        console.log("第二件商品的原始價格："+prices[1]+"元"); //印出2500

        // 檢查這個陣列裡面總共有幾筆資料 (使用 .length 屬性)
        console.log("購物車總共有幾件商品："+prices.length+"件"); //印出3

        // 2. 函式的定義與呼叫
        console.log("函式應用");

        // 定義一個名為giveDiscount的函式
        // 它需要接收兩個參數：原始價格(price)與折扣比例(rate)
        function giveDiscount(price, rate) {
            const finalPrice=price*rate;
            return finalPrice; //把計算好的最終價格吐出去
        }

        // 呼叫函式並使用它：我們把陣列裡的第一個價格(1000)拿來打8折 (0.8)
        const result1 = giveDiscount(prices[0], 0.8);
        console.log("第一件商品打折後是：" + result1 + "元"); // 印出800

        // 我們也可以把陣列裡的第二個價格(2500)拿來打9折(0.9)
        const result2 = giveDiscount(prices[1],0.9);
        console.log("第二件商品打折後是："+result2+"元"); // 印出2250
    </script>
</body>
</html>

(可以自行調整參數或是增加第三個商品的輸出)

介紹

將這段程式碼在瀏覽器中運行並打開控制台（Console），你會清晰地看到以下執行結果：

• 陣列的讀取：我們透過prices[0]成功抓到了清單中的第一個數字1000，透過prices.length，瀏覽器自動數出清單內共有3筆資料，讓我們不需要手動去數。
• 函式的威力：我們只寫了一次function giveDiscount的計算邏輯，但後續我們只要更換括號內的數字（例如第一次帶入1000和0.8，第二次帶入 2500和 0.9），它就能反覆幫我們算出完全不同的正確結果。程式碼變得非常乾淨，不需要寫重複的數學公式了。

總結

今天我們成功解鎖了JavaScript裡精簡程式碼與管理海量資料的兩大武器：

• 陣列：幫我們把一整批相關的資料儲存在同一個清單變數裡，並透過從0開始的編號隨時讀取。
• 函式：幫我們把重複使用的邏輯指令打包，傳入資料就能得到對應的結果。

有了陣列和函式，我們已經能處理大量的條列式資料了，但如果是更複雜、有具體特徵的資料（例如：一件商品同時有名字、有價格、有庫存量），那要怎麼做？

明天（Day 25），我們將跨入JavaScript用來描述複雜現實資料的最後武器：物件（Object），去看看如何用一組大括號，把各種不同特徵完美綁定在一起，明天見。