JavaScript函数参数详解：默认值、剩余参数与arguments对象

在编写 JavaScript 函数时，处理外部传入的数据是每段业务逻辑的必经入口。从早期的 ES5 时代到现代 ES6+ 规范，JavaScript 对函数参数的处理方式发生了深刻变革：早期的 arguments 对象为处理不定参数提供了基础支撑，但也带来了伪数组操作繁琐与性能损耗；而 ES6 引入的参数默认值与剩余参数（Rest Parameters），则从语法层面补齐了声明式、类型纯粹的现代传参机制。本文将系统剖析这三种机制的运作原理、执行细节与选型边界，帮助你在实际开发中写出健壮且符合规范的代码。

一、函数参数默认值（Default Parameters）

在 ES6 之前，如果调用者漏传了某个参数，该参数在函数体内的值默认为 undefined。为了防止逻辑崩溃，开发者通常需要在函数体顶部手工编写防范代码，最常见的做法是借助逻辑或运算符 ||：

// 传统防范写法
function queryData(endpoint, timeout) {
  timeout = timeout || 3000;
  console.log(`向 ${endpoint} 发送请求，超时时间：${timeout}ms`);
}

但这种写法存在隐蔽缺陷：逻辑或运算符会在左侧表达式为任意假值（Falsy）时触发替代值。如果调用者显式传入数值 0、布尔值 false 或空字符串 ""，逻辑或会错误地将其覆盖为 3000。ES6 的参数默认值语法从根本上规范了这一行为。

1. 触发时机与 undefined 判定边界

ES6 规定：仅当对应实参未传递，或显式传递了 undefined 时，才会触发默认值求值。如果传入的是 null、0、false 或 NaN，参数都会如实接收该值，而不会被默认值覆盖。

function configure(port = 8080, debug = true, logPath = null) {
  return { port, debug, logPath };
}

configure();               // { port: 8080, debug: true, logPath: null }
configure(undefined, false); // { port: 8080, debug: false, logPath: null }
configure(0, null);        // { port: 0, debug: null, logPath: null }，0 与 null 均如实传入

2. 默认值的惰性求值（Lazy Evaluation）

JavaScript 中的参数默认值不是在函数定义时静态计算的，而是在函数每次被调用且该参数需要使用默认值时，才进行即时（惰性）求值。这一机制使得默认值可以动态调用函数或生成唯一标识。

let callCount = 0;
function getRequestId() {
  callCount++;
  return `REQ_${Date.now()}_${callCount}`;
}

// 每次未传 id 时都会单独执行 getRequestId()
function recordLog(message, id = getRequestId()) {
  console.log(`[${id}] ${message}`);
}

recordLog("首次提交"); // 调用 getRequestId()，callCount 为 1
recordLog("重试操作"); // 再次调用 getRequestId()，callCount 为 2
recordLog("指定标识", "CUSTOM_001"); // 未触发 getRequestId()，callCount 仍为 2

3. 参数作用域与暂存死区（TDZ）

当函数声明了默认参数时，JavaScript 引擎会在参数求值阶段创建一个独立的中间参数作用域，该作用域介于外层作用域与函数体内部作用域之间。参数列表按照从左向右的顺序依次初始化：

• 右侧的默认参数可以合法引用位于其左侧、已初始化完成的参数（例如 function createBox(width, height = width * 2)）。
• 左侧参数若试图引用右侧尚未初始化的参数，则会触发暂存死区（Temporal Dead Zone, TDZ），抛出 ReferenceError。
• 参数作用域不能访问函数体内部使用 let/const/var 声明的局部变量。

4. 默认值与解构赋值结合

在编写接受配置对象（Options Object）的函数时，将参数默认值与对象解构相结合，能够优雅地实现多层级的安全兜底：

// 既为属性指定默认值，又为最外层对象指定空对象兜底
function renderChart({
  width = 600,
  height = 400,
  theme = "light",
  showLegend = true
} = {}) {
  console.log(`渲染图表：${width}x${height}，主题：${theme}`);
}

renderChart({ width: 800 }); // 正常运行，height 与 theme 采用默认值
renderChart();              // 即使不传任何参数也不会报错 TypeError: Cannot read property of undefined

二、剩余参数（Rest Parameters）

在处理不确定数量的输入项（如计算多个数字的总和、事件派发时的载荷转发）时，ES6 提供了剩余参数语法 ...identifier。它允许函数将多余的未命名实参聚合成一个真正的数组。

1. 语法形式与核心特性

剩余参数与传统处理机制相比，拥有三大决定性特征：

1. 真正的 Array 实例：剩余参数创建的是纯正的 JavaScript 数组，可以直接调用 .map()、.filter()、.reduce()、.sort() 等所有 Array.prototype 上的方法，无需任何前置转换。
2. 语义精准，只收集剩余部分：普通形参负责接收固定位置的参数，剩余参数只捕获多出来的参数，分工清晰。
3. 位置唯一性与尾部约束：剩余参数必须是形参列表中的最后一个参数，其后不能再出现任何逗号或其他形参；每个函数最多只能定义一个剩余参数。

// 正确用法：前两个参数单独特化，后续所有数值纳入 rest 数组
function calculateBill(baseFee, taxRate, ...itemPrices) {
  const itemsTotal = itemPrices.reduce((sum, price) => sum + price, 0);
  return (baseFee + itemsTotal) * (1 + taxRate);
}

console.log(calculateBill(50, 0.08, 12, 34, 88)); // 207.36

// 语法错误示例：
// function invalid(...items, last) {} // SyntaxError: Rest parameter must be last formal parameter

2. 剩余参数与解构赋值配合

剩余参数不仅能直接声明为数组变量，还能在参数签名处直接配合数组解构提取特定位置的数据：

// 提取前两项剩余实参，同时将其余项收集至 tail
function coordinatePipeline(firstTag, ...[x, y, ...tail]) {
  console.log(`标签: ${firstTag}, 核心坐标: (${x}, ${y}), 附加数据量: ${tail.length}`);
}

coordinatePipeline("TRACK_A", 10, 20, 30, 40, 50);
// 打印：标签: TRACK_A, 核心坐标: (10, 20), 附加数据量: 3

三、传统基石：arguments 伪数组对象

在 ES6 出现前的十多年中，arguments 是 JavaScript 处理可变参数的唯一内建工具。虽然在现代开发中大多已被剩余参数取代，但理解它的内部机制对于维护既有类库、理解闭包以及排查底层问题依然不可或缺。

1. arguments 的数据特征

在所有使用 function 关键字声明的非箭头函数中，JavaScript 运行时会自动注入一个名为 arguments 的局部变量。其特性包括：

• 它是一个类数组对象（Array-like Object），其属性名为以零递增的整数字符串（"0"、"1"、"2"），并附带一个 length 属性。
• 它没有 Array.prototype 上的内置迭代方法。如果要使用 .filter()，必须先行转换：

  // 转换方式 1：ES6 Array.from（推荐）
  const argsArray = Array.from(arguments);
  
  // 转换方式 2：ES5 借调数组切片方法
  const argsArrayES5 = Array.prototype.slice.call(arguments);

2. 严格模式与非严格模式的形参绑定差异

arguments 最容易令人困惑的特性是其在非严格模式（Sloppy Mode）下与命名形参之间的双向动态绑定机制。当你在函数内修改形参的值时，arguments 对应的索引项会同步变化；反之亦然。然而在严格模式（Strict Mode）下，这种绑定被完全切断。

// 场景 1：非严格模式（默认）
function sloppyDemo(a, b) {
  a = 99;
  console.log(arguments[0]); // 99！发生双向同步联动
  arguments[1] = 88;
  console.log(b);            // 88！同步被改写
}
sloppyDemo(1, 2);

// 场景 2：严格模式
function strictDemo(a, b) {
  "use strict";
  a = 99;
  console.log(arguments[0]); // 1！绑定被切断，arguments 保留初始传入快照
  arguments[1] = 88;
  console.log(b);            // 2！形参变量保持独立
}
strictDemo(1, 2);

3. 箭头函数中的 arguments 穿透现象

箭头函数内部没有自己的 arguments 绑定。如果在箭头函数中直接访问 arguments，该标识符会像普通变量一样，沿着作用域链向上查找其外层包含函数的 arguments：

function outerFunction(outerA, outerB) {
  const innerArrow = (innerX) => {
    // 此时访问的是 outerFunction 的 arguments，而不是 innerArrow 的参数
    console.log(`外层实参总数: ${arguments.length}`);
    console.log(`首个外层实参: ${arguments[0]}`);
  };

  innerArrow(999);
}

outerFunction("Alpha", "Beta");
// 打印：
// 外层实参总数: 2
// 首个外层实参: Alpha

如果希望在箭头函数中收集自身的不定参数，唯一且标准的方式是使用剩余参数 (...args) => { ... }。

四、三者核心维度对比与技术选型

为了在实际项目中做出精准的技术选型，我们将默认参数、剩余参数与 arguments 对象的各项核心能力整理对比：

特性维度	参数默认值（Default）	剩余参数（Rest）	arguments 对象
所属规范版本	ECMAScript 2015 (ES6)	ECMAScript 2015 (ES6)	ECMAScript 1.0 (经典遗留)
数据载体类型	对应的独立局部变量	纯正的 Array 实例	类数组对象（Object）
数组方法支持	取决于变量自身类型	原生支持 map/filter/reduce 等全部方法	无内置方法，需手动转换
收集范围	单一位置参数兜底	仅收集未被命名的剩余参数	捕获传入该函数的全部实参
箭头函数兼容性	完全支持	完全支持	不支持（会穿透查找外层普通函数）
对函数 length 的影响	首个默认参数及之后的参数不计入	剩余参数不计入 fn.length	不影响声明形参的 fn.length
引擎优化友好度	极高（参数作用域边界清晰）	极高（无需对象模拟与逃逸）	较低（尤其非严格模式下的双向绑定）

五、常见问题与注意事项

1. 为什么设置了默认参数后，函数的 length 属性变小了？
   在 ECMAScript 规范中，函数的 .length 属性代表该函数预期期望接收的必须实参数量。一旦在某个位置定义了默认值，该位置以及其后所有参数都会被视为“可选参数”，因此 length 只统计第一个具有默认值的形参之前的形参个数。同样，剩余参数（...args）由于代表可选收集项，也不会被计入 length。
2. 传递 null 时想要触发默认值，应该怎么处理？
   语言规范中默认参数仅针对 undefined 触发。如果业务上确实需要将 null 视为缺失值并替换为默认项，可以使用 ES2020 引入的空值合并运算符（Nullish Coalescing Operator ??）在函数体内进行显式处理：

   function handleAvatar(url) {
     // 无论传入 undefined 还是 null，都会回退到默认头像
     const safeUrl = url ?? "/images/default-avatar.png";
     return safeUrl;
   }

3. 解构参数如果调用时不传参数会怎样？
   如果声明为 function render({ theme = "dark" }) 且直接调用 render()，由于没有实参传入，解构源为 undefined，运行时会直接抛出 TypeError: Cannot destructure property 'theme' of undefined。务必在最外层附带一个默认空对象兜底：function render({ theme = "dark" } = {})。