JS函数参数处理：默认值、剩余参数与解构赋值代码演示

一、默认参数（Default Parameters）：原理、语法与触发机制

在 ES6 之前，为函数形参设置缺省值通常依赖逻辑或运算符（||）。但这种写法存在致命的隐式类型转换陷阱：当调用方传入有效的假值（如数字 0、空字符串 "" 或布尔值 false）时，逻辑或表达式依然会强制取右侧的默认值，导致程序逻辑错误。

// 传统写法的假值陷阱
function setPagination(page, pageSize) {
  page = page || 1;
  pageSize = pageSize || 10;
  return `当前页: ${page}, 每页: ${pageSize} 条`;
}

console.log(setPagination(0, 20)); 
// 输出: "当前页: 1, 每页: 20 条"（数字 0 被错误覆盖为 1）

// ES6 默认参数写法
function setPaginationModern(page = 1, pageSize = 10) {
  return `当前页: ${page}, 每页: ${pageSize} 条`;
}

console.log(setPaginationModern(0, 20)); 
// 输出: "当前页: 0, 每页: 20 条"（准确保留了传入的 0）
console.log(setPaginationModern(undefined, 20)); 
// 输出: "当前页: 1, 每页: 20 条"（唯有 undefined 触发默认值）
console.log(setPaginationModern(null, 20)); 
// 输出: "当前页: null, 每页: 20 条"（null 不等同于 undefined，不会触发默认值）

1. 触发规则：仅对 undefined 生效

JavaScript 规范中明确规定，默认参数只有在对应的实参未提供或严格等于 undefined 时才会被触发执行。若显式传入 null、NaN、false 或 0，引擎均视为调用者主动赋予了有效值，因此不会启用默认参数。

2. 惰性求值与独立作用域

JavaScript 的默认参数表达式具有惰性求值（Lazy Evaluation）特性：默认值表达式不会在函数声明时执行，而是在函数每次被调用且满足触发条件时才动态计算。此外，一旦函数存在默认参数，形参在求值期间会被置于一个独立的“形参作用域（Parameter Scope）”，该作用域位于函数体外层，先于函数体初始化。

let callCount = 0;
function getTraceId() {
  callCount++;
  return `trace-${Date.now()}-${callCount}`;
}

// getTraceId 仅在未传 traceId 时才会被执行
function createLogger(serviceName, traceId = getTraceId()) {
  return { serviceName, traceId };
}

createLogger("auth-service", "fixed-id"); // callCount 依然为 0
createLogger("order-service");           // callCount 变为 1

3. 参数间的默认值依赖与暂时性死区（TDZ）

参数的初始化是自左向右依次进行的，因此排在后面的形参默认值可以直接引用前面已经初始化的形参；反之，若前面的形参试图读取后面尚未初始化的形参，则会触发暂时性死区（TDZ）错误并抛出 ReferenceError。

// 正确：后续参数引用前面已初始化的参数
function buildUrl(domain, protocol = "https", port = protocol === "https" ? 443 : 80) {
  return `${protocol}://${domain}:${port}`;
}
console.log(buildUrl("example.com")); // "https://example.com:443"

// 错误示范：前面参数访问后续处于 TDZ 中的参数
function invalidOrder(x = y, y = 2) {
  return x + y;
}
invalidOrder(); // Uncaught ReferenceError: Cannot access 'y' before initialization

二、剩余参数（Rest Parameters）：取代 arguments 汇聚不定入参

在旧规范中，处理可变长度的参数列表必须依赖隐式注入的 arguments 对象。然而 arguments 存在诸多严重弊端：

• 类数组非真数组：arguments 只是拥有 length 属性的普通对象，无法直接调用 map、filter、reduce 等常用数组方法，必须先通过 Array.from(arguments) 或 [].slice.call(arguments) 进行昂贵的转换。
• 无法捕获部分参数：arguments 会无差别包含所有入参，无法直观区分哪些是“固定前置参数”，哪些是“动态追加参数”。
• 箭头函数不支持：箭头函数内根本不存在自身的 arguments 绑定。

ES6 引入的剩余参数（Rest Parameters）使用三个点（...）作为前缀，彻底解决了上述痛点。

// 传统方式：基于 arguments 的求和与前缀拼接
function legacySum(prefix) {
  // 必须手动剥离第一项 prefix
  var numbers = Array.prototype.slice.call(arguments, 1);
  var total = numbers.reduce(function(acc, cur) {
    return acc + cur;
  }, 0);
  return prefix + ": " + total;
}

// 现代写法：剩余参数精准捕获尾部入参
function modernSum(prefix, ...numbers) {
  // numbers 是纯正的 Array 实例，直接调用 reduce
  const total = numbers.reduce((acc, cur) => acc + cur, 0);
  return `${prefix}: ${total}`;
}

console.log(modernSum("计算结果", 10, 20, 30, 40)); // 输出: "计算结果: 100"

三、参数解构赋值（Destructuring）：配置对象模式与防御性编写

当函数的参数超过 3 个，或者包含大量可选配置项时，直接罗列平铺参数会导致调用端代码极难维护（必须死记硬背参数顺序，且无法跳过中间可选参数）。参数解构赋值允许我们在函数签名处直接解构传入的对象或数组。

1. 对象解构赋值基本应用

// 将配置参数解构为独立变量，并内联赋予默认值
function request(url, { method = 'GET', headers = {}, timeout = 5000 }) {
  console.log(`发送 ${method} 请求至 ${url}，超时时间: ${timeout}ms`);
}

request("/api/users", { method: 'POST', timeout: 3000 });
// 输出: "发送 POST 请求至 /api/users，超时时间: 3000ms"

2. 致命陷阱与“双重默认值”防御模式

上述代码看似优雅，却隐藏着严重的运行时崩溃隐患：如果调用方在调用时不传第二个参数（例如仅执行 request("/api/users")），第二个参数将变为 undefined，JS 引擎在尝试解构 undefined 时会立即抛出致命异常：TypeError: Cannot destructure property of undefined。

标准防御模式：必须在解构模式的最外层追加兜底赋值 = {}。如此一来，内层默认值负责兜底缺失字段，外层默认值负责兜底整个参数未传的场景。

3. 解构重命名与深层嵌套解构

在解构参数时，若外部传入的属性名与函数内部变量命名冲突，或为了代码自解释性，可以使用冒号（:）进行重命名，同时依旧可以为其挂载默认值。

// 别名重命名与多层默认值综合演示
function renderUserProfile({
  id: userId,                       // 重命名为 userId
  name = "匿名用户",
  contact: { email = "未绑定", phone = "未设置" } = {} // 嵌套对象防崩解构
} = {}) {
  return `ID: ${userId}, 姓名: ${name}, 邮箱: ${email}, 电话: ${phone}`;
}

// 安全空调用
console.log(renderUserProfile());
// 输出: "ID: undefined, 姓名: 匿名用户, 邮箱: 未绑定, 电话: 未设置"

// 完整传参
console.log(renderUserProfile({
  id: 1001,
  name: "张三",
  contact: { email: "zhangsan@example.com" }
}));
// 输出: "ID: 1001, 姓名: 张三, 邮箱: zhangsan@example.com, 电话: 未设置"

四、三大机制综合实战：构建高弹性网络客户端

在实际工程中，最优雅的接口设计往往是“前置必选参数 + 中置解构配置项（带默认值） + 末置剩余参数”的有机结合。以下通过一个模拟 API 客户端代码完整演示三者的协同工作。

/**
 * 综合演示函数：构建多管道请求发射器
 * @param {string} endpoint - 必选请求路径
 * @param {Object} options - 可选配置项（解构 + 默认值 + 外层防御）
 * @param {...Function} interceptors - 剩余参数：拦截器函数队列
 */
function createApiClient(
  endpoint,
  {
    method = "GET",
    retries = 3,
    timeout = 3000,
    headers: { contentType = "application/json", authHeader = "" } = {}
  } = {},
  ...interceptors
) {
  if (!endpoint) {
    throw new Error("缺少必填参数: endpoint");
  }

  // 基础请求描述对象
  let requestContext = {
    endpoint,
    method: method.toUpperCase(),
    retries,
    timeout,
    headers: {
      "Content-Type": contentType,
      ...(authHeader ? { "Authorization": authHeader } : {})
    }
  };

  // 通过剩余参数形成的真实数组顺序流水线处理
  for (const interceptor of interceptors) {
    if (typeof interceptor === "function") {
      requestContext = interceptor(requestContext) || requestContext;
    }
  }

  return requestContext;
}

// 示例拦截器
const logInterceptor = ctx => {
  console.log(`[日志拦截器] 正在向 ${ctx.endpoint} 准备发送 ${ctx.method} 请求`);
  return ctx;
};

const stampInterceptor = ctx => {
  ctx.headers["X-Request-Timestamp"] = Date.now();
  return ctx;
};

// 场景 1：完全使用默认参数调用
const client1 = createApiClient("/api/status");
console.log("Client 1 结果:", client1);

// 场景 2：覆盖部分解构字段，并挂载剩余参数传递的多个拦截器
const client2 = createApiClient(
  "/api/orders",
  { method: "POST", retries: 5, headers: { authHeader: "Bearer token_xyz" } },
  logInterceptor,
  stampInterceptor
);
console.log("Client 2 结果:", client2);

五、参数高级特性的边际规则与关键避坑

除了常规语法，JavaScript 引擎在引入 ES6 参数新特性后，还对传统函数的运行机制引入了若干关键调整：

1. 函数的 length 属性发生变化

函数的 length 属性用于表示该函数预期接收的形参个数。在 ES6 规则下：

• 剩余参数（...rest）完全不计入 length。
• 一旦形参列表中出现默认参数，length 仅计算首个具备默认值的形参之前的形参个数。

function foo(a, b, c) {}
console.log(foo.length); // 3

function bar(a, b = 1, c) {}
console.log(bar.length); // 1 (从 b 开始拥有默认值，其后的 c 无论是否带默认值均不再计入)

function baz(a, ...rest) {}
console.log(baz.length); // 1 (剩余参数不计入 length)

2. 显式严格模式指令限制

如果函数的形参列表中使用了默认参数、解构赋值或剩余参数，那么在函数体内部显式编写 "use strict" 将会直接导致语法报错（SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list）。这是因为严格模式会影响形参作用域内的求值规则，引擎在解析函数参数时必须预先知道是否为严格模式，而置于函数体内的指令解析滞后。因此，若需要开启严格模式，应将 "use strict" 放置在脚本或模块的最顶层。

六、总结

现代 JavaScript 对函数参数处理的革新，本质上是将以往分散在函数体内部的大量防御性校验代码，提升至函数签名阶段进行声明式表达：

1. 默认参数杜绝了传统逻辑或取值的假值误伤缺陷，并且具备严格的惰性求值与形参独立作用域保障。
2. 剩余参数彻底取代了历史遗留的 arguments 对象，提供了纯正的数组原型能力以及清晰的前置固定参数隔离。
3. 解构赋值消除了平铺参数的顺序强耦合，搭配外层 = {} 兜底语法，为大型工程构建健壮、自解释的配置型函数提供了最佳实践路径。