Back
PQCHub

函式與模組化

學習函式與模組化，將程式碼封裝成獨立功能，並透過模組匯出與匯入，打造可重複使用的程式。

1 什麼是函式？

函式（Function）是將程式碼封裝成可重複使用的區塊，有點像「小型工具箱」，可以用來執行特定任務，並可以接收輸入（參數）和回傳輸出（回傳值）。

1.1 函式的好處

  1. 減少重複程式碼
  2. 提高程式可讀性
  3. 方便維護與測試

1.2 基本函式範例

// 宣告函式
function greet(name) {
    return "Hello, " + name + "!";
}

// 使用函式
let message = greet("Alice");
console.log(message);
  • 函式名稱：greet
  • 參數：name
  • 回傳值：字串 "Hello, Alice!"

1.3 小練習

  1. 寫一個函式 square，計算數字平方
  2. 呼叫 square(5) 並印出結果

2 ES6 模組化

模組化可以將程式拆分成多個檔案，方便管理與重複使用。

2.1 匯出函式（Export）

// 在 math.js
export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

2.2 匯入函式（Import）

// 在 main.js
import { add, multiply } from './math.js';

console.log(add(3, 5));       // 8
console.log(multiply(3, 5));  // 15

注意：使用 ES6 模組需要在 Node.js 執行環境或瀏覽器支援模組的環境下，檔案副檔名 .js 並在 package.json 設定 "type": "module"

2.3 小練習

  • 建立 math.js，撰寫 subtract 與 divide 函式
  • 在 main.js 匯入並使用

3 隨機抽籤程式基礎

抽籤程式可以使用 函式 與 Math.random() 來產生隨機結果。

3.1 範例程式

// 建立一個函式產生隨機抽籤
function drawLottery(names) {
    let index = Math.floor(Math.random() * names.length);
    return names[index];
}

// 使用函式
let students = ["Alice", "Bob", "Charlie", "David"];
let winner = drawLottery(students);

console.log("抽中:", winner);
  • Math.random() 產生 0~1 的隨機數 例如: 0.365
  • Math.floor() 取整數索位 （無調件捨去小數）
  • names.length 輸入的陣列長度
  • 函式 drawLottery 可以重複使用

3.2 小練習

  • 修改 students 陣列，加入至少 5 位學生
  • 呼叫 drawLottery 3 次，印出每次抽中的學生

3.3 本小時重點

  • 函式的宣告與使用
  • 函式參數與回傳值
  • ES6 模組匯出與匯入
  • 使用函式與 Math.random() 實作隨機抽籤

4 模組化拆分抽籤程式

4.1 將抽籤函式放入模組

建立 lottery.js，放入抽籤函式：

// lottery.js
export function drawLottery(names) {
    let index = Math.floor(Math.random() * names.length);
    return names[index];
}

4.2 匯入模組使用

建立 main.js，匯入並使用抽籤函式：

// main.js
import { drawLottery } from './lottery.js';

let students = ["Alice", "Bob", "Charlie", "David", "Emma"];
let winner1 = drawLottery(students);
let winner2 = drawLottery(students);

console.log("第一次抽中:", winner1);
console.log("第二次抽中:", winner2);
  • 可以重複呼叫函式，抽出不同結果
  • 模組化讓抽籤功能與其他程式碼分離，方便維護

4.3 小練習

  • 修改 students 陣列，加入至少 6 位學生
  • 呼叫 drawLottery 5 次，印出每次抽中的學生
  • 嘗試將函式放在不同檔案再匯入使用

5 函式進階練習

5.1 增加參數與功能

在抽籤函式中加入可選參數，控制抽籤次數：

// lottery.js
export function drawLottery(names, times = 1) {
    let winners = [];
    for (let i = 0; i < times; i++) {
        let index = Math.floor(Math.random() * names.length);
        winners.push(names[index]);
    }
    return winners;
}

5.2 使用範例

import { drawLottery } from './lottery.js';

let students = ["Alice", "Bob", "Charlie", "David", "Emma"];
let winners = drawLottery(students, 3);

console.log("三次抽中:", winners.join(", "));
  • 函式變得更靈活，可一次抽多位
  • 回傳值為陣列，可進一步操作或印出

5.3 小練習

  • 使用上述函式，抽出 4 次
  • 將結果印出，每次抽中的學生都用逗號隔開
  • 嘗試修改函式，讓同一位學生不能被重複抽中

6 綜合練習：完整抽籤程式

6.1 程式需求

目標：

  • 使用函式與模組化
  • 建立學生名單
  • 可指定抽籤次數
  • 將抽籤結果印出

6.2 模組化設計

建立 lottery.js：

// lottery.js
export function drawLottery(names, times = 1) {
    let winners = [];
    for (let i = 0; i < times; i++) {
        let index = Math.floor(Math.random() * names.length);
        winners.push(names[index]);
    }
    return winners;
}

注意：這裡仍然沒有使用條件判斷或迴圈進階控制（如避免重複抽中），僅用基本迴圈來累加結果。

6.3 主程式使用

建立 main.js：

// main.js
import { drawLottery } from './lottery.js';

let students = ["Alice", "Bob", "Charlie", "David", "Emma", "Frank", "Grace"];
let drawTimes = 3;

let winners = drawLottery(students, drawTimes);
console.log("抽籤結果:", winners.join(", "));

6.4 小練習題

  1. 修改學生名單，至少 7 位學生
  2. 設定抽籤次數為 5，印出結果
  3. 嘗試更改抽籤函式，讓同一位學生可能被抽中多次，或者不能

6.5 延伸練習（挑戰題）

  1. 建立一個函式 printWinners，專門負責印出抽籤結果
  2. 將 drawLottery 與 printWinners 拆成不同模組
  3. 在 main.js 中匯入兩個模組，完成抽籤與結果印出
SNPQ © 2025