JavaScript如何查看函数参数？

在 JavaScript 中，查看函数参数有多种方式，具体取决于你想要查看什么信息：是参数的值、参数的数量，还是参数的名称。

下面我将从易到难,详细介绍各种方法。

在函数内部查看参数值

这是最常见的需求，在函数内部,你可以通过以下几种方式访问传入的参数值。

通过参数名直接访问 (最常用)

这是最直接、最清晰的方式，在函数定义时为每个参数指定一个名称,然后在函数体内直接使用这些名称。

function greet(name, message) {
  console.log(`参数 name 的值是: ${name}`);
  console.log(`参数 message 的值是: ${message}`);
  console.log(`你好, ${name}! ${message}`);
}
greet('Alice', '欢迎来到 JavaScript 世界！');
// 输出:
// 参数 name 的值是: Alice
// 参数 message 的值是: 欢迎来到 JavaScript 世界！
// 你好, Alice! 欢迎来到 JavaScript 世界！

使用 arguments 对象 (旧方式，不推荐)

在 ES6 之前，JavaScript 函数内部都有一个特殊的对象叫 arguments，它是一个类数组对象，包含了所有传递给函数的参数,无论函数定义时有多少个形参。

function sum() {
  console.log('arguments 对象:', arguments); // 输出类数组对象
  console.log('arguments 的长度:', arguments.length);
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  console.log('总和是:', total);
}
sum(1, 2, 3, 4); // 即使函数定义时没有参数，也能接收到
// 输出:
// arguments 对象: { '0': 1, '1': 2, '2': 3, '3': 4, length: 4 }
// arguments 的长度: 4
// 总和是: 10

为什么不推荐？

1. 不是真正的数组：你不能直接使用 map(), filter(), reduce() 等数组方法,除非先转换成数组。
2. 箭头函数中没有 arguments：在箭头函数中，访问 arguments 会获取到其外层函数的 arguments 对象,这通常不是你想要的结果。
3. 可读性差：不如命名参数清晰。

查看参数的数量

如果你想判断传入了多少个参数，可以使用 arguments.length 或使用 ES6 的剩余参数语法。

arguments.length

这是传统方法,可以获取实际传入的参数个数。

function logCount() {
  console.log(`传入了 ${arguments.length} 个参数，`);
}
logCount('a', 'b', 'c'); // 输出: 传入了 3 个参数。
logCount();               // 输出: 传入了 0 个参数。

剩余参数语法 (ES6, 推荐)

剩余参数语法 () 将多个参数收集成一个真正的数组，你可以直接使用这个数组的 length 属性。

function logCountWithRest(...params) {
  console.log(params); // params 是一个真正的数组: ['a', 'b', 'c']
  console.log(`传入了 ${params.length} 个参数，`);
}
logCountWithRest('a', 'b', 'c'); // 输出: 传入了 3 个参数。
logCountWithRest();               // 输出: 传入了 0 个参数。

剩余参数的优势：

• 它是一个真正的数组,可以使用所有数组方法。
• 代码更清晰,意图更明确。
• 可以和普通参数一起使用。

function example(a, b, ...others) {
  console.log(`a: ${a}`);
  console.log(`b: ${b}`);
  console.log(`其他参数:`, others);
}
example(1, 2, 3, 4, 5);
// 输出:
// a: 1
// b: 2
// 其他参数: [3, 4, 5]

查看参数的名称

查看参数名称比较复杂，因为它通常在函数定义时确定,而不是在调用时。

直接查看函数定义

最简单的方式就是看你的代码。

function myFunction(param1, param2) {
  // ...
}
console.log(myFunction.length); // 这是形参的个数，不是名称

使用 Function.prototype.toString() 和正则表达式

你可以获取函数的源代码字符串，然后用正则表达式来提取参数名。这是一个非常规且脆弱的方法，不推荐在生产环境中使用，因为它依赖于函数的字符串表示形式，不同 JS 引擎可能表现不同。

function getParamNames(func) {
  // 匹配函数定义中括号内的内容
  const funcStr = func.toString();
  const paramMatch = funcStr.match(/\(([^)]*)\)/);
  if (!paramMatch) {
    return [];
  }
  // 分割参数名，并过滤掉空字符串（如只有一个参数时的空格）
  const params = paramMatch[1].split(',').map(p => p.trim()).filter(p => p);
  return params;
}
function example(x, y, z) {
  // ...
}
console.log(getParamNames(example)); // 输出: ['x', 'y', 'z']
// 对于箭头函数
const arrowExample = (a, b) => a + b;
console.log(getParamNames(arrowExample)); // 输出: ['a', 'b']

使用 Reflect.getOwnMetadata (高级用法)

如果你在使用 TypeScript 或者装饰器，并且配置了 reflect-metadata 库，你可以在运行时获取参数的元数据（包括名称），这是非常高级的用法，不在标准 JavaScript 范围内。

总结与最佳实践

核心建议：

1. 优先使用命名参数：让你的函数意图一目了然。
2. 拥抱 ES6：使用剩余参数 () 来处理可变数量的参数，它会给你一个真正的数组，比 arguments 对象好用得多。
3. 避免直接使用 arguments：除非你需要在非常旧的 JavaScript 环境中工作,否则尽量使用剩余参数。

// 不推荐 (旧方式)
function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
// 推荐 (现代方式)
function sum(...numbers) {
  return numbers.reduce((total, current) => total + current, 0);
}