在 JavaScript 中，函数参数是定义函数时指定的输入值，用于在函数内部执行操作。函数参数可以是任意类型的值，包括基本数据类型（如字符串、数字等）和对象。JavaScript 提供了多种灵活的方式来处理函数参数，包括默认值、解构赋值、剩余参数等。

1. 函数参数的基本语法

函数定义时，参数是放在圆括号 () 中，并且可以包含多个参数，多个参数用逗号 , 分隔。

语法：

function functionName(parameter1, parameter2) {
  // 函数体
}

示例：

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

console.log(add(5, 10));  // 输出: 15

• 注意：如果函数调用时没有传递某些参数，JavaScript 会将其值设置为 undefined。

2. 默认参数值

JavaScript 允许为函数参数设置默认值。当调用函数时，如果没有传入相应的参数，则会使用默认值。

语法：

function functionName(parameter1 = defaultValue) {
  // 函数体
}

示例：

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

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

• 注意：默认参数值必须位于参数列表的最后。

3. 参数的解构赋值

JavaScript 允许使用解构赋值语法来提取传递给函数的对象或数组中的特定值。这对于处理复杂数据结构时非常方便。

对象解构赋值：

function greet({name, age}) {
  return `Hello, ${name}. You are ${age} years old.`;
}

const user = { name: "John", age: 25 };
console.log(greet(user));  // 输出: Hello, John. You are 25 years old.

• 注意：解构赋值可以直接提取对象的属性值，并将其赋给相应的变量。

数组解构赋值：

function sum([a, b]) {
  return a + b;
}

console.log(sum([5, 10]));  // 输出: 15

• 注意：对于数组，可以使用解构来获取数组中的元素。

4. 剩余参数（Rest Parameters）

剩余参数（...）用于将多个传递给函数的参数收集成一个数组。这样，函数可以处理不确定数量的参数。

语法：

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

示例：

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

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

• 注意：剩余参数只能在函数参数列表的最后位置，且会将所有剩余的参数收集到一个数组中。

5. 参数的传递方式：值传递与引用传递

在 JavaScript 中，函数的参数是通过 值传递（对于原始数据类型）或 引用传递（对于对象和数组）来传递的。

• 原始类型（值传递）：在函数内部对参数的修改不会影响外部的变量。

  function changeValue(a) {
    a = 10;
  }

  let x = 5;
  changeValue(x);
  console.log(x);  // 输出: 5

• 引用类型（引用传递）：在函数内部对参数的修改会影响外部的对象或数组。

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

  const person = { name: "Bob" };
  changeObject(person);
  console.log(person.name);  // 输出: Alice

6. 函数参数的个数与实际参数的匹配

JavaScript 允许函数被调用时传递的参数数量超过或不足于函数定义时声明的参数数量。当实际传递的参数数量少于函数参数时，缺少的参数会被赋值为 undefined。如果传递的参数超过函数声明的参数个数，超出的参数会被忽略，或者通过剩余参数收集。

示例：

function greet(name, age) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

greet("John");  // 输出: Hello, John. You are undefined years old.
greet("Alice", 25);  // 输出: Hello, Alice. You are 25 years old.
greet("Bob", 30, "extra");  // 输出: Hello, Bob. You are 30 years old.

7. Arguments 对象

JavaScript 中的 arguments 对象是一个类数组对象，包含了传递给函数的所有参数。它并不是真正的数组，但具有类似数组的索引和 length 属性。

• 注意：arguments 对象不能与箭头函数一起使用，因为箭头函数没有 arguments 对象。

示例：

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

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

• 注意：arguments 对象是可变的，意味着你可以根据需要修改它。

8. 参数顺序与命名约定

• 参数顺序：为了确保代码的可读性，常常建议将常用的参数放在前面，不常用的参数放在后面。比如，设置默认值的参数通常放在最后。

  function createUser(name, age = 18, isAdmin = false) {
    // 创建用户逻辑
  }

• 命名约定：函数的参数应该有意义的名称，能够准确描述其用途。例如，使用 name、age、address 等易懂的名称，而不是模糊的名称如 x、y 等。

总结

• 默认参数：可以为参数设置默认值，如果调用时没有提供该参数，则使用默认值。
• 解构赋值：可以使用解构赋值从对象或数组中提取值作为参数。
• 剩余参数：使用 ... 语法来处理不确定数量的参数，自动将它们收集到一个数组中。
• 值传递与引用传递：原始数据类型通过值传递，而对象和数组通过引用传递。
• arguments 对象：用于获取所有传递给函数的参数，虽然可以在函数中使用，但它不是数组。

理解和熟练使用这些参数特性，可以让你编写更灵活、简洁且易于维护的函数。更多详细内容请关注其他相关文章。