Day 6:把程式打包:函式與陣列

寫程式久了你會發現,很多動作其實一直在重複用。今天要學兩個超級好用的工具,讓程式碼變乾淨、變好管理。這是 13 天轉職甄試衝刺大綱的 Day 6。

📅 前言:把常做的事打包起來

如果每次要「算稅後金額」都要重新寫一次公式,程式碼會又臭又長。更好的做法是:把這個動作「打包」成一台機器,以後要用的時候直接丟資料進去就好——這就是函式。而如果要處理「一整排」資料,例如全班的成績,我們會需要陣列。

⏳ 第 1～15 分鐘:函式(Function)是什麼?

💡 生活比喻: 函式就像一台果汁機。你丟水果進去(參數),它經過處理,吐出果汁(回傳值)。你不需要知道果汁機裡面刀片怎麼轉,只需要知道「丟什麼進去、會拿到什麼」。

function getJuice(fruit) {
  return fruit + " 果汁";
}

console.log(getJuice("蘋果")); // 蘋果 果汁
console.log(getJuice("芭樂")); // 芭樂 果汁

• 參數(fruit): 丟進函式的原料。
• 回傳值(return 後面的東西): 函式做完事情後,交還給你的結果。

⚠️ 常見考點:參數 vs 回傳值。 有些函式只做事、不回傳任何東西(例如 console.log 本身只是把字印出來,沒有 return);有些函式做完事情後,一定要用 return 把結果交出去,呼叫的人才能拿到這個結果繼續使用。

⏳ 第 16～23 分鐘:陣列(Array)是什麼?

💡 生活比喻: 陣列就像一整排排好隊、有編號的置物櫃。第一個櫃子的編號不是 1,而是 0(這是新手最容易搞混的地方)。

let fruits = ["蘋果", "香蕉", "芭樂"];

console.log(fruits[0]); // 蘋果(第一個)
console.log(fruits[1]); // 香蕉(第二個)
console.log(fruits.length); // 3(總共有幾個)

⏳ 第 24～30 分鐘:走訪陣列(把每個元素拿出來處理)

最常見的用法,是搭配昨天學的迴圈,把陣列裡「每一個」元素都拿出來做事情:

let fruits = ["蘋果", "香蕉", "芭樂"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i] + " 果汁");
}
// 依序印出:蘋果 果汁 / 香蕉 果汁 / 芭樂 果汁

💡 為什麼條件是 i < fruits.length 不是 i <= fruits.length? 因為陣列從 0 開始編號,3 個元素的索引是 0、1、2,最大索引永遠是「長度 - 1」。如果寫成 <=,最後一次會去存取一個不存在的位置,程式會出錯或得到 undefined。

🎯 目標

• 能解釋函式的參數與回傳值差別
• 能讀懂並手寫走訪陣列的迴圈,不搞混索引從 0 開始這件事

📝 重點筆記

• 函式 = 打包好的動作,丟參數進去、可能會回傳結果出來
• 陣列的索引從 0 開始,最後一個元素的索引是 長度 - 1
• 走訪陣列的標準寫法:for (let i = 0; i < arr.length; i++)

✍️ 小練習

1. 寫一個函式 double(n),回傳 n 的兩倍
2. 有一個陣列 let nums = [3, 7, 2, 9],用迴圈把每個數字都印出來
3. 承上題,寫一個迴圈把 nums 裡所有數字加總起來