JavaScript 函数参数

关键要点

• JavaScript 函数参数允许传递数据，使函数更灵活。
• 参数按值传递，对象按引用传递，修改对象会影响外部。
• 默认参数和剩余参数（ES6）简化了参数处理。
• arguments 对象可访问所有传入参数，适合不定数量参数。

函数参数概述

JavaScript 函数参数是函数定义和调用时传递的数据，用于使函数更灵活和可复用。它们可以是任何类型，数量可以少于、等于或多于定义的数量。

参数传递方式

• 按值传递：对于数字、字符串等原始类型，函数内部修改不会影响外部。例如，传递 5 到函数，函数内改变值不会影响原值。
• 按引用传递：对于对象和数组，函数内部修改其属性或元素会影响外部。例如，传递对象 {name: "John"}，函数内改成 {name: "Jane"}，外部对象也会改变。

默认参数和剩余参数

• 默认参数（ES6）：可以设置默认值，例如 function add(a, b = 10) { return a + b; }，若不传 b，则用 10。
• 剩余参数（ES6）：用 ... 收集多余参数为数组，例如 function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); }，适合处理不定数量参数。

arguments 对象

JavaScript 提供 arguments 对象，包含所有传入参数，可以通过索引访问，例如 arguments[0] 获取第一个参数，适合处理不定数量参数。

---

详细报告

JavaScript 函数参数是函数定义和调用时传递的数据，用于使函数更灵活和可复用。以下是对 JavaScript 函数参数的详细中文讲解，涵盖其基本概念、传递方式、默认值、剩余参数和注意事项。

基本概念

• 显式参数（形参）：在函数定义时指定的参数，例如 function myFunction(param1, param2) 中的 param1 和 param2。
• 隐式参数（实参）：在调用函数时传递的值，例如 myFunction(1, 2) 中的 1 和 2。
• JavaScript 函数不会检查参数的数量或类型，因此可以传递任意数量的参数，甚至可以不传递参数。如果少传参数，未定义的参数值为 undefined。

参数传递方式

• 按值传递：对于原始类型（如数字、字符串、布尔值），函数内部的修改不会影响外部。例如：

  function changeValue(x) { x = 10; }
  let a = 5;
  changeValue(a);
  console.log(a); // 输出 5，外部未受影响

• 按引用传递：对于对象和数组，函数接收的是引用，内部修改其属性或元素会影响外部。例如：

  function changeObject(obj) { obj.name = "Jane"; }
  let person = { name: "John" };
  changeObject(person);
  console.log(person.name); // 输出 Jane，外部对象已改变

这是因为对象和数组是引用类型，传递的是内存地址。

默认参数

• ES5 中的默认参数：在 ES5 中，可以通过检查参数是否为 undefined 来设置默认值。例如：

  function myFunction(x, y) {
    if (y === undefined) y = 10;
    return x + y;
  }

或者使用逻辑或运算符：y = y || 10;，但需注意，若 y 为 0 或 false，可能会误判。

• ES6 中的默认参数：ES6 引入了更简洁的语法，可以直接在函数定义时设置默认值。例如：

  function myFunction(x, y = 10) {
    return x + y;
  }
  console.log(myFunction(5)); // 输出 15，y 使用默认值 10
  console.log(myFunction(5, 2)); // 输出 7，y 使用传入值 2

这提高了代码的可读性和简洁性，推荐使用 ES6 语法。

arguments 对象

JavaScript 函数有一个内置的 arguments 对象，它包含了函数调用时传递的所有参数，类似于一个类数组对象。可以按索引访问参数，例如 arguments[0] 获取第一个参数，arguments.length 获取参数数量。

• 示例：

  function findMax() {
    let max = -Infinity;
    for (let i = 0; i < arguments.length; i++) {
      if (arguments[i] > max) {
        max = arguments[i];
      }
    }
    return max;
  }
  console.log(findMax(1, 123, 500, 115, 44, 88)); // 输出 500

• arguments 对象在处理不定数量的参数时非常有用，尤其是在 ES6 引入剩余参数之前。

剩余参数（Rest 参数）

ES6 引入了剩余参数（Rest 参数）的概念，使用 ... 语法将不定数量的参数收集到一个数组中。剩余参数必须是函数参数列表中的最后一个参数。

• 示例：

  function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
  }
  console.log(sum(1, 2, 3, 4)); // 输出 10

• 剩余参数与 arguments 对象的区别在于：
• 剩余参数是真正的数组，可以直接使用数组方法（如 map、reduce）。
• arguments 是类数组对象，需手动转换或使用 Array.from。
• 剩余参数更现代，推荐在 ES6 及以上环境中使用。

参数的注意事项

• 参数顺序：JavaScript 参数是按位置匹配的，因此顺序很重要。例如，function add(a, b) 调用 add(1, 2) 时，a 为 1，b 为 2。
• 可选参数：可以通过默认参数或在函数体内检查参数是否存在来处理可选参数。例如，function greet(name = "Guest") { console.log("Hello, " + name); }，若不传 name，默认使用 "Guest"。
• 参数数量：函数调用时传递的参数数量可以少于、等于或多于定义的参数数量：
• 少于：未传递的参数值为 undefined，可通过默认参数处理。
• 多于：多余的参数无法通过参数名访问，只能通过 arguments 对象或剩余参数获取。

最佳实践

• 使用默认参数来处理可选参数，提高代码的可读性。例如，function add(a, b = 0) 比手动检查 b 是否 undefined 更清晰。
• 使用剩余参数来处理不定数量的参数，避免依赖 arguments 对象。例如，function sum(...numbers) 比使用 arguments 更现代且易用。
• 对于复杂的参数处理逻辑，考虑使用对象或数组作为参数，以提高函数的灵活性。例如，function processUser({ name, age }) 比多个参数更清晰。

总结

JavaScript 函数参数提供了强大的灵活性，支持按值和按引用传递，默认参数和剩余参数（ES6）简化了参数处理，arguments 对象则适合处理不定数量参数。通过合理使用这些特性，可以编写更健壮和可维护的代码。

---

关键引文

• JavaScript 函数参数菜鸟教程
• MDN JavaScript 函数指南