如何实现带解构的可选参数对象？求非TS环境下的优化方案

嘿，这个场景我太熟悉了！TypeScript里的可选解构确实方便，但回到纯JavaScript环境，我们完全可以利用JS本身的语法特性实现同样优雅的效果，不用写那些冗余的判断逻辑。下面给你两种实用方案：

方案1：参数默认值+解构默认值（最常用） #

直接给第二个参数设置默认空对象，同时在解构时给属性指定默认值，一步到位：

function handleUser(userId, { includePosts = false, pageSize = 10 } = {}) {
  console.log(`处理用户${userId}，是否包含文章：${includePosts}，每页条数：${pageSize}`);
}

// 调用示例
handleUser(123); // 输出：处理用户123，是否包含文章：false，每页条数：10
handleUser(123, { includePosts: true }); // 输出：处理用户123，是否包含文章：true，每页条数：10
handleUser(123, { pageSize: 20 }); // 输出：处理用户123，是否包含文章：false，每页条数：20

这个方案的核心是：当第二个参数不传时，会自动使用默认的{}，解构时未传入的属性会用上各自的默认值，完全不会出现解构undefined报错的问题，代码简洁又直观。

方案2：空值合并处理边界情况（更健壮） #

如果你的函数可能接收到null或者其他 falsy 值作为第二个参数，用空值合并运算符（??）来兜底会更稳妥：

function handleUser(userId, opts) {
  // 如果opts是null/undefined，就用空对象来解构
  const { includePosts = false, pageSize = 10 } = opts ?? {};
  console.log(`处理用户${userId}，是否包含文章：${includePosts}，每页条数：${pageSize}`);
}

// 调用示例
handleUser(123, null); // 正常输出，不会报错
handleUser(123, undefined); // 正常输出

这种写法把参数判断和解构分开，虽然多了一行，但能处理更多边界场景，适合对参数输入不可控的情况。

避坑提醒 #

别直接写function foo(a, {x, y}) {}——不传第二个参数时会直接报错，因为你没法解构undefined。一定要给解构的对象兜底一个默认值（要么给参数设={}，要么在解构时用opts ?? {}）。

内容的提问来源于stack exchange，提问作者garajo