JavaScript函数参数高级用法：默认值、解构赋值与剩余参数

在现代 JavaScript（ECMAScript 6+）中，函数参数的处理方式发生了彻底的变革。通过引入参数默认值、解构赋值与剩余参数（Rest Parameters），开发者不再需要依赖繁琐的手动判断或弱类型的 arguments 对象，就能编写出类型安全、语义清晰且易于维护的函数签名。本文将系统梳理这三大核心特性的工作机制、执行细节以及组合进阶模式。

一、参数默认值：求值时机与独立作用域

在 ES5 时代，处理可选参数通常依赖逻辑或运算符 options = options || {} 或显式检查 typeof arg !== 'undefined'。这种旧方式不仅冗长，而且存在严重缺陷：当传入假值（例如数字 0、空字符串 "" 或布尔值 false）时，逻辑或运算符会误判并将预设默认值覆盖上去。

ES6 引入的原生参数默认值规范明确规定：仅当对应形参未传入实参，或者显式传入 undefined 时，才会触发默认值赋值。传入 null、0、NaN 或 false 等合法数据均不会触发默认值覆盖。

function initializeLogger(prefix = 'APP', level = 1) {
  console.log(`[${prefix}] 调试级别: ${level}`);
}

// 示例调用对比
initializeLogger();                 // 输出: [APP] 调试级别: 1
initializeLogger('SYS', undefined); // 输出: [SYS] 调试级别: 1 (undefined 触发默认值)
initializeLogger('SYS', 0);         // 输出: [SYS] 调试级别: 0 (0 保留，不被覆盖)
initializeLogger(null, 2);          // 输出: [null] 调试级别: 2 (null 视为有效实参)

1. 惰性求值特性

JavaScript 参数默认值不是在函数声明解析时计算的，而是在函数每次调用且实参为 undefined 时即时执行（Lazy Evaluation）。这意味着可以使用函数调用或动态表达式作为默认值：

let requestId = 0;
function generateId() {
  return ++requestId;
}

// 每次缺省调用，generateId 才会执行一次
function createSession(user, id = generateId()) {
  return { id, user, timestamp: Date.now() };
}

console.log(createSession('Alice').id); // 1
console.log(createSession('Bob').id);   // 2
console.log(createSession('Charlie', 999).id); // 999 (未调用 generateId)

2. 参数独立作用域与暂时性死区（TDZ）

当函数声明了默认参数时，参数会被初始化在一个独立的外部作用域中。参数从左向右依次初始化，右侧参数的默认值可以访问左侧已经初始化的参数，但反向引用则会触发暂时性死区（Temporal Dead Zone）：

// 正确用法：右侧使用已初始化的左侧参数
function buildArea(width, height = width * 2) {
  return width * height;
}

// 错误用法：左侧引用未声明初始化的右侧参数
function invalidArea(width = height * 2, height = 10) {
  return width * height;
}
// 调用 invalidArea() 将抛出 ReferenceError: Cannot access 'height' before initialization

二、解构赋值：灵活配置项与别名映射

在面对参数较多或需要支持丰富配置项的函数时，“配置对象（Options Pattern）”是工业界最标准的设计规范。结合解构赋值，形参可以直接以声明式的方式解包对象属性，不仅省去了函数体内多行赋值语句，还提高了参数可读性。

1. 属性提取、默认值与重命名

在解构参数时，可以同时进行属性提取、重命名（Alias）以及设置属性默认值。如下例所示，外部接口常使用蛇形命名 max_retry，在函数内部可以通过别名机制无缝转为驼峰命名的局部变量：

interface RequestConfig {
  url: string;
  method?: string;
  max_retry?: number;
}

function sendHttpRequest({
  url,
  method = 'GET',
  max_retry: maxRetry = 3 // 重命名为 maxRetry，并提供默认值 3
} = {}) {
  console.log(`发起 ${method} 请求至 ${url}，最大重试次数: ${maxRetry}`);
}

sendHttpRequest({ url: '/api/v1/users', max_retry: 5 });
// 输出: 发起 GET 请求至 /api/v1/users，最大重试次数: 5

2. 嵌套对象解构与数组解构

除了扁平对象外，解构赋值还支持嵌套解构与数组解构：

• 嵌套解构：用于处理树形或分组配置，例如 function render({ style: { color = '#000', fontSize = 14 } = {} } = {})。同样需要为嵌套层级指定默认空对象，避免父级属性缺失时报错。
• 数组解构：适合用于表示坐标、向量、范围或类似 React Hooks 的元组结构，例如 function setCoordinates([x = 0, y = 0] = [])。

三、剩余参数：汇聚不定实参为真数组

在 ES6 之前，处理可变长度的实参必须依赖内部隐式声明的 arguments 对象。然而 arguments 存在许多固有的设计缺陷：它只是“类数组对象（Array-like）”，不具备 map、filter、reduce 等真正的数组原型方法，且在箭头函数中不可用。

ES6 剩余参数（Rest Parameters）使用 ...name 语法，能够将所有未对应具名形参的剩余实参自动聚合为一个真正的标准 Array 实例。

// 剩余参数将尾部所有数据聚合成真正的数组
function calculateTotal(taxRate, ...prices) {
  // prices 是纯正的 Array 实例，可以直接调用 map/reduce
  const subtotal = prices.reduce((sum, current) => sum + current, 0);
  return subtotal * (1 + taxRate);
}

const total = calculateTotal(0.08, 100, 250, 45);
console.log(`含税总额: ${total.toFixed(2)}`); // 输出: 含税总额: 426.60

四、三大特性的核心差异与选型决策

在实际工程开发中，这三者并非孤立存在，而是针对不同维度的参数管理诉求提供解决方案。以下为三者的特性横向对比与选型维度表：

特性名称	主要解决的问题	触发条件 / 语法位置	核心注意事项
参数默认值	防止缺省参数导致 undefined 逻辑错误，替代易误判的 || 运算符。	实参为 undefined 时求值；可作用于任意形参位置。	惰性求值特性；右侧可访问左侧参数，左侧不可访问右侧（TDZ）。
解构赋值	简化配置对象（Options）读取，消除样板代码，支持别名映射。	形参定义处使用 { key } 或 [item] 模式。	务必配合外层 = {} 兜底，避免不传参时触发解包 TypeError。
剩余参数	汇聚不定长实参，彻底取代非数组的 arguments 对象。	使用 ...name，必须位于形参列表最后且只能出现一次。	返回纯正 Array 实例；箭头函数内完美支持。

五、工程综合实战：组合签名模式

在大型前端与 Node.js 库的开发中，通常会将上述三种特性组合使用。例如在封装一个通用的网络请求与中间件调度客户端时，推荐采用如下模式：

/**
 * 工业级请求包装函数
 * @param {string} endpoint 必选资源路径
 * @param {Object} options 可选配置对象（解构 + 双层默认值）
 * @param {...Function} interceptors 尾部变长拦截器中间件
 */
function requestClient(
  endpoint,
  {
    method = 'GET',
    timeout = 5000,
    headers: { 'Content-Type': contentType = 'application/json', ...customHeaders } = {}
  } = {},
  ...interceptors
) {
  const initialContext = {
    endpoint,
    method,
    timeout,
    headers: { 'Content-Type': contentType, ...customHeaders },
    timestamp: Date.now()
  };

  // 管道化依次执行各拦截器函数
  return interceptors.reduce((ctx, interceptor) => {
    return typeof interceptor === 'function' ? interceptor(ctx) : ctx;
  }, initialContext);
}

// 实际使用调用示例
const logInterceptor = ctx => { console.log(`[日志] 请求 ${ctx.endpoint}`); return ctx; };
const authInterceptor = ctx => { ctx.headers['Authorization'] = 'Bearer token-xyz'; return ctx; };

// 既不传额外配置，也不传拦截器，依然安全执行
const res1 = requestClient('/api/health');

// 传递部分配置与多个拦截器
const res2 = requestClient(
  '/api/users',
  { method: 'POST', timeout: 10000 },
  logInterceptor,
  authInterceptor
);

通过合理运用参数默认值进行安全缺省、解构赋值提供自解释的配置项、剩余参数承接扩展中间件，函数的健壮性与调用灵活性均得到了显著提升。