数据结构
网络
关系数据库管理系统 (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 次浏览
