如果你想要在網頁中實現互動的效果,那么JavaScript就是必不可少的一部分。其中一個重要的概念就是函數(Function)。
函數其實就相當于一個小程序,它可以接受輸入參數,進行特定的操作,然后返回一個結果。使用函數可以讓你的代碼更加模塊化和可復用。
下面是一個簡單的例子,使用函數實現加法操作:
function add(num1, num2) { return num1 + num2; } console.log(add(2, 3)); // 輸出 5
這個函數名為“add”,擁有兩個參數(num1 和 num2),表示將這兩個數字相加。函數使用“return”關鍵詞返回這個結果。
在 HTML 文檔中,你可以使用<script>
標簽來調用這個函數:
<!DOCTYPE html> <html> <head> <title>加法運算</title> </head> <body> <p>2 + 3 = <script>document.write(add(2, 3));</script></p> </body> </html>
上面的代碼將會輸出“2 + 3 = 5”。
除了可以將函數的結果返回給調用者,我們還可以在函數內執行其他的操作。下面是一個例子,該函數用于計算年齡:
function calculateAge(yearOfBirth) { var age = new Date().getFullYear() - yearOfBirth; console.log("你現在 " + age + " 歲。"); } calculateAge(1990); // 輸出 "你現在 31 歲。"
這個函數只有一個參數 - 出生年份。函數內通過 JavaScript 的 Date 對象得到當前年份,并將其減去出生年份得出年齡。隨后將字符串與變量拼接輸出到控制臺。
如果函數需要該執行特定的操作,但并不需要返回結果,你可以使用void
關鍵字來聲明該函數。下面是一個例子:
function greet(name) { console.log("你好," + name + "!"); } void greet("張三"); // 輸出 "你好,張三!"
該函數只是簡單地在控制臺輸出問候語,而沒有返回任何結果。
最后,JavaScript 還支持匿名函數。匿名函數就是沒有名字的函數,它可以直接傳遞給其他函數或變量,并在內部執行完畢后自動銷毀。下面是一個例子,演示如何通過匿名函數對數組進行排序:
var numbers = [2, 4, 1, 3, 5]; numbers.sort(function(a, b) { return b - a; }); console.log(numbers); // 輸出 [5, 4, 3, 2, 1]
上面的代碼中,我們定義了一個名為“numbers”的數組,其中包含了 5 個整數。調用sort
函數并傳遞了匿名函數作為參數,這個匿名函數用于比較數組中的兩個元素并按從大到小的順序排序。最終輸出了排序后的數組。
總的來說,JavaScript 函數是非常靈活和強大的工具,它可以幫助你使代碼更加模塊化、易讀和可維護。如果你現在還不熟練掌握函數的使用方法,那么我建議多做些練習,因為函數是成為一名優秀的前端工程師所必須要掌握的核心技能之一。