【Web前端】自定义你的个性化函数

函数是构建强大和可维护代码的关键，一个函数像是一个小型的程序，能够执行特定的任务，可以在需要的时候被重复调用。那么如何来创建你自己的函数？

构建一个函数

什么是函数？

函数是一段组织良好且可重复使用的代码，它接受输入参数（也称为函数参数），执行一系列定义的操作，并可能返回一个结果。函数的构建使程序结构更加清晰，逻辑更加分明，从而提高代码的可读性和可维护性。可以通过两种主要方式来定义函数：声明式和表达式式。

声明式函数

声明式函数以 function 关键字开头，用于定义一个命名的函数。声明式函数的定义是“提升”的（hoisted），这意味着在它被调用之前，你可以在代码的任意位置使用它。这种方式使得函数的使用更加灵活。以下是声明式函数的一个示例：

function sayHello(name) {
    return "Hello, " + name + "!";
}

// 调用函数
console.log(sayHello("xianyu")); // 输出: Hello, xianyu!

sayHello 是函数的名称，它接收一个参数 name，并生成一个问候语。调用函数时，返回的结果是 "Hello, xianyu!"。

尽管声明式函数通常具有更明显的可读性，但在某些情况下，函数的定义可能会随着代码的复杂性而变得难以管理，因此需要合理组织并适当命名函数。

表达式式函数

表达式式函数通常用于创建匿名函数，即没有名称的函数。这种函数通常赋值给变量，这样可以通过变量名调用它。表达式式函数的定义不具备提升特性，因此在被定义之后才能被调用。以下是一个表达式式函数的示例：

let sayHello = function(name) {
    return "Hello, " + name + "!";
};

// 调用函数
console.log(sayHello("xianyu")); // 输出: Hello, xianyu!

示例中使用 let 声明了一个变量 sayHello，并将一个匿名函数赋值给它。通过这个变量，我们可以调用这个函数，实现与声明式函数相同的功能。

基本函数

函数体

函数体是函数内部的代码块，它定义了在调用函数时所要执行的具体操作和逻辑。在我们之前的例子中，sayHello 函数的函数体是：

return "Hello, " + name + "!";

函数体中，可以使用条件语句、循环、变量和其他函数等多种编程结构，从而实现更复杂的功能。有效地构建函数体能够使函数执行特定的任务。例如，以下是一个更复杂的函数体示例，该函数用于计算两个数的和并返回结果：

function addNumbers(a, b) {
    let sum = a + b; // 计算两个数的和
    return sum; // 返回和
}

这种情况下，函数体内还定义了一个变量 sum 用于存储和，并通过 return 语句将计算结果返回。根据需求，函数体的内容可以十分灵活，允许进行各种复杂的操作。

返回值

返回值是函数执行后返回给调用者的结果。在 JavaScript 中，使用 return 语句来指定函数的返回值。每个函数可以有零个或多个 return 语句，具体取决于函数的需求。在下面的 sayHello 例子中：

return "Hello, " + name + "!";

这一语句返回了一个字符串，表示一个个性化的问候。另一示例中，可以使用 return 语句返回不同的类型的数据，如数字、对象、布尔值等：

function checkEvenOrOdd(number) {
    if (number % 2 === 0) {
        return "Even"; // 如果是偶数，返回 "Even"
    } else {
        return "Odd"; // 如果是奇数，返回 "Odd"
    }
}

这段代码根据传入的 number 判断其是偶数还是奇数，并返回相应的字符串。

调用函数

要执行一个函数，需要调用它。调用函数的过程就像是对一个命令的执行，具体形式是使用函数名后跟上括号，并在括号内传入需要的参数。下面是如何调用 sayHello 函数的示例：

console.log(sayHello("xianyu")); // 输出: Hello, xianyu!

在这个例子中，我们调用了 sayHello 函数，并传入 "xianyu" 作为参数。当函数被调用时，参数 name 会接收到这个值，从而生成并返回 "Hello, xianyu!" 的问候语，利用 console.log() 将结果输出到控制台。

调用函数时还可以使用不同的参数，从而实现灵活的功能：

console.log(sayHello("xianyu")); // 输出: Hello, xianyu!
console.log(sayHello("xianyadan")); // 输出: Hello, xianyadan!

每次调用 sayHello 函数时，根据传入的参数不同，会生成相应的问候语。

使用参数列表改进函数

参数

参数是函数定义时给出的占位符，它们允许函数接收外部数据以进行处理。在之前的 sayHello 函数中，name 是一个参数，其作用是接收要问候的对象的名称。通过参数，函数能够在不同的调用中表现出不同的行为。

function sayHello(name) {
    return "Hello, " + name + "!";
}

可变数量的参数

JavaScript 允许函数接收任意数量的参数，这通过使用剩余参数（Rest Parameters）语法来实现。剩余参数允许我们将不确定数量的参数组合成一个数组，使得函数更加灵活。以下是一个使用可变数量参数的函数示例：

function sum(...numbers) {
    return numbers.reduce((total, number) => total + number, 0);
}

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

sum 函数可以接收多个数字作为参数，并利用 reduce 方法来计算所有参数的总和。numbers 是一个数组，里面包含了所有传递给函数的数字，通过这种方式可以方便地处理不同数量的输入。

默认参数

JavaScript 中，你可以为函数参数设置默认值，当调用函数时如果没有提供某个参数，它将自动使用预设的默认值。这种功能增强了函数的灵活性，确保在没有提供必要信息的情况下，函数仍然能够正常工作。以下是一个设置了默认参数的函数示例：

function greet(name = "xianyu2") {
    return "Hello, " + name + "!";
}

console.log(greet("xianyu")); // 输出: Hello, xianyu!
console.log(greet()); // 输出: Hello, xianyu2!

在这个例子中，如果调用 greet 函数时不传入 name，则函数会使用默认值 "xianyu2"。这种做法不仅避免了错误，还提升了代码的可读性和可维护性。

命名参数

JavaScript 本身不支持命名参数，但可以使用对象作为参数来模拟命名参数的效果。这种方式通过明确列出需要的参数名，提高了代码的可读性，使调用函数时其意图更加明了。以下是一个示例：

function personInfo({firstName, lastName, age}) {
    return `${firstName} ${lastName}, Age: ${age}`;
}

console.log(personInfo({firstName: "shaigan", lastName: "xianyu", age: 25})); // 输出: shaigan xianyu, Age: 25

在personInfo 函数中，接收一个对象作为参数，并从中提取 firstName、lastName 和 age。通过这种方式，调用时可以非常清晰地看到每个参数的意义，使得代码更具可读性。例如，调用 personInfo 函数时，传入一个对象，列出了每个参数的对应关系。

示例

示例 1：计算两个数的平均值

function calculateAverage(a, b) {
    return (a + b) / 2;
}

console.log(calculateAverage(10, 20)); // 输出: 15

calculateAverage 函数接收两个参数 a 和 b，计算它们的平均值，并返回结果。

示例 2：检查字符串是否为空

function isEmpty(str) {
    return str.trim() === "";
}

console.log(isEmpty("")); // 输出: true
console.log(isEmpty("   ")); // 输出: true
console.log(isEmpty("Not empty")); // 输出: false

isEmpty 函数检查一个字符串是否为空，即使它包含空白字符。它使用 trim() 方法来移除字符串两端的空白，然后比较结果是否为空字符串。

示例 3：生成随机数

function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomNumber(1, 10)); // 输出一个 1 到 10 之间的随机数

getRandomNumber 函数接收两个参数 min 和 max，并返回一个在范围内的随机整数。