介绍
函数是由程序员定义的自定义代码,可重复使用,因此可以使您的程序更加模块化和高效。
在本教程中,我们将学习如何定义函数、调用函数和使用JavaScript中的函数参数。
定义一个函数
函数是用函数的关键字定义或声明的,下面是JavaScript中的函数语法。
1function nameOfFunction() {
2 // Code to be executed
3}
声明以`函数 ' 关键词起首,然后是函数的名称。 函数名称遵循与变量相同的规则——它们可以包含字母,数字,下划线和美元符号,并且经常被写入[骆驼案 (https://andsky.com/tech/tutorials/understanding-syntax-and-code-structure-in-javascript# identifiers). 名称后有一组括号,可用于可选参数. 该函数的代码被收录在卷曲的括号中,就像用于语句或if语句一样.
在我们的第一个示例中,我们将创建一个 功能声明 ,以打印向控制台的问候声明。
1// Initialize greeting function
2function greet() {
3 console.log("Hello, World!");
4}
在这里,我们可以将代码打印到包含在greet()函数内部的控制台中,即Hello, World! 但是,不会发生任何事情,不会执行任何代码,直到我们 invoke ,或调用函数。
1// Invoke the function
2greet();
现在我们将把它们放在一起,定义我们的功能并召唤它。
1[label greet.js]
2// Initialize greeting function
3function greet() {
4 console.log("Hello, World!");
5}
6
7// Invoke the function
8greet();
随着问候();的呼叫,该函数将运行,我们将收到问候,世界!作为程序的输出。
1[secondary_label Output]
2Hello, World!
现在我们有一个函数中包含的greet()代码,我们可以随心所欲重复使用它。
使用参数,我们可以使代码更加动态。
函数参数
在我们的greet.js文件中,我们创建了一个基本的函数,将Hello, World打印到控制台上. 使用参数,我们可以添加额外的功能,使代码更加灵活。
当用户登录到一个应用程序时,我们可能希望该程序以名字来问候他们,而不是简单地说你好,世界!
我们将在我们的函数中添加一个参数,称为名字,以代表被欢迎的人的名字。
1// Initialize custom greeting function
2function greet(name) {
3 console.log(`Hello, ${name}!`);
4}
该函数的名称是)包含我们的参数的字符串,现在它作为一个本地变量行为。
您会注意到我们没有在任何地方定义我们的名称参数. 当我们召唤我们的函数时,我们将给它分配一个值.假设我们的用户名为Sammy,我们将呼叫该函数并将用户名放置为 参数 . 参数是传入函数的实际值,在这种情况下它是字符串 "Sammy"。
1// Invoke greet function with "Sammy" as the argument
2greet("Sammy");
Sammy的值正在通过名称参数传入函数中,现在每次在整个函数中使用名称时,它都会代表Sammy的值。
1[label greetSammy.js]
2// Initialize custom greeting function
3function greet(name) {
4 console.log(`Hello, ${name}!`);
5}
6
7// Invoke greet function with "Sammy" as the argument
8greet("Sammy");
当我们运行上面的程序时,我们将收到以下输出。
1[secondary_label Output]
2Hello, Sammy!
在现实世界的例子中,该函数将从数据库中提取用户名,而不是直接提供该名称作为参数值。
这些变量被称为 本地变量 ,并且只存在于其自身函数块的 scope 内部。
返回价值观
我们可以将多个值传入一个函数并返回一个值,我们将创建一个函数来找到两个值的总和,表示为x和y。
1[label sum.js]
2// Initialize add function
3function add(x, y) {
4 return x + y;
5}
6
7// Invoke function to find the sum
8add(9, 7);
在上面的程序中,我们定义了具有参数x和y的函数,然后将9和7的值传递给函数。
1[secondary_label Output]
216
在这种情况下,当)函数时,程序返回16`。
当使用)`来打印到控制台并不相同。
函数表达式
在最后一节中,我们使用函数声明来获得两个数字的总和并返回该值,我们还可以创建一个 函数表达式 ,将函数分配给一个变量。
使用我们相同的添加函数示例,我们可以直接将返回的值应用于变量,在这种情况下是总数。
1[label functionExpression.js]
2// Assign add function to sum constant
3const sum = function add(x, y) {
4 return x + y;
5}
6
7// Invoke function to find the sum
8sum(20, 5);
1[secondary_label Output]
225
现在总常数是一个函数. 我们可以通过将其转换为一个 匿名函数 ,这是一个无名函数. 目前,我们的函数有一个名称添加,但在函数表达式中,没有必要命名函数,而且通常会忽略这个名称。
1[label anonymousExpression.js]
2// Assign function to sum constant
3const sum = function(x, y) {
4 return x + y;
5}
6
7// Invoke function to find the sum
8sum(100, 3);
1[secondary_label Output]
2103
在本示例中,我们删除了该函数的名称,该函数是添加,并将其转化为匿名函数。
箭头函数
到目前为止,我们已经研究了如何使用)中,有一个更新的,更简洁的方法来定义一个函数,称为 箭头函数表达式 。
箭头函数总是匿名函数和函数表达的类型,我们可以创建一个基本的示例来找到两个数字的产物。
1[label arrowFunction.js]
2// Define multiply function
3const multiply = (x, y) => {
4 return x * y;
5}
6
7// Invoke function to find product
8multiply(30, 4);
1[secondary_label Output]
2120
相反,它与常规函数表达式相似,您可以在 Arrow Functions on the Mozilla Developer Network中阅读一些先进的差异。
在只有一个参数的情况下,可以排除关节。在本示例中,我们是x的方块,这只需要作为一个参数传递一个数字。
1// Define square function
2const square = x => {
3 return x * x;
4}
5
6// Invoke function to find product
7square(8);
1[secondary_label Output]
264
<$>[注] 注: 如果没有参数,则需要在箭头函数中使用一个空的符集 ()。
有了这些仅由返回陈述构成的具体示例,箭头函数可以使语法进一步缩小,如果该函数只是一个单行返回,那么既可以省略弯曲的和返回陈述,如下面的示例所示。
1// Define square function
2const square = x => x * x;
3
4// Invoke function to find product
5square(10);
1[secondary_label Output]
2100
这三种类型的语法都产生了相同的输出,一般来说,决定如何构建自己的函数是偏好或公司编码标准的问题。
结论
在本教程中,我们涵盖了函数声明和函数表达式,从函数返回值,将函数值分配给变量,以及ES6箭头函数。
函数是代码块,返回一个值或执行一个操作,使程序可扩展和模块化。