JavaScript函数参数处理技巧：默认值与剩余参数用法

在编写 JavaScript 函数时，处理缺省参数和不定数量的输入实参是极其高频的需求。ES6 引入的参数默认值（Default Parameters）与剩余参数（Rest Parameters）从语言规范层面重构了传参模型，不仅大幅消除了传统防御性代码中的冗长判断，还避免了隐式类型转换导致的边界 Bug。本文将系统梳理这两项特性的底层求值逻辑、关键区别与工程实战中的设计模式。

一、参数默认值的核心语法与惰性求值

在 ES6 之前，为形参设定默认值通常依赖逻辑或运算（如 b = b || 1）或在函数体内部检测 typeof b === 'undefined'。现代 JavaScript 允许直接在函数参数声明中指定缺省表达式：

function calculateTotal(price, tax = 0.05, discount = 0) {
  return price * (1 + tax) - discount;
}

console.log(calculateTotal(100)); // 105 (tax使用0.05, discount使用0)
console.log(calculateTotal(100, 0.1)); // 110 (tax使用0.1, discount使用0)

理解默认参数的关键在于惰性求值（Lazy Evaluation）：默认值表达式并不是在函数定义解析时立即计算，而是在函数被实际调用且对应实参未传递时才会执行计算。

let callCount = 0;
function getNextId() {
  callCount += 1;
  return `ID_${callCount}`;
}

function registerUser(name, id = getNextId()) {
  return { name, id };
}

registerUser("Alice", "custom_01"); // 不会触发 getNextId()，callCount 仍为 0
registerUser("Bob"); // 触发 getNextId()，返回 ID_1

此外，位于后方的默认参数可以引用前面已经解析完成的形参，但反向引用则会触发暂时性死区（TDZ, Temporal Dead Zone）的 ReferenceError：

// 合法：后方参数引用前方已声明参数
function makeRange(min, max = min * 2) {
  return [min, max];
}

// 错误：前方参数引用后方未初始化的参数，报错 ReferenceError
function invalidRange(min = max / 2, max = 10) {
  return [min, max];
}

二、默认参数与逻辑或(||)、空值合并(??)的差异

在历史项目中，许多开发者习惯使用 param = param || defaultValue 的形式设定保底值。然而，逻辑或运算是基于真值/假值（Truthy/Falsy）进行判断的，这会导致合法假值（如数字 0、空字符串 ""、布尔值 false）被意外覆盖。

相比之下，ES6 参数默认值的触发机制极其严格：仅当对应位置未传递实参，或者实参值为严格的 undefined 时，才会启用默认值。如果显式传入 null、0 或 false，默认值不会生效。

传入实参	ES6 默认参数 (x = 10)	短路或 x = x || 10	空值合并 x = x ?? 10
undefined / 未传	10（生效）	10（生效）	10（生效）
null	null（保留实参）	10（被假值覆盖）	10（生效）
0	0（保留实参）	10（错误覆盖数字0）	0（保留实参）
""（空字符串）	""（保留实参）	10（错误覆盖空串）	""（保留实参）
false	false（保留实参）	10（错误覆盖布尔值）	false（保留实参）

三、剩余参数（Rest Parameters）语法与工作机制

当一个函数需要接收未知数量的实参时，ES6 提供了剩余参数（Rest Parameters）语法，使用三个连续的点号 ... 作为前缀。剩余参数会将调用方传入的富余实参聚合为一个标准数组。

function summarize(category, ...items) {
  console.log("类别:", category);
  console.log("条目总数:", items.length);
  // items 是纯正的 Array 实例，直接调用 reduce
  const total = items.reduce((sum, current) => sum + current, 0);
  return { category, total, items };
}

summarize("图书销量", 12, 45, 89, 23);
// 类别: 图书销量
// 条目总数: 4
// total: 169

使用剩余参数时必须遵守两项语法约束：

1. 唯一性：一个函数声明中只能存在一个剩余参数。
2. 必须置于末尾：剩余参数只能是参数列表中的最后一个形参。例如 function fn(...rest, last) 会直接抛出语法错误 SyntaxError: Rest parameter must be last formal parameter。

四、剩余参数与传统 arguments 对象的本质对比

在 ES6 出现前，动态参数依赖函数内建的 arguments 对象。虽然二者都能读取多余实参，但在内存模型、原型继承及现代语法兼容性上存在本质区别：

• 真正的数组 vs 类数组对象：剩余参数是标准的 Array 实例，天生拥有 map、filter、reduce、forEach 等全部数组方法；而 arguments 只是一个具备 length 属性和整数索引的对象，若要执行数组操作，必须通过 Array.from(arguments) 或 Array.prototype.slice.call(arguments) 借用方法。
• 命名范围与纯粹性：arguments 包含所有传入实参（包含已被前置形参捕获的部分）；剩余参数只包含那些未被前面形参捕获的真正剩余项。
• 箭头函数支持：箭头函数本身没有属于自己的 arguments 绑定，如果在箭头函数中访问 arguments，获取到的是其外层普通函数的变量；而剩余参数完全支持箭头函数。

五、工程实用模式：解构赋值与参数拦截

1. 配置对象解构与双层默认值防崩模式

在封装复杂的 API、网络请求库或 UI 组件时，通常使用配置对象（Options Object）传参。将对象解构与默认值结合，并为整体配置对象赋予空对象保底 = {}，是防止 TypeError: Cannot read properties of undefined 的标准模式：

// 健壮的配置解构模式
function fetchData(url, { method = 'GET', headers = {}, timeout = 3000 } = {}) {
  console.log(`发起 ${method} 请求至 ${url}，超时设定 ${timeout}ms`);
}

// 正常传参
fetchData('/api/users', { method: 'POST', timeout: 5000 });

// 不传第二个参数，也不会因为解构 undefined 而报错
fetchData('/api/status'); 
// 输出: 发起 GET 请求至 /api/status，超时设定 3000ms

2. 高阶函数与参数透传

剩余参数与展开语法（Spread Syntax）是高阶函数、切面编程（AOP）及日志装饰器中的黄金组合：

function withLogger(targetFn) {
  // 使用剩余参数收集所有入参
  return function wrappedFunction(...args) {
    const startTime = performance.now();
    console.log(`[调用开始] 参数:`, args);

    // 使用展开语法无缝透传参数
    const result = targetFn.apply(this, args);

    const duration = (performance.now() - startTime).toFixed(2);
    console.log(`[调用完成] 耗时 ${duration}ms，返回值:`, result);
    return result;
  };
}

const add = (a, b, c) => a + b + c;
const loggedAdd = withLogger(add);
loggedAdd(10, 20, 30); // 准确打印参数 [10, 20, 30] 并返回 60

六、必须警惕的边界细节与注意事项

• 对函数 length 属性的影响：函数的 length 属性用于表示预期形参数量。一旦设置了默认参数，length 仅统计第一个带默认值形参之前的参数数量；且剩余参数完全不计入 length。

  (function(a, b, c) {}).length;        // 3
  (function(a, b = 1, c) {}).length;    // 1 (b有默认值，其后均不计入)
  (function(a, ...rest) {}).length;     // 1 (剩余参数不计入)
  

• 默认参数拥有独立的参数作用域：当形参包含默认表达式时，JavaScript 会在函数声明与函数体执行上下文之间创建一个临时参数作用域。函数体内部声明的 let/const 同名变量不能覆盖默认参数表达式里的变量查找。
• 显式传递 null 的语义：在 JSON 通信中 null 常代表“空”或“清除”。调用 fn(null) 绝不会触发默认值。若业务需要对 null 和 undefined 均做缺省回退，应在函数体内搭配空值合并运算符 value ?? defaultValue 处理。

七、总结

参数默认值与剩余参数使 JavaScript 函数具备了表达力强、语法严谨的输入接口。通过默认参数的惰性求值与 undefined 严格判定，避免了旧时代 || 带来的假值陷阱；借助 ...rest 剩余参数，则彻底解决了 arguments 伪数组难操作、箭头函数无法兼容等痛点。结合解构赋值与空对象兜底，能够为日常开发提供兼具健壮性与可读性的工程化代码。