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

JavaScript 函数简介

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

为避免在各处重复相同的代码，您可以使用一个函数来封装代码并重用它。

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

声明一个函数

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

function functionName(parameters) {
    // 函数体
    // ...
}

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

函数可以接受零个、一个或多个参数。在有多个参数的情况下，需要用逗号分隔两个参数。

声明一个不接受任何参数的 say() 函数：

function say() { }

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

function square(a) { }

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

function add(a, b) { }

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

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

在 say() 函数体中，我们调用 console.log() 函数向控制台输出一条消息。

调用函数

要使用函数，您需要调用它。函数的调用也称为调用函数。要调用一个函数，您可以使用它的名称后跟用括号括起来的参数，如下所示：

functionName(arguments);

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

say('Hello');

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

形参 Parameters 与 实参 Arguments

Parameters 中文是形参，Arguments 的中文是实参，你可以它理解为形参的实际值。两个术语经常互换使用。然而，它们本质上是不同的。

声明函数时，指定形参 Parameters，但是，在调用函数时，您传递的参数是与形参 Parameters 对应的实参 Arguments。

比如在 say() 函数中，message 是形参，'Hello' 字符串是 message 形参对应的实参。

返回值

除非您显式指定返回值，否则 JavaScript 的每个函数都会隐式返回 undefined。例如：

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

let result = say('Hello');
console.log('Result:', result);

输出：

Hello
Result: undefined

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

return expression;

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

function add(a, b) {
    return a + b;
}

下面展示如何调用 add() 函数：

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

输出：

Sum: 30

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

function compare(a, b) {
    if (a > b) {
        return -1;
    } else if (a < b) {
        return 1;
    }
    return 0;
}

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

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

函数在到达 return 语句时立即停止执行。因此，您可以使用不带值的 return 语句来提前退出函数，如下所示：

function say(message) {
    // 如果 message 是则直接返回
    if (! message ) {
        return;
    }
    console.log(message);
}

在此示例中，如果 message 的值为空字符串或 undefined ，则 say() 函数将不打印任何内容。

函数可以返回单个值。如果你想从一个函数中返回多个值，你需要将这些值保存到一个数组或一个对象中。

参数对象

在函数内部，您可以访问一个名为 arguments 的对象，arguments 对象代表函数的命名参数。arguments 对象的行为类似于数组，但它不是数组 Array 类型的实例。

例如，您可以使用方括号[]访问 arguments 对象。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;
}

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

console.log(add(1, 2)); // 3
console.log(add(1, 2, 3, 4, 5)); // 15

函数提升

在 JavaScript ，您可以在声明函数之前使用它，此功能称为提升。例如：

showMe(); // 一个函数提升的示例

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

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

下面展示 JavaScript 引擎执行之前的代码版本：

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

showMe(); // 一个函数提升的示例

结论

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