数据结构
网络
关系数据库管理系统
操作系统
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 中定义函数的不同方法。
788 次查看
