# JavaScript 基礎：方法與函數  > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 課前測驗 [課前測驗](https://ff-quizzes.netlify.app) 重複撰寫相同的程式碼是程式設計中最常見的挫折之一。函數解決了這個問題，讓你可以將程式碼打包成可重複使用的模組。可以將函數想像成亨利·福特的裝配線革命性標準化零件——一旦你創建了一個可靠的元件，就可以在需要的地方使用它，而不需要重新從頭開始。 函數允許你將程式碼片段打包，讓你可以在整個程式中重複使用它們。與其在每個地方都複製和粘貼相同的邏輯，不如只需創建一次函數，然後在需要時調用它。這種方法可以讓你的程式碼更有條理，也更容易進行更新。 在這節課中，你將學習如何創建自己的函數，向它們傳遞信息，並獲得有用的結果。你將了解函數和方法的區別，學習現代語法方法，並了解函數如何與其他函數協同工作。我們將逐步構建這些概念。 [](https://youtube.com/watch?v=XgKsD6Zwvlc "方法與函數") > 🎥 點擊上方圖片觀看有關方法與函數的影片。 > 你可以在 [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon) 上學習這節課！ ## 函數 函數是一個自包含的程式碼模組，用於執行特定任務。它封裝了邏輯，讓你可以在需要時執行。 與其在程式中多次撰寫相同的程式碼，不如將它打包到一個函數中，然後在需要時調用該函數。這種方法可以讓你的程式碼更簡潔，也更容易進行更新。想像一下，如果你需要更改分散在程式碼庫中 20 個不同位置的邏輯，維護起來會有多麼困難。 為你的函數命名時，使用描述性名稱是非常重要的。一個命名清晰的函數可以清楚地傳達它的用途——當你看到 `cancelTimer()` 時，你會立刻明白它的作用，就像一個標有清晰標籤的按鈕能告訴你點擊它後會發生什麼。 ## 創建並調用函數 讓我們來看看如何創建一個函數。語法遵循一致的模式： ```javascript function nameOfFunction() { // function definition // function definition/body } ``` 讓我們分解一下： - `function` 關鍵字告訴 JavaScript "嘿，我正在創建一個函數！" - `nameOfFunction` 是你給函數起的描述性名稱 - 圓括號 `()` 是你可以添加參數的地方（我們稍後會講到） - 大括號 `{}` 包含了調用函數時實際執行的程式碼 讓我們創建一個簡單的問候函數來看看它的運作： ```javascript function displayGreeting() { console.log('Hello, world!'); } ``` 這個函數會在控制台中打印 "Hello, world!"。一旦你定義了它，就可以根據需要多次使用它。 要執行（或 "調用"）你的函數，請寫下它的名稱，然後加上圓括號。JavaScript 允許你在調用函數之前或之後定義它——JavaScript 引擎會處理執行順序。 ```javascript // calling our function displayGreeting(); ``` 當你運行這行程式碼時，它會執行 `displayGreeting` 函數中的所有程式碼，並在瀏覽器的控制台中顯示 "Hello, world!"。你可以多次調用這個函數。 > **注意：** 在這些課程中，你已經使用了 **方法**。例如，`console.log()` 是一個方法——本質上是一個屬於 `console` 物件的函數。主要的區別在於方法附屬於物件，而函數則是獨立的。在日常對話中，許多開發者會將這些術語互換使用。 ### 函數的最佳實踐 以下是一些幫助你撰寫出色函數的提示： - 為你的函數起清晰、描述性的名稱——你的未來的自己會感謝你！ - 對多個單詞的名稱使用 **駝峰命名法**（例如 `calculateTotal` 而不是 `calculate_total`） - 讓每個函數專注於做好一件事 ## 向函數傳遞信息 我們的 `displayGreeting` 函數有些局限——它只能為所有人顯示 "Hello, world!"。參數讓我們可以讓函數更靈活和有用。 **參數** 就像是佔位符，你可以在每次使用函數時插入不同的值。這樣，同一個函數可以在每次調用時處理不同的信息。 在定義函數時，你可以在圓括號中列出參數，並用逗號分隔多個參數： ```javascript function name(param, param2, param3) { } ``` 每個參數都像是一個佔位符——當有人調用你的函數時，他們會提供實際的值，這些值會插入到這些位置。 讓我們更新問候函數，使其可以接受某人的名字： ```javascript function displayGreeting(name) { const message = `Hello, ${name}!`; console.log(message); } ``` 注意我們使用了反引號（`` ` ``）和 `${}` 直接將名字插入到訊息中——這被稱為模板字面值，它是一種非常方便的方式來構建包含變數的字串。 現在當我們調用函數時，可以傳入任意名字： ```javascript displayGreeting('Christopher'); // displays "Hello, Christopher!" when run ``` JavaScript 會將字串 `'Christopher'` 賦值給 `name` 參數，並創建個性化訊息 "Hello, Christopher!" ## 預設值 如果我們希望某些參數是可選的呢？這時候預設值就派上用場了！ 假設我們希望人們能夠自定義問候語，但如果他們沒有指定，我們就使用 "Hello" 作為備選。你可以通過使用等號來設置預設值，就像設置變數一樣： ```javascript function displayGreeting(name, salutation='Hello') { console.log(`${salutation}, ${name}`); } ``` 在這裡，`name` 仍然是必需的，但 `salutation` 有一個備選值 `'Hello'`，如果沒有人提供其他問候語，它就會使用這個值。 現在我們可以用兩種不同的方式調用這個函數： ```javascript displayGreeting('Christopher'); // displays "Hello, Christopher" displayGreeting('Christopher', 'Hi'); // displays "Hi, Christopher" ``` 在第一次調用中，由於我們沒有指定問候語，JavaScript 使用了預設的 "Hello"。在第二次調用中，它使用了我們自定義的 "Hi"。這種靈活性使函數能夠適應不同的場景。 ## 返回值 到目前為止，我們的函數只是將訊息打印到控制台，但如果你希望函數計算某些東西並將結果返回給你呢？ 這就是 **返回值** 的作用。函數不僅可以顯示某些內容，還可以將一個值返回給你，讓你可以將它存儲在變數中或在程式碼的其他部分使用。 要返回一個值，你可以使用 `return` 關鍵字，後面跟著你想返回的內容： ```javascript return myVariable; ``` 有一件重要的事情：當函數遇到 `return` 語句時，它會立即停止運行，並將該值返回給調用它的地方。 讓我們修改問候函數，使其返回訊息而不是打印它： ```javascript function createGreetingMessage(name) { const message = `Hello, ${name}`; return message; } ``` 現在，這個函數不再打印問候語，而是創建訊息並將其返回給我們。 要使用返回的值，我們可以像使用其他值一樣將其存儲在變數中： ```javascript const greetingMessage = createGreetingMessage('Christopher'); ``` 現在 `greetingMessage` 包含 "Hello, Christopher"，我們可以在程式碼中的任何地方使用它——例如顯示在網頁上、包含在電子郵件中，或者傳遞給另一個函數。 ## 函數作為函數的參數 函數可以作為參數傳遞給其他函數。雖然這個概念一開始可能看起來很複雜，但它是一個強大的功能，可以實現靈活的程式設計模式。 這種模式在你想要表達 "當某件事發生時，執行另一件事" 時非常常見。例如，"當計時器結束時，運行這段程式碼" 或 "當使用者點擊按鈕時，調用這個函數"。 讓我們來看看 `setTimeout`，它是一個內建函數，可以等待一定的時間，然後運行一些程式碼。我們需要告訴它要運行什麼程式碼——這正是傳遞函數的完美用例！ 試試這段程式碼——3 秒後，你會看到一條訊息： ```javascript function displayDone() { console.log('3 seconds has elapsed'); } // timer value is in milliseconds setTimeout(displayDone, 3000); ``` 注意我們將 `displayDone`（不帶圓括號）傳遞給 `setTimeout`。我們並沒有自己調用函數——我們將它交給 `setTimeout`，並告訴它 "在 3 秒後調用這個函數"。 ### 匿名函數 有時候你只需要一個函數來完成某件事，並且不想給它命名。想想看——如果你只使用一次函數，為什麼要用一個額外的名字來讓程式碼變得更複雜呢？ JavaScript 允許你創建 **匿名函數**——沒有名字的函數，你可以在需要的地方直接定義它們。 以下是我們如何使用匿名函數重寫計時器範例： ```javascript setTimeout(function() { console.log('3 seconds has elapsed'); }, 3000); ``` 這實現了相同的結果，但函數直接在 `setTimeout` 調用中定義，省去了單獨的函數聲明。 ### 箭頭函數 現代 JavaScript 提供了一種更簡潔的函數撰寫方式，稱為 **箭頭函數**。它使用 `=>`（看起來像箭頭——明白了吧？），並且在開發者中非常流行。 箭頭函數讓你可以省略 `function` 關鍵字，撰寫更簡潔的程式碼。 以下是使用箭頭函數的計時器範例： ```javascript setTimeout(() => { console.log('3 seconds has elapsed'); }, 3000); ``` `()` 是參數的位置（此例中為空），然後是箭頭 `=>`，最後是大括號中的函數主體。這提供了相同的功能，但語法更簡潔。 ### 何時使用每種策略 什麼時候應該使用哪種方法？一個實用的指導原則是：如果你會多次使用該函數，請給它起一個名字並單獨定義。如果它只用於一個特定用途，可以考慮使用匿名函數。箭頭函數和傳統語法都是有效的選擇，雖然箭頭函數在現代 JavaScript 程式碼庫中更為流行。 --- ## 🚀 挑戰 你能用一句話說明函數和方法的區別嗎？試試看！ ## GitHub Copilot Agent 挑戰 🚀 使用 Agent 模式完成以下挑戰： **描述：** 創建一個數學函數的工具庫，展示本課中涵蓋的不同函數概念，包括參數、預設值、返回值和箭頭函數。 **提示：** 創建一個名為 `mathUtils.js` 的 JavaScript 文件，其中包含以下函數： 1. 一個名為 `add` 的函數，接受兩個參數並返回它們的和 2. 一個名為 `multiply` 的函數，具有預設參數值（第二個參數預設為 1） 3. 一個箭頭函數 `square`，接受一個數字並返回其平方 4. 一個名為 `calculate` 的函數，接受另一個函數作為參數以及兩個數字，然後將該函數應用於這些數字 5. 演示調用每個函數的適當測試案例 在這裡了解更多關於 [Agent 模式](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。 ## 課後測驗 [課後測驗](https://ff-quizzes.netlify.app) ## 回顧與自學 值得[多了解一下箭頭函數](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，因為它們在程式碼庫中越來越常用。練習撰寫一個函數，然後使用這種語法重寫它。 ## 作業 [有趣的函數](assignment.md) --- **免責聲明**： 本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。