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

在编写 JavaScript 函数时，处理外部传入的数据是核心日常工作。早期的函数往往充斥着手动默认值兜底、对 arguments 伪数组的切片转换，以及繁复的属性取值代码。ECMAScript 2015（ES6）引入的参数默认值、剩余参数与解构赋值三大特性，彻底改变了参数定义的方式，将防御性代码直接提升为清晰的声明式契约。本文将逐一梳理这三项语法的具体规则、运行机制、组合技巧与易错边界，帮助你在实际开发中写出健壮且自解释的函数签名。

一、默认参数值（Default Parameters）

默认参数允许我们在函数定义中为形参预先指定一个后备值。当调用方没有为该形参传值，或者传入的值严格等于 undefined 时，该后备值就会生效。

1. 基本语法与生效条件

在 ES6 之前，常见的写法是 b = b || 10。但这种写法存在经典缺陷：如果传入 0、false 或空字符串 ""，由于它们属于假值（Falsy），会导致默认值被非预期地触发。现代默认参数只在形参为 undefined 时生效。

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));         // 输出: 10
console.log(multiply(5));            // 输出: 5（未传 b，取默认值 1）
console.log(multiply(5, undefined)); // 输出: 5（传 undefined，触发默认值）
console.log(multiply(5, null));      // 输出: 0（null 是有效对象值，不触发默认值，5 * null 转为 0）
console.log(multiply(5, 0));         // 输出: 0（0 是有效数字，不触发默认值）

2. 默认参数的惰性求值与独立作用域

JavaScript 的参数默认值并不是在解析函数声明时固化的，而是在函数被调用的运行期按需执行，这被称为“惰性求值”（Lazy Evaluation）。如果调用时提供了有效实参，默认表达式根本不会执行。

let callCount = 0;
function getDefaultValue() {
  callCount += 1;
  return callCount * 10;
}

function process(data = getDefaultValue()) {
  return data;
}

console.log(process(100)); // 输出: 100，getDefaultValue 未执行
console.log(callCount);    // 输出: 0
console.log(process());    // 输出: 10，触发惰性求值
console.log(callCount);    // 输出: 1
console.log(process());    // 输出: 20，每次调用独立求值
console.log(callCount);    // 输出: 2

此外，当函数存在默认参数时，参数列表会形成一个独立的参数作用域。该作用域介于全局（或外层函数）作用域与函数体内部作用域之间。后声明的参数可以访问先声明的参数，但反向访问会触发暂时性死区（TDZ）：

// 正确：后置参数引用前面的参数
function createRect(width, height = width * 2) {
  return { width, height };
}
console.log(createRect(10)); // { width: 10, height: 20 }

// 错误：前置参数引用后置参数，触发 TDZ 报错 ReferenceError
function badFunc(x = y, y = 2) {
  return x + y;
}
// badFunc(); // Uncaught ReferenceError: Cannot access 'y' before initialization

二、剩余参数（Rest Parameters）

剩余参数语法（...args）允许我们将不定数量的实参表示为一个真正的 JavaScript 数组。在过去，处理可变参数只能依赖 arguments 对象，而 arguments 带来了一系列开发痛点。

1. 剩余参数与 arguments 的核心差异

通过以下对比表格可以清楚看出两者的本质区别：

对比维度	剩余参数（...rest）	传统 arguments 对象
数据类型	真正的 Array 实例，可直接使用 map、filter 等数组方法	类数组对象（Arguments），必须通过 Array.from() 转换才能使用数组方法
包含内容	仅包含未被显式命名的“剩余”实参	包含传给函数的所有实参（全部参数）
箭头函数支持	完全支持	不支持（箭头函数内部没有自身的 arguments）
位置限制	必须位于形参列表的末尾	不占用形参槽位

2. 语法规范与使用限制

剩余参数在语法上有两项严格规则：

1. 唯一性：一个函数签名中最多只能包含一个剩余参数。
2. 末尾性：剩余参数必须是形参列表中的最后一个参数。在其后面添加任何参数都会抛出 SyntaxError。

// 正确用法：前两个参数具名绑定，剩余所有参数归集为数组
function buildUrl(domain, protocol = 'https', ...paths) {
  return `${protocol}://${domain}/${paths.join('/')}`;
}

console.log(buildUrl('api.example.com', 'https', 'v1', 'users', 'list'));
// 输出: "https://api.example.com/v1/users/list"

// 语法错误示例：剩余参数后不能再有其他参数
// function invalid(a, ...rest, b) {} // SyntaxError: Rest parameter must be last formal parameter

三、参数解构赋值（Destructuring）

当函数入参超过三个，或者参数具有明确的配置属性时，使用对象传参（Options Object 模式）可以避免调用时“实参顺序记错”的问题。在形参中直接使用解构赋值，能够瞬间把传入对象的字段展开为函数内部可直接使用的局部变量。

1. 对象解构与重命名

可以在形参中直接指定要解构的键名，并按需使用冒号语法进行重命名：

function renderUser({ id, name, role: userRole = 'member' }) {
  // id, name 直接可用；role 被重命名为 userRole，并带有后备值 'member'
  console.log(`[${userRole}] ${name} (ID: ${id})`);
}

renderUser({ id: 101, name: 'Alice' }); 
// 输出: "[member] Alice (ID: 101)"

2. 经典陷阱：双层默认值防护机制

很多开发者在使用对象解构传参时，经常遭遇 TypeError: Cannot destructure property 'x' of undefined 错误。这是因为只给解构的内部属性设置了默认值，却没有为解构对象本身提供后备值。

看下面的对比示例，理解外层 = {} 的必要性：

// 存在隐患的写法：只有内层默认值
function requestBad({ timeout = 5000, method = 'GET' }) {
  console.log(method, timeout);
}
requestBad({ timeout: 1000 }); // 正常运行: GET 1000
// requestBad();               // 抛出 TypeError: Cannot read properties of undefined

// 严谨的双层防御写法：同时具备内层与外层默认值
function requestSafe({ timeout = 5000, method = 'GET' } = {}) {
  console.log(method, timeout);
}
requestSafe();                 // 正常运行，输出: GET 5000
requestSafe({ method: 'POST' }); // 正常运行，输出: POST 5000

当执行 requestSafe() 时，实参为 undefined，外层默认值 = {} 生效，解构引擎在空对象 {} 上进行解构，从而平滑触发内层 timeout = 5000 与 method = 'GET'，避免了运行时崩溃。

四、三者的综合运用与排列顺序规范

在复杂的业务函数中，我们经常需要把普通固定参数、解构配置项、默认参数与剩余参数混合使用。JavaScript 引擎对参数声明顺序有着明确的语法与工程学要求。

1. 参数顺序的标准推荐规范

为了保证调用的直观性与可靠性，参数应严格遵循以下递进顺序：

1. 必需位置参数（Required Positional Parameters）：调用方必须明确提供的核心标识或数据源（如 url, id）。
2. 带默认值的普通参数：次要参数，但依然按位置传入。
3. 解构配置对象（Destructured Options）：提供命名的扩展配置项，并带 = {} 外层防护。
4. 剩余参数（Rest Parameters）：用于收集剩余的全部可变参数，必须位于签名绝对末尾。

2. 综合实战示例

下面是一个集成必需参数、默认参数、对象解构以及剩余参数的综合函数实现：

/**
 * 发起网络请求的封装函数
 * @param {string} endpoint - 必选位置参数：请求路径
 * @param {number} timeout - 可选位置参数：超时时间（默认 3000ms）
 * @param {Object} options - 命名配置参数（双层解构防御）
 * @param {...string} queryTags - 剩余参数：打在请求日志中的标签列表
 */
function apiRequest(
  endpoint,
  timeout = 3000,
  { method = 'GET', headers = {}, retries = 2 } = {},
  ...queryTags
) {
  if (!endpoint) {
    throw new Error('endpoint is required');
  }

  return {
    endpoint,
    timeout,
    method,
    headers,
    retries,
    queryTags, // Array 实例，直接拥有数组方法
    timestamp: Date.now()
  };
}

// 调用示例 1：使用绝大部分默认配置
console.log(apiRequest('/users'));
/* 输出:
{
  endpoint: '/users',
  timeout: 3000,
  method: 'GET',
  headers: {},
  retries: 2,
  queryTags: [],
  timestamp: 1718000000000
}
*/

// 调用示例 2：自定义配置并传入标签
console.log(apiRequest(
  '/orders',
  5000,
  { method: 'POST', retries: 0 },
  'finance',
  'urgent'
));
/* 输出:
{
  endpoint: '/orders',
  timeout: 5000,
  method: 'POST',
  headers: {},
  retries: 0,
  queryTags: ['finance', 'urgent'],
  timestamp: 1718000000000
}
*/

五、常见易混淆细节与排错指南

在日常编码和代码审查中，以下几个边界情况极易引发隐藏缺陷：

1. 函数的 length 属性计算规则

函数的 length 属性用于反映其预期接收的参数个数。但一旦引入默认参数、剩余参数或解构赋值，其计算方式会发生显著变化：

• length 只统计第一个具有默认值的参数之前的参数个数。一旦遇到默认参数，计数立即终止。
• 剩余参数完全不计入 length。

console.log((function(a, b, c) {}).length);          // 3
console.log((function(a, b = 1, c) {}).length);      // 1（b 有默认值，后面的 c 也不再计入）
console.log((function(a, ...rest) {}).length);       // 1（剩余参数不计入）
console.log((function({ x, y } = {}) {}).length);    // 0（第一个参数已有默认值）

这对于依赖 fn.length 实现柯里化（Currying）或自动注入的框架尤为重要，应避免在参数前部轻易放置默认值。

2. 解构重命名与默认值的语法次序

解构时同时重命名和设置默认值，容易混淆冒号与等号的位置。牢记记忆口诀：冒号负责更名，等号负责赋值，且必须先更名后赋默认值。

// 正确：从入参 options 中提取 source 属性，在当前作用域命名为 src，后备值为 'default.png'
function loadImage({ source: src = 'default.png' }) {
  console.log(src);
}

// 错误语法：颠倒顺序会导致解析报错
// function badImage({ source = 'default.png': src }) {} // SyntaxError

六、总结

现代 JavaScript 的参数语法不仅简化了代码结构，更从语法层面确立了函数的契约形式：

• 默认参数值以 === undefined 为严格触发条件，通过运行期惰性求值带来高性能与灵活性。
• 剩余参数摒弃了 arguments 伪数组的历史包袱，提供类型统一、支持箭头函数的现代化可变参数方案。
• 参数解构赋值结合“外层空对象兜底 + 内层字段默认值”的双层防护模式，能优雅兼顾调用便利性与执行安全性。

在日常架构设计中，推荐以“必需位置参数 > 可选默认参数 > 命名配置解构 > 剩余参数”的标准顺序规范函数接口，使代码兼备出色的可维护性与健壮性。