如何在JavaScript中定义函数

介绍

函数是执行操作或返回值的代码块。函数是由程序员定义的可重用的自定义代码，因此可以使您的程序更加模块化和高效。

在本教程中，我们将学习几种在 JavaScript 中定义函数、调用函数和使用函数参数的方法。

定义函数

使用 function 关键字定义或声明函数。下面是 JavaScript 中函数的语法。

function nameOfFunction() {
    // Code to be executed
}

声明以 function 关键字开头，后跟函数名。函数名称遵循与变量相同的规则——它们可以包含字母、数字、下划线和美元符号，并且经常用驼峰式编写。名称后跟一组括号，可用于可选参数。函数的代码包含在大括号中，就像 for 语句或 if 语句。

在我们的第一个示例中，我们将创建一个 函数声明 以将问候语句打印到控制台。

// Initialize greeting function
function greet() {
    console.log("Hello, World!");
}

在这里，我们有将 Hello, World! 打印到包含在 greet() 函数中的控制台的代码。但是，在我们 invoke 或调用该函数之前，什么都不会发生，也不会执行任何代码。您可以通过编写函数名称和括号来调用函数。

// Invoke the function
greet();

现在我们将把它们放在一起，定义我们的函数并调用它。

问候.js

// Initialize greeting function
function greet() {
    console.log("Hello, World!");
}

// Invoke the function
greet();

通过调用 greet();，函数将运行，我们将收到 Hello, World! 作为程序的输出。

OutputHello, World!

现在我们将 greet() 代码包含在一个函数中，并且可以根据需要多次重复使用它。

使用参数，我们可以使代码更加动态。

功能参数

在我们的 greet.js 文件中，我们创建了一个将 Hello, World 打印到控制台的基本函数。使用参数，我们可以添加额外的功能，使代码更加灵活。 Parameters 是作为名称传递给函数并表现为局部变量的输入。

当用户登录到应用程序时，我们可能希望程序用名字打招呼，而不是仅仅说“你好，世界！”。

我们将在函数中添加一个名为 name 的参数，以表示被打招呼的人的姓名。

// Initialize custom greeting function
function greet(name) {
    console.log(`Hello, ${name}!`);
}

函数的名称是 greet，现在我们在括号内有一个参数。参数的名称遵循与命名变量相同的规则。在函数内部，我们有一个包含参数的模板文字字符串，而不是由 Hello, World 组成的静态字符串，它现在表现为局部变量。

你会注意到我们没有在任何地方定义我们的 name 参数。当我们调用我们的函数时，我们给它赋值。假设我们的用户名为 Sammy，我们将调用该函数并将用户名作为参数。参数是传递给函数的实际值，在本例中是字符串 "Sammy"。

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

"Sammy" 的值通过 name 参数传递给函数。现在，每次在整个函数中使用 name 时，它将代表 "Sammy" 值。这是整个代码。

问候萨米.js

// Initialize custom greeting function
function greet(name) {
    console.log(`Hello, ${name}!`);
}

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

当我们运行上面的程序时，我们将收到以下输出。

OutputHello, Sammy!

现在我们有一个如何重用函数的示例。在现实世界的示例中，该函数将从数据库中提取用户名，而不是直接提供名称作为参数值。

除了参数，变量也可以在函数内部声明。这些变量称为局部变量，只会存在于各自功能块的作用域内。变量范围决定变量的可访问性；在函数内部定义的变量不能从函数外部访问，但它们可以在整个程序中使用其函数的次数。

返回值

一个函数中可以使用多个参数。我们可以将多个值传递给一个函数并返回一个值。我们将创建一个函数来求两个值之和，由 x 和 y 表示。

sum.js

// Initialize add function
function add(x, y) {
    return x + y;
}

// Invoke function to find the sum
add(9, 7);

在上面的程序中，我们用参数 x 和 y 定义了一个函数，然后将 9 和 7 的值传递给函数。当我们运行程序时，我们将收到这些数字的总和作为输出。

Output16

在这种情况下，将 9 和 7 传递给 sum() 函数，程序返回 16。

当使用 return 关键字时，函数停止执行并返回表达式的值。虽然这种情况下浏览器会在控制台显示数值，但和使用console.log()打印到控制台是不一样的。调用函数将在调用函数的位置准确输出值。该值可以立即使用或放入变量中。

函数表达式

在上一节中，我们使用函数声明来获取两个数字的和并返回该值。我们还可以通过将函数分配给变量来创建 函数表达式。

使用我们相同的 add 函数示例，我们可以直接将返回值应用于变量，在本例中为 sum。

函数表达式.js

// Assign add function to sum constant
const sum = function add(x, y) {
    return x + y;
}

// Invoke function to find the sum
sum(20, 5);

Output25

现在 sum 常量是一个函数。我们可以通过将这个表达式变成一个匿名函数来使这个表达式更简洁，它是一个未命名的函数。目前，我们的函数名称为 add，但对于函数表达式，不需要命名函数并且名称通常被省略。

匿名表达式.js

// Assign function to sum constant
const sum = function(x, y) {
    return x + y;
}

// Invoke function to find the sum
sum(100, 3);

Output103

在此示例中，我们删除了函数的名称，即 add，并将其转换为匿名函数。命名函数表达式可用于帮助调试，但通常被省略。

箭头函数

到目前为止，我们已经了解了如何使用 function 关键字定义函数。但是，从 ECMAScript 6 开始，有一种更新、更简洁的方法来定义称为 箭头函数表达式 的函数。众所周知，箭头函数由等号后跟大于号表示：=>。

箭头函数始终是匿名函数和一种函数表达式。我们可以创建一个基本示例来查找两个数字的乘积。

箭头函数.js

// Define multiply function
const multiply = (x, y) => {
    return x * y;
}

// Invoke function to find product
multiply(30, 4);

Output120

我们没有写出关键字 function，而是使用 => 箭头来指示函数。否则，它的工作方式类似于正则函数表达式，但有一些高级差异，您可以在 Mozilla 开发者网络上的 Arrow Functions 下阅读。

在只有一个参数的情况下，可以排除括号。在这个例子中，我们对 x 求平方，它只需要一个数字作为参数传递。括号已被省略。

// Define square function
const square = x => {
    return x * x;
}

// Invoke function to find product
square(8);

Output64

注：在没有参数的情况下，箭头函数需要一个空的括号()。

对于这些仅包含 return 语句的特定示例，箭头函数允许进一步减少语法。如果函数只有单行 return，则大括号和 return 语句都可以省略，如下例所示。

// Define square function
const square = x => x * x;

// Invoke function to find product
square(10);

Output100

所有这三种类型的语法都会产生相同的输出。决定如何构建自己的功能通常取决于偏好或公司编码标准。

结论

在本教程中，我们介绍了函数声明和函数表达式、从函数返回值、将函数值分配给变量以及 ES6 箭头函数。

函数是返回值或执行操作的代码块，使程序具有可扩展性和模块化。