JavaScript箭头函数中怎么正确获取函数参数

在 JavaScript 中，箭头函数自身并不绑定 arguments 对象。如果开发者试图在箭头函数内部直接访问 arguments，获取到的往往是外层普通函数的参数，或者在顶层调用时抛出 ReferenceError: arguments is not defined 异常。正确获取箭头函数参数的核心做法是使用 ES6 引入的剩余参数语法（Rest Parameters，即 ...args），或者配合具名形参、解构赋值与默认参数来完成精确传参。

一、为什么不能在箭头函数中使用 arguments

在传统函数声明或函数表达式中，JavaScript 运行时会在每次函数被调用时自动在函数执行上下文中注入一个类数组对象 arguments，包含调用时传入的所有实参：

function traditionalFunc() {
  console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
  console.log(arguments[0]); // 1
}
traditionalFunc(1, 2, 3);

然而箭头函数在设计上是一种更轻量、偏向词法作用域绑定的函数形式。它没有专属的执行上下文局部绑定，因此它自身既不绑定 this，也不绑定 arguments、super 或 new.target。当在箭头函数内部书写 arguments 时，解析器会按照普通词法作用域链逐层向外查找同名变量。

下面两段代码清楚地展示了两种常见误区：

// 场景 1：在模块或全局直接定义箭头函数
const printArgs = () => {
  console.log(arguments);
};
// printArgs(10, 20); // 运行抛错：ReferenceError: arguments is not defined（严格模式或纯模块环境下）

// 场景 2：在普通函数内部嵌套箭头函数
function outerFunction() {
  const innerArrow = () => {
    // 这里的 arguments 不是 innerArrow 的实参，而是 outerFunction 的实参！
    console.log(arguments[0]);
  };
  innerArrow("arrowParam");
}
outerFunction("outerParam"); // 控制台输出："outerParam"，而非 "arrowParam"

在场景 2 中，箭头函数看似能打印出 arguments，但输出的其实是外层普通函数的参数，这种隐式捕获极易导致逻辑错误与难以排查的 Bug。

二、推荐方案：使用剩余参数（Rest Parameters）

获取箭头函数可变实参的标准方式是使用 ES6 提供的剩余参数语法 ...args。三个点作为前缀，后接参数名，可以将调用时传入的零个或多个实参聚合为一个标准的 JavaScript 数组。

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

console.log(sum(1, 2, 3, 4)); // 示例输出：10
console.log(sum(5));          // 示例输出：5
console.log(sum());           // 示例输出：0

与传统的 arguments 相比，剩余参数有三个明显的优势：

• 真正的 Array 实例：args 直接具备 map、filter、reduce、forEach 等原生数组方法，无需再通过 Array.from(arguments) 或 Array.prototype.slice.call(arguments) 做转换。
• 位置明确：剩余参数可以与固定具名参数混合使用，只收集多余的实参。
• 严格的作用域绑定：args 严格属于当前箭头函数自身，不会受外层函数变量的干扰。

三、具体传参场景与获取技巧

1. 具名参数与剩余参数混合使用

在许多场景中，函数的第一个或前几个参数具有确定含义（例如请求类型、事件名、格式化前缀），后续才是变长数据。可以将确定的参数写在前面，最后一个参数使用剩余参数：

const formatMessage = (level, timestamp, ...details) => {
  const content = details.join(' | ');
  return `[${level.toUpperCase()}] [${timestamp}]: ${content}`;
};

const result = formatMessage("info", "2026-10-24", "用户登录", "IP: 192.168.1.1", "成功");
console.log(result);
// 示例输出：[INFO] [2026-10-24]: 用户登录 | IP: 192.168.1.1 | 成功

2. 参数解构赋值（对象与数组）

当函数参数较多或者实参是复合数据结构时，直接在箭头函数的形参位置进行解构，能够让参数获取更加简洁易读，并且只提取关心的属性：

// 对象解构，支持默认值
const createUserCard = ({ name, role = "Guest", age = 18 }) => {
  return `${name} (${role}), 年龄: ${age}`;
};

console.log(createUserCard({ name: "Alice", role: "Admin" })); 
// 示例输出：Alice (Admin), 年龄: 18

// 数组解构与嵌套剩余参数
const getCoordinates = ([x, y, ...extraCoords]) => {
  console.log(`主坐标: X=${x}, Y=${y}`);
  console.log(`附加维度坐标:`, extraCoords);
};

getCoordinates([10, 20, 30, 40]);
// 示例输出：
// 主坐标: X=10, Y=20
// 附加维度坐标: [ 30, 40 ]

3. 参数默认值

为避免调用方未传递参数导致 undefined 报错，可以直接为形参指定默认值。当传入值为 undefined 时，默认值会自动生效：

const multiply = (factor = 1, ...numbers) => {
  return numbers.map(n => n * factor);
};

console.log(multiply(2, 10, 20, 30)); // 示例输出：[20, 40, 60]
console.log(multiply(undefined, 10, 20)); // 示例输出：[10, 20]（因 factor 取默认值 1）

四、常见开发误区与排查清单

在日常开发中，针对箭头函数参数处理，有几个高频发生的错误需要重点规避：

重点注意第三点：当使用参数解构时，如果调用方没有传任何参数调用该函数，JavaScript 引擎会尝试对 undefined 执行属性解构，从而抛出运行时异常：

// 危险写法：未提供整体兜底
const logConfig = ({ host, port = 8080 }) => {
  console.log(`${host}:${port}`);
};
// logConfig(); // 报错：TypeError: Cannot read properties of undefined (reading 'host')

// 安全写法：为解构参数赋予空对象默认值
const safeLogConfig = ({ host = "localhost", port = 8080 } = {}) => {
  console.log(`${host}:${port}`);
};
safeLogConfig(); // 正常输出：localhost:8080

五、总结与方案选型决策

在 JavaScript 中为箭头函数获取参数，不再需要也不应该依赖老旧的 arguments 伪数组。根据具体的传参形式和业务场景，选择适用的参数获取策略：

掌握了 ...rest 剩余参数以及解构语法后，不仅能够彻底摆脱 arguments 伪数组带来的历史包袱，还能让函数接口更严谨、更易维护。