在本教程中,您将了解 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] 返回第二个参数,依此类推。

此外,您还可以使用对象 argumentslength 属性来确定参数的数量。例如以下示例如何实现一个通用的 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 是函数内部的类数组对象,代表函数的参数。
  • 函数提升允许您在声明函数之前调用函数。