資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學JavaScript 中定義函式的不同方法有哪些？
在本教程中，我們將學習在 JavaScript 中定義函式的不同方法。
在程式設計中，反覆編寫相同的程式碼不是一個好主意。它會增加程式碼長度，降低可讀性，並需要付出更多努力。程式語言中的函式是為了方便程式設計師而存在的。
函式就像一個容器，裡面包含某些程式程式碼行。僅僅定義函式並不會執行它。我們必須在程式中的某個地方呼叫它，才能執行它包含的程式碼。我們可以在程式中多次呼叫函式來多次執行相同的程式碼。在這裡，讓我們學習如何在 JavaScript 中定義函式。
因此，讓我們看看在 JavaScript 中定義函式的不同方法。
以下是 JavaScript 中定義函式的方法：
函式宣告
函式表示式
箭頭函式
使用函式宣告定義函式
函式宣告是 JavaScript 中定義函式最常見的方法。要宣告一個函式，我們必須使用 `function` 關鍵字，後跟函式名以及圓括號。之後，我們必須使用花括號，在其中新增函式的程式碼。
我們必須使用函式名和括號來執行函式。這將執行函式內部的程式碼。
使用者可以按照以下語法使用函式宣告來定義函式。
語法
//function declaration
function function_name(){
//Code inside function
}
//Calling a function
function_name();
請按照上述語法在 JavaScript 中宣告和呼叫函式。
示例
在下面的示例中，我們在按鈕上添加了一個 `onclick` 事件，並在 `onclick` 屬性中執行了一個函式。執行函式後，將顯示帶有某些樣式的文字。
<html> <head> <style> #para { margin: 5px; padding: 0px; font-family: cursive; font-size: 36px; background: linear-gradient(45deg, #f3ec78, #af4261); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> </head> <body> <h2> Using <i> Function declaration </i> to define a function in JavaScript </h2> <button onclick="func()"> Call a function </button> </body> <script> function func() { var element = document.createElement('p'); var text = document.createTextNode("The Function has been executed"); element.appendChild(text); element.id = "para"; document.body.appendChild(element); } </script> </html>
在上面的示例中，使用者可以看到我們透過單擊按鈕執行函式來顯示文字。
使用函式表示式定義函式
我們之前學習了函式宣告。函式表示式與宣告相同，但我們將函式儲存在變數中。我們將函式作為一個語句，並用函式初始化一個變數。
我們必須使用帶括號的變數名來執行函式。這將呼叫在變數內宣告的函式。
使用者可以按照以下語法使用函式表示式在 JavaScript 中定義函式。
語法
<script>
var variable = function func() {
//function will execute on hovering the cursor
}
variable();
</script>
請按照上述語法使用函式表示式在 JavaScript 中宣告和呼叫函式。
示例
在下面的示例中，我們添加了一個函式表示式，以便在單擊按鈕時執行函式。我們將從使用者那裡獲取兩個數字，並在單擊按鈕時顯示輸出。
<html> <body> <h2> Using <i> Function Expression </i> to define a function in JavaScript </h2> <label for="number1"> Number 1: </label> <input type="number" id="number1" /> <label for="number2"> Number 2: </label> <input type="number" id="number2" /> <button id="btn"> Add </button> <div id="div"> </div> </body> <script> const expression = function() { var number1 = document.getElementById("number1").value; var number2 = document.getElementById("number2").value; var add = parseInt(number1) + parseInt(number2); var element = document.createElement('p'); element.innerHTML = "Addition of two numbers: " + add; element.style.color = "red"; document.getElementById("div").appendChild(element); } document.getElementById("btn").addEventListener("click", expression); </script> </html>
在上面的示例中，使用者可以看到我們使用函式表示式定義的函式添加了兩個數字。
使用箭頭函式定義函式
箭頭函式的工作方式與函式表示式相同。但是，在這裡，我們可以省略語法中的 `function` 關鍵字。相反，我們必須在括號後新增等號和大於號。
此函式用於編寫更簡潔的函式定義程式碼。此函式通常用於括號內，例如在 `map` 語句中。
使用者可以按照以下語法使用箭頭函式在 JavaScript 中定義函式。
語法
<script>
var func= () => {
//The Code in the function
}
//call the function
func();
</script>
請按照上述語法使用箭頭函式在 JavaScript 中定義函式。
示例
在下面的示例中，我們使用輸入欄位從使用者那裡獲取字串輸入。單擊提交按鈕後，我們將執行箭頭函式。箭頭函式將字串轉換為陣列，然後再次使用 `map` 方法，我們將透過為每個元素附加文字來列印元素。
<html> <body> <h2> Using <i> Arrow function </i> to define a function in JavaScript </h2> <label for="string"> Add a String </label> <input type="text" id="string" /> <button id="btn"> Submit </button> <div id="div"> </div> </body> <script> const arrow = () => { var value = document.getElementById("string").value; var array = value.split(""); array.map((array_element) => { var element = document.createElement('p'); element.innerHTML = "Array Element: " + array_element; element.style.color = "red"; document.getElementById("div").appendChild(element); }) } document.getElementById("btn").addEventListener("click", arrow); </script> </html>
在上面的示例中，使用者可以看到我們使用了兩個箭頭函式。一個將在單擊按鈕後執行，另一個在 `map` 方法中。
在本教程中，我們學習了在 JavaScript 中定義函式的不同方法。
787 次瀏覽
