JavaScript 函数

摘要：在本教程中，您将了解 JavaScript 函数以及如何使用它们将代码结构化为更小、更可重用的单元。

JavaScript 函数简介

在开发应用程序时，您经常需要在许多地方执行相同的操作。例如，您可能希望在发生错误时显示一条消息。

为了避免在所有地方重复相同的代码，您可以使用函数来封装该代码并重复使用它。

JavaScript 提供了许多内置函数，例如 parseInt() 和 parseFloat()。在本教程中，您将学习如何开发自定义函数。

声明函数

要声明函数，您可以使用 function 关键字，后跟函数名称、参数列表和函数体，如下所示

function functionName(parameters) {
    // function body
    // ...
}Code language: JavaScript (javascript)

函数名称必须是有效的 JavaScript 标识符。按照惯例，函数名称使用驼峰命名法，并以动词开头，例如 getData()、fetchContents() 和 isValid()。

函数可以接受零个、一个或多个参数。对于多个参数，您需要使用逗号分隔两个参数。

以下声明了一个不接受参数的函数 say()

function say() {
}Code language: JavaScript (javascript)

以下声明了一个名为 square() 的函数，它接受一个参数

function square(a) {
}Code language: JavaScript (javascript)

以下声明了一个名为 add() 的函数，它接受两个参数

function add(a, b) {
}Code language: JavaScript (javascript)

在函数体内，您可以编写代码来实现操作。例如，以下 say() 函数只是向控制台显示一条消息

function say(message) {
    console.log(message);
}Code language: JavaScript (javascript)

在 say() 函数体内，我们调用 console.log() 函数将消息输出到控制台。

调用函数

要使用函数，您需要调用它。调用函数也被称为调用函数。要调用函数，可以使用其名称，后跟括号中的参数，如下所示

functionName(arguments);Code language: JavaScript (javascript)

调用函数时，JavaScript 将执行函数体内的代码。例如，以下显示了如何调用 say() 函数

say('Hello');Code language: JavaScript (javascript)

在此示例中，我们调用 say() 函数并将文字字符串 'Hello' 传入其中。

参数与参数

参数和参数这两个术语通常可以互换使用。但是，它们本质上是不同的。

声明函数时，您指定参数。但是，调用函数时，您传递与参数相对应的参数。

例如，在 say() 函数中，message 是参数，而 'Hello' 字符串是与 message 参数相对应的参数。

返回值

JavaScript 中的每个函数都隐式返回 undefined，除非您明确指定返回值。例如

function say(message) {
    console.log(message);
}

let result = say('Hello');
console.log('Result:', result);Code language: JavaScript (javascript)

输出

Hello
Result: undefinedCode language: JavaScript (javascript)

要为函数指定返回值，您可以使用 return 语句，后跟表达式或值，如下所示

return expression;Code language: JavaScript (javascript)

例如，以下 add() 函数返回两个参数的总和

function add(a, b) {
    return a + b;
}Code language: JavaScript (javascript)

以下显示了如何调用 add() 函数

let sum = add(10, 20);
console.log('Sum:', sum);Code language: JavaScript (javascript)

输出

Sum: 30Code language: HTTP (http)

以下示例在函数中使用多个 return 语句来根据条件返回不同的值

function compare(a, b) {
    if (a > b) {
        return -1;
    } else if (a < b) {
        return 1;
    }
    return 0;
}Code language: JavaScript (javascript)

compare() 函数比较两个值。它返回

• -1 如果第一个参数大于第二个参数。
• 1 如果第一个参数小于第二个参数。
• 0 如果第一个参数等于第二个参数。

当函数遇到 return 语句时，它会立即停止执行。因此，您可以使用没有值的 return 语句来提前退出函数，如下所示

function say(message) {
    // show nothing if the message is empty
    if (! message ) {
        return;
    }
    console.log(message);
}Code language: JavaScript (javascript)

在此示例中，如果 message 为空（或 undefined），则 say() 函数将不会显示任何内容。

函数可以返回单个值。如果您想从函数中返回多个值，则需要将这些值打包到数组或对象中。

arguments 对象

在函数内部，您可以访问一个名为 arguments 的对象，它表示函数的命名参数。

arguments 对象的行为类似于数组，虽然它不是 Array 类型的实例。

例如，您可以使用方括号 [] 来访问参数：arguments[0] 返回第一个参数，arguments[1] 返回第二个参数，等等。

此外，您可以使用 arguments 对象的 length 属性来确定参数的数量。

以下示例实现了一个通用的 add() 函数，该函数计算任意数量参数的总和。

function add() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}Code language: JavaScript (javascript)

因此，您可以将任意数量的参数传递给 add() 函数，如下所示

console.log(add(1, 2)); // 3
console.log(add(1, 2, 3, 4, 5)); // 15Code language: JavaScript (javascript)

函数提升

在 JavaScript 中，您可以在声明函数之前使用它。例如

showMe(); // a hoisting example

function showMe(){
    console.log('an hoisting example');
}Code language: JavaScript (javascript)

此功能称为 提升.

函数提升是一种机制，JavaScript 引擎在执行函数之前将函数声明物理上移动到代码的顶部。

以下显示了 JavaScript 引擎执行代码之前的代码版本

function showMe(){
    console.log('a hoisting example');
}

showMe(); // a hoisting exampleCode language: JavaScript (javascript)

总结

• 使用 function 关键字声明函数。
• 使用 functionName() 调用函数。
• 所有函数都隐式返回 undefined，如果它们没有显式返回一个值。
• 使用 return 语句从函数中显式返回一个值。
• arguments 变量是函数内部的一个类似数组的对象，表示函数参数。
• 函数提升允许您在声明函数之前调用它。