Web-Dev-For-Beginners/translations/hk/2-js-basics/2-functions-methods

JavaScript 基礎：方法與函數

繪圖筆記由 Tomomi Imura 製作

journey
    title 你的 JavaScript 函式冒險
    section 基礎
      函式語法: 5: You
      呼叫函式: 4: You
      參數與引數: 5: You
    section 進階概念
      回傳值: 4: You
      預設參數: 5: You
      函式組合: 4: You
    section 現代 JavaScript
      箭頭函式: 5: You
      匿名函式: 4: You
      高階函式: 5: You

課前小測驗

課前小測驗

反覆撰寫相同程式碼是程式設計中最常見的挫折之一。函數解決此問題，讓你可以將程式碼封裝成可重複使用的區塊。你可以將函數視為讓亨利福特的組裝生產線變革性的標準化零件——一旦你建立了可靠的元件，就可以在需要的地方使用它，而無需重新從零開始構建。

函數允許你將程式碼片段打包，並在程式中多次重用。與其到處複製貼上相同邏輯，不如建立函數並在需要時呼叫。這種方法能保持程式碼整潔，也更容易做出更新。

在本課程中，你將學習如何創建自己的函數、將資訊傳遞給函數並取得有用的回傳結果。你將發現函數和方法的差異，學習現代語法用法，並了解函數如何與其他函數搭配使用。我們將一步步建立這些概念。

🎥 點擊上方圖片可以觀看關於方法與函數的教學影片。

你也可以在 Microsoft Learn 上參加這堂課！

mindmap
  root((JavaScript 函數))
    Basic Concepts
      Declaration
        傳統語法
        箭頭函數語法
      Calling
        使用括號
        需用括號
    Parameters
      Input Values
        多個參數
        預設值
      Arguments
        傳入值
        可為任意類型
    Return Values
      Output Data
        return 陳述式
        離開函數
      Use Results
        儲存於變數
        函數鏈結
    Advanced Patterns
      Higher-Order
        函數作為參數
        回調函數
      Anonymous
        不需名稱
        內聯定義

函數

函數是一段自包含的程式碼區塊，用來完成特定任務。它封裝你需要執行的邏輯，隨時可以執行。

與其在程式中重複書寫相同的程式碼，不如將它封裝成函數，並在需要時呼叫。此作法讓你的程式碼保持乾淨，也能更輕鬆維護。試想，如果你需要改變散佈於 20 個不同位置的邏輯，會有多困難。

為函數取有描述性的名稱非常重要。命名良好的函數能清楚傳達其目的——看到 cancelTimer() 就馬上知道它的功能，就像標示清楚的按鈕可以告訴你點擊後會發生什麼一樣。

建立與呼叫函數

讓我們看看如何建立函數。語法遵循固定的模式：

function nameOfFunction() { // 函數定義
 // 函數定義/函數體
}

拆解說明：

• function 關鍵字告訴 JavaScript「嘿，我正在創建一個函數！」
• nameOfFunction 是你為函數取的描述性名稱
• 括號 () 可放入參數（稍後會講）
• 花括號 {} 裡包含你在呼叫函數時要執行的程式碼

讓我們來寫個簡單的問候函數，看看範例：

function displayGreeting() {
  console.log('Hello, world!');
}

此函數將在控制台列印 "Hello, world!"。定義完成後，你可以重複多次呼叫它。

執行（或「呼叫」）函數的方法是寫函數名稱，加上括號。JavaScript 允許你在呼叫前或後定義函數——它的執行順序會自動處理。

// 呼叫我們的函數
displayGreeting();

執行此行程式碼，即會執行 displayGreeting 函數內所有程式碼，並在瀏覽器控制台顯示 "Hello, world!"。你可以多次呼叫此函數。

🧠 函數基礎檢測：建立你的第一個函數

讓我們檢查你對基礎函數的理解：

• 你能解釋為何在函數定義要使用花括號 {} 嗎？
• 如果寫 displayGreeting 而不加括號會怎樣？
• 為什麼有時候要多次呼叫同一個函數？

flowchart TD
    A["✏️ 定義函數"] --> B["📦 打包代碼"]
    B --> C["🏷️ 給它命名"]
    C --> D["📞 需要時呼叫"]
    D --> E["🔄 隨處重用"]
    
    F["💡 好處"] --> F1["無需重複編寫代碼"]
    F --> F2["容易維護"]
    F --> F3["結構清晰"]
    F --> F4["測試更簡單"]
    
    style A fill:#e3f2fd
    style E fill:#e8f5e8
    style F fill:#fff3e0

注意： 在這些課程中，你一直在使用 方法。console.log() 是一個方法——基本上是屬於 console 物件的函數。關鍵差異在於方法綁定於物件，而函數是獨立存在。許多開發者在日常對話中常互用這兩個詞。

函數最佳實踐

以下是寫出優秀函數的小技巧：

• 給函數取清晰且描述性名稱——未來的自己會感謝你！
• 使用 camelCase 命名多字函數（例如 calculateTotal，而非 calculate_total）
• 保持每個函數專注完成一件事

傳遞資訊給函數

我們剛剛的 displayGreeting 函數很有限——它只能對所有人顯示 "Hello, world!"。參數使函數變得更靈活有用。

參數 就像佔位符，每次使用函數時你可填入不同數值。如此一來，同一函數可針對不同資訊運作。

當你定義函數時，將參數列在括號中，多個參數用逗號分隔：

function name(param, param2, param3) {

}

每個參數就像佔位符，當呼叫函數時會提供實際值，填入這些位置。

讓我們改寫問候函數，接受一個名字參數：

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

注意我們使用反引號（`）和 ${} 直接將 name 插入訊息中——這種方式叫做模板字串，是建立帶有變數字串的好工具。

呼叫函數時，我們可以傳入任何名字：

displayGreeting('Christopher');
// 執行時顯示「Hello, Christopher!」

JavaScript 將字串 'Christopher' 指派給 name 參數，並建立個人化訊息 "Hello, Christopher!"

flowchart LR
    A["🎯 函數調用"] --> B["📥 參數"]
    B --> C["⚙️ 函數主體"]
    C --> D["📤 結果"]
    
    A1["displayGreeting('Alice')"] --> A
    B1["name = 'Alice'"] --> B
    C1["模板字串\n\`Hello, \${name}!\`"] --> C
    D1["'Hello, Alice!'"] --> D
    
    E["🔄 參數類型"] --> E1["字串"]
    E --> E2["數字"]
    E --> E3["布林值"]
    E --> E4["物件"]
    E --> E5["函數"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#f3e5f5

預設值

如果我們想讓參數可選怎麼辦？這時預設值非常有用！

假設我們想讓使用者能自訂問候語，但若沒指定，就使用 "Hello" 這個備用詞彙。你可用等號設定預設值，就像設定變數一樣：

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

這裡 name 仍是必填，salutation 如果沒給值則默認為 'Hello'。

現在我們可用兩種方式呼叫這個函數：

displayGreeting('Christopher');
// 顯示「Hello, Christopher」

displayGreeting('Christopher', 'Hi');
// 顯示「Hi, Christopher」

第一次呼叫未指定問候詞，JavaScript 使用預設的 "Hello"。第二次呼叫提供自訂的 "Hi"。這種彈性使函數適應不同場景。

🎛️ 參數掌握檢測：讓函數靈活運用

測試你對參數的理解：

• 參數與引數有什麼差異？
• 為什麼預設值在實務編程中很有用？
• 如果傳入比參數多的引數，會發生什麼？

stateDiagram-v2
    [*] --> NoParams: function greet() {}
    [*] --> WithParams: function greet(name) {}
    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
    
    NoParams --> Static: 輸出永遠相同
    WithParams --> Dynamic: 隨輸入改變
    WithDefaults --> Flexible: 可選擇性自訂
    
    Static --> [*]
    Dynamic --> [*]
    Flexible --> [*]
    
    note right of WithDefaults
        最靈活的方法
        向後相容
    end note

專家提示：預設參數讓函數更友善。使用者可以用合理預設值快速上手，仍可依需求自訂！

回傳值

到目前為止，我們的函數只在控制台輸出訊息，但如果你想讓函數計算結果並回傳呢？

這就是回傳值的用處。函數不只是輸出，也能把值回傳給呼叫它的程式，你可以存進變數或在其他地方使用。

回傳值用 return 關鍵字，後面接你想回傳的內容：

return myVariable;

重要一點：當函數執行到 return，會立刻停止並把該值送回呼叫者。

改寫問候函數，讓它回傳訊息而非直接列印：

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

現在函數不列印，只建立訊息並回傳。

使用回傳值，就像其他值一樣存入變數：

const greetingMessage = createGreetingMessage('Christopher');

greetingMessage 現在包含 "Hello, Christopher"，你可用它顯示在網頁、寄信，或者傳給其他函數。

flowchart TD
    A["🔧 函數處理"] --> B{"return 陳述式？"}
    B -->|是| C["📤 回傳值"]
    B -->|否| D["📭 回傳未定義"]
    
    C --> E["💾 存入變數"]
    C --> F["🔗 在運算式中使用"]
    C --> G["📞 傳給函數"]
    
    D --> H["⚠️ 通常無用"]
    
    I["📋 回傳值用途"] --> I1["計算結果"]
    I --> I2["驗證輸入"]
    I --> I3["轉換資料"]
    I --> I4["建立物件"]
    
    style C fill:#e8f5e8
    style D fill:#ffebee
    style I fill:#e3f2fd

🔄 回傳值檢測：取得結果

評估你對回傳值的理解：

• 函數執行到 return 後，後面的程式會怎樣？
• 為什麼回傳值比只列印控制台更好？
• 函數可以回傳不同型態的值（字串、數字、布林）嗎？

pie title "常見返回值類型"
    "字串" : 30
    "數字" : 25
    "物件" : 20
    "布林值" : 15
    "陣列" : 10

關鍵洞察：回傳值使函數更靈活，因為呼叫者決定如何使用結果。這讓程式更模組化、重複使用更方便！

函數作為參數傳入函數

函數可以當作參數傳給其他函數。雖然這聽起來複雜，但這是一個強大的特性，可實現靈活程式設計模式。

這種用法非常常見，當你想說「當某事發生，做[另一件事]」時。譬如「計時結束時，執行這段程式碼」或「使用者點按鈕時，呼叫此函數」。

看看 setTimeout，它是內建函數，會等待一段時間後執行程式碼。我們需要告訴它要執行什麼程式碼——這正是傳入函數的好例子！

試試看這段程式碼——3 秒後會看到訊息：

function displayDone() {
  console.log('3 seconds has elapsed');
}
// 計時器數值以毫秒為單位
setTimeout(displayDone, 3000);

注意我們傳入 displayDone（沒有括號）給 setTimeout。我們不是自己呼叫函數，而是把函數交給 setTimeout，告訴它：「3 秒後呼叫它。」

匿名函數

有時你只需要一個函數做一件事，不想特別命名。想想看——如果只用一次，為什麼要多個名稱搞亂程式碼？

JavaScript 允許你創建 匿名函數——沒有名字的函數，直接寫在需要它的地方。

下面是用匿名函數改寫計時例子：

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

效果相同，但函數直接定義在 setTimeout 裡，省掉了另写一個函數宣告。

箭頭函數

現代 JavaScript 有更精簡寫函數的方法，稱為 箭頭函數。符號是 =>（像個箭頭，你懂的），非常受開發者歡迎。

箭頭函數省略了 function 關鍵字，寫起來更簡潔。

這是我們計時例子改用箭頭函數寫法：

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

() 是放參數的地方（這例子是空的），接著是箭頭 =>，最後是用花括號包住的函數內容。兩者功能相同，但語法更簡潔。

flowchart LR
    A["📝 函數寫法"] --> B["傳統"]
    A --> C["箭頭函數"]
    A --> D["匿名函數"]
    
    B --> B1["function name() {}"]
    B --> B2["提升作用域"]
    B --> B3["有名字"]
    
    C --> C1["const name = () => {}"]
    C --> C2["簡潔語法"]
    C --> C3["現代風格"]
    
    D --> D1["function() {}"]
    D --> D2["無名稱"]
    D --> D3["一次性使用"]
    
    E["⏰ 什麼時候用"] --> E1["傳統：可重複使用函數"]
    E --> E2["箭頭函數：簡短回呼函數"]
    E --> E3["匿名函數：事件處理器"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

何時使用哪種寫法

什麼時候該用哪種方法呢？實用指南是：若需多次使用函數，給它命名並獨立定義；若只用一次，可考慮匿名函數。箭頭函數和傳統語法都是可行選擇，但箭頭函數已成現代 JavaScript 代碼庫的主流。

🎨 函數風格掌握檢測：挑選適合語法

測試你的語法理解：

• 何時你會偏好箭頭函數而非傳統函數語法？
• 匿名函數的主要優勢是什麼？
• 你能想出命名函數比匿名函數更好的情境嗎？

quadrantChart
    title 函數選擇決策矩陣
    x-axis 簡單 --> 複雜
    y-axis 一次性使用 --> 可重用
    quadrant-1 箭頭函數
    quadrant-2 有名函數
    quadrant-3 匿名函數
    quadrant-4 傳統函數
    
    Event Handlers: [0.3, 0.2]
    Utility Functions: [0.7, 0.8]
    Callbacks: [0.2, 0.3]
    Class Methods: [0.8, 0.7]
    Mathematical Operations: [0.4, 0.6]

現代趨勢：箭頭函數因為語法簡潔，逐漸成為許多開發者的首選，但傳統函數依然有其存在價值！

---

🚀 挑戰

你能用一句話說明函數與方法的差異嗎？試試看！

GitHub Copilot Agent 挑戰 🚀

使用 Agent 模式完成以下挑戰：

說明： 建立一個數學函數的工具庫，示範本課涵蓋的不同函數概念，包括參數、預設值、回傳值與箭頭函數。

提示： 建立一個名為 mathUtils.js 的 JavaScript 檔案，包含以下函數：

1. 一個函數 add，接收兩個參數並回傳它們的和
2. 一個帶有預設參數值的 multiply 函數（第二個參數預設為 1）
3. 一個箭頭函數 square，接收一個數字並回傳其平方
4. 一個函數 calculate，接收另一個函數參數與兩個數字，將函數套用到兩數字上
5. 展示呼叫每個函數的適當測試案例

在此處了解更多有關 agent 模式 。

課後小測驗

課後小測驗

複習與自學

值得多讀一些關於箭頭函數，因為它們越來越多於程式碼中使用。練習編寫一個函數，然後用這語法重寫。

作業

Fun with Functions

---

🧰 你的 JavaScript 函數工具箱總結

graph TD
    A["🎯 JavaScript 函式"] --> B["📋 函式宣告"]
    A --> C["📥 參數"]
    A --> D["📤 回傳值"]
    A --> E["🎨 現代語法"]
    
    B --> B1["function name() {}"]
    B --> B2["具描述性的命名"]
    B --> B3["可重用的程式區塊"]
    
    C --> C1["輸入資料"]
    C --> C2["預設值"]
    C --> C3["多重參數"]
    
    D --> D1["return 陳述句"]
    D --> D2["結束函式"]
    D --> D3["傳回資料"]
    
    E --> E1["箭頭函式: () =>"]
    E --> E2["匿名函式"]
    E --> E3["高階函式"]
    
    F["⚡ 主要優點"] --> F1["程式碼重用"]
    F --> F2["更佳的組織"]
    F --> F3["更容易測試"]
    F --> F4["模組化設計"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

---

🚀 你的 JavaScript 函數掌握時間軸

⚡ 接下來 5 分鐘你可以做到

• 寫一個簡單函數回傳你最喜歡的數字
• 建立一個有兩個參數回傳相加結果的函數
• 嘗試將傳統函數轉換為箭頭函數語法
• 練習挑戰：解釋函數與方法的不同

🎯 你今小時可以完成的事

• 完成課後小測驗並複習任何令人困惑的概念
• 建立 GitHub Copilot 挑戰中的數學公用程式庫
• 創建一個使用另一個函數作為參數的函數
• 練習撰寫帶有預設參數的函數
• 嘗試函數回傳值中使用模板字串

📅 你為期一週的函數精通計劃

• 以創意完成「Fun with Functions」作業
• 將一些你已有的重複程式碼重構成可重用函數
• 僅使用函數(不使用全局變數)建置一個簡易計算器
• 練習使用箭頭函數搭配陣列方法如 map() 和 filter()
• 建立一組用於常見任務的工具函數集合
• 研習高階函數與函數式程式設計觀念

🌟 你為期一個月的轉變規劃

• 精通進階函數概念如閉包與作用域
• 建立一個嚴重使用函數組合的專案
• 透過改進函數文件來貢獻開源
• 教導他人函數與不同語法風格
• 探索 JavaScript 的函數式程式設計範式
• 建立一個個人可重用函數庫以用於未來專案

🏆 最終函數冠軍檢閱

慶祝你對函數的精通：

• 到目前為止，哪個函數是你創建得最有用的？
• 學習函數如何改變你對程式碼組織的想法？
• 你偏好哪種函數語法？為什麼？
• 你會寫函數解決什麼真實世界的問題？

journey
    title 你的函數信心演變
    section 今日
      對語法感到困惑: 3: You
      理解基礎: 4: You
      編寫簡單函數: 5: You
    section 本週
      使用參數: 4: You
      返回值: 5: You
      現代語法: 5: You
    section 下個月
      函數合成: 5: You
      進階模式: 5: You
      教導他人: 5: You

🎉 你已經精通了程式設計中最強大的概念之一！ 函數是大型程式的基礎組件。你將會建立的每個應用程式都會使用函數來組織、重用和架構程式碼。你現在了解如何將邏輯包裝成可重用的組件，讓你成為更有效率和更具生產力的程式設計師。歡迎來到模組化程式設計的世界！ 🚀

---

免責聲明： 本文件由 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們致力於確保翻譯的準確性，但請注意自動翻譯可能存在錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或誤譯概不負責。