14 JavaScript 函数之参数与返回值

在上一篇我们讨论了函数的定义和调用，了解了如何创建和执行一个简单的函数。那么，函数的参数和返回值又是如何工作的呢？在这篇教程中，我们将深入探讨这一主题，以及如何使用它们来创建灵活和强大的功能。

函数的参数

函数的参数是传递给函数的输入。当你定义一个函数时，可以指定一个或多个参数。以下是函数参数的基本语法：

function functionName(parameter1, parameter2) {
    // Function body
}

示例：计算和

让我们来创建一个简单的函数，它接收两个参数并返回它们的和：

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

// 调用函数
const result = add(5, 10);
console.log(result); // 输出 15

在这个例子中，add 函数接收两个参数 a 和 b，然后使用 return 语句返回这两个参数的和。调用函数时，我们传递了 5 和 10 作为参数，最终输出 15。

默认参数

JavaScript 允许我们为函数参数设置默认值。如果在调用函数时没有为这些参数提供值，默认值将被使用。例如：

function multiply(a, b = 1) {
    return a * b;
}

console.log(multiply(5));   // 输出 5，因为 b 使用默认值 1
console.log(multiply(5, 2)); // 输出 10

在上面的代码中，我们定义了一个 multiply 函数，第二个参数 b 的默认值为 1。如果调用时只传入一个参数，b 就会使用默认值。

剩余参数

有时你可能需要处理未知数量的参数，这可以通过 ... 运算符实现，称为剩余参数。例如：

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

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

这里，sum 函数可以接受任意数量的参数，通过 ...numbers 来收集所有传递的参数，并使用 reduce 方法计算总和。

函数的返回值

函数可以返回任何类型的值，包括数字、字符串、对象，甚至另一个函数。return 语句用于结束函数的执行并返回值。

示例：返回对象

下面是一个函数，它创建并返回一个对象：

function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

const person = createPerson("Alice", 30);
console.log(person); // 输出 { name: 'Alice', age: 30 }

在这个示例中，createPerson 函数返回一个包含 name 和 age 属性的对象。

返回多个值

JavaScript 本身不支持直接返回多个值，但你可以使用数组或对象来实现这个目的：

function getCoordinates() {
    return [10, 20]; // 返回一个数组
}

const [x, y] = getCoordinates(); // 解构赋值
console.log(x, y); // 输出 10 20

或者使用对象：

function getUser() {
    return {
        username: "JohnDoe",
        id: 12345
    };
}

const user = getUser();
console.log(user.username); // 输出 JohnDoe

在这些例子中，我们使用数组和对象来有效地返回多个值。

总结

在这一部分的学习中，我们详细探讨了函数的参数与返回值的概念。了解如何有效使用函数参数和返回值，将使我们编写的代码更加灵活和高效。在接下来的章节中，我们将讨论匿名函数和箭头函数的使用，这将进一步丰富我们对函数的理解和应用。希望你能继续保持对 JavaScript 的探索热情！