白骑士的JavaScript教学语法基础篇之函数 2.4.3 参数与返回值-优快云博客

在 JavaScript 中，函数是构建程序逻辑的基础。它们允许开发者封装代码块，并通过传递数据（即参数）和返回结果来执行复杂的任务。在所有的编程语言中，参数与返回值是函数编程的核心概念，理解它们对于编写灵活、高效的代码至关重要。本篇博客将带你深入探讨 JavaScript 中的 函数参数与返回值。你将学习如何定义和使用函数参数、设置默认值、处理任意数量的参数，以及参数传递的不同方式。我们还会探讨如何通过返回值来获取函数执行的结果，以及如何提前终止函数并返回特定的值。

函数参数

函数参数是调用函数时传递给函数的数据。参数使得函数能够根据传入的数据执行不同的操作，从而提高代码的复用性。

参数的定义

在定义函数时，参数被列在括号‘()‘内，并以逗号分隔。每个参数都可以在函数体内使用，作为变量来参与计算或操作。

基本语法

function functionName(parameter1, parameter2) {
    // 使用参数
    return parameter1 + parameter2;
}

示例

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

console.log(multiply(3, 4)); // 输出 12

在这个示例中，‘multiply‘ 函数定义了两个参数 ‘a‘ 和 ‘b‘，它们在函数体内被相乘，并返回结果 ‘12‘。

默认参数值

从 ES6 开始，JavaScript 允许为函数参数设置默认值。当调用函数时，如果没有为某个参数传递值，则该参数将使用其默认值。

基本语法

function functionName(parameter1 = defaultValue1, parameter2 = defaultValue2) {
    // 使用参数
    return parameter1 + parameter2;
}

示例

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

console.log(greet()); // 输出 "Hello, Guest!"
console.log(greet("Alice")); // 输出 "Hello, Alice!"

在这个示例中，‘greet‘ 函数的 ‘name‘ 参数有一个默认值 ‘"Guest"‘。如果调用函数时未提供 ‘name‘，则使用默认值。

剩余参数（Rest Parameters）

有时你可能需要编写一个函数，能够接受任意数量的参数。在 ES6 之前，这通常通过 ‘arguments‘ 对象来实现。ES6 引入了剩余参数（Rest Parameters），允许你将函数的多个参数收集为一个数组。

基本语法

function functionName(...args) {
    // args 是一个数组，包含所有传入的参数
    return args.reduce((sum, current) => sum + current, 0);
}

示例

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

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

在这个示例中，‘sum‘ 函数使用剩余参数 ‘numbers‘，它是一个数组，包含所有传入的参数。‘reduce‘ 方法用于计算所有参数的总和。

参数传递方式

JavaScript 中的参数传递有两种方式：按值传递和按引用传递。

按值传递

当传递基本数据类型（如 ‘number‘、‘string‘、‘boolean‘）时，函数接收到的是参数的一个副本，对该参数的修改不会影响原始值。

示例

function changeValue(value) {
    value = 100;
}

let num = 50;
changeValue(num);
console.log(num); // 输出 50

在这个示例中，‘num‘ 的值不会因为在 ‘changeValue‘ 函数中修改了 ‘value‘ 而发生改变。

按引用传递

当传递引用数据类型（如 ‘object‘、‘array‘）时，函数接收到的是参数的引用，对该参数的修改将影响原始对象或数组。

示例

function changeObject(obj) {
    obj.name = "New Name";
}

let person = { name: "Alice" };
changeObject(person);
console.log(person.name); // 输出 "New Name"

在这个示例中，‘person‘ 对象在 ‘changeObject‘ 函数中被修改，原始对象的 ‘name‘ 属性被更改为 ‘"New Name"‘。

函数返回值

函数返回值是函数执行后返回给调用者的结果。通过 ‘return‘ 语句，函数可以返回任何类型的值。函数执行到 ‘return‘ 语句时，会立即停止并返回指定的值。

‘return‘ 语句

‘return‘ 语句用于终止函数的执行并返回一个值。如果函数没有 ‘return‘ 语句或 ‘return‘ 后没有指定值，函数将返回 ‘undefined‘。

基本语法

function functionName(parameters) {
    // 执行一些操作
    return value; // 返回值
}

示例

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

let result = add(5, 10);
console.log(result); // 输出 15

在这个示例中，‘add‘ 函数返回两个参数的和。调用 ‘add(5, 10)‘ 返回 ‘15‘ 并赋值给 ‘result‘ 变量。

返回对象或数组

函数可以返回对象、数组或其他复杂数据结构。返回对象或数组时，调用者可以直接使用这些结构的内容。

示例

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

let person = createPerson("Alice", 30);
console.log(person.name); // 输出 "Alice"
console.log(person.age);// 输出 30

在这个示例中，‘createPerson‘ 函数返回一个对象，包含 ‘name‘ 和 ‘age‘ 属性。调用者可以通过对象访问这些属性。

提前返回

在某些情况下，你可能希望在满足特定条件时提前终止函数的执行。通过 ‘return‘ 语句，可以在函数中途退出并返回值。

示例

function divide(a, b) {
    if (b === 0) {
        return "Cannot divide by zero!";
    }

    return a / b;
}

console.log(divide(10, 2)); // 输出 5
console.log(divide(10, 0)); // 输出 "Cannot divide by zero!"

在这个示例中，如果 ‘b‘ 为 ‘0‘，函数将提前返回错误消息，否则返回两个数的商。