JS函数对象参数解构赋值时默认值变为undefined问题排查

你当前的代码仅给整个入参对象设置了兜底默认值，该兜底逻辑仅会在「完全不传入参数（入参值为undefined）」时触发。只要你调用时传入了任意非undefined的对象（哪怕是空对象{}），就会跳过这个整体兜底，直接对传入的对象做解构，你传入的对象未携带的属性，解构后自然就是undefined。

另外你当前调用代码还存在属性名拼写错误：函数定义的属性是containerClassName（最后一个单词首字母为大写N），你调用时传的是containerClassname（小写n），二者不匹配会导致该属性接收不到预期值。

把默认值从「整个参数对象」移到「单个解构属性」上即可，同时保留整个入参对象的兜底空对象，避免无参调用时报解构错误。如果你需要部分属性为必填项，不给对应属性设置默认值，额外加一层校验逻辑即可。

修复后代码示例：

function beforeAfterComparison(
  // 整个参数对象兜底为空对象，避免无参调用解构报错
  {
    containerClassName,
    beforeImageUrl, // 未设默认值，作为必填项
    afterImageUrl, // 未设默认值，作为必填项
    containerIndex = 0,
    lineWidth = 2,
    lineColor = "black",
    circleDiameter = 50,
    circleColor = "lightgray",
  } = {} 
) {
  // 必填项校验逻辑
  if (!beforeImageUrl || !afterImageUrl) {
    throw new Error('beforeImageUrl和afterImageUrl为必填参数')
  }
  console.log(containerIndex);
  console.log(lineWidth);
  console.log(lineColor);
  console.log(circleDiameter);
  console.log(circleColor);
}

beforeAfterComparison({ 
  containerClassName: "someClassName",
  beforeImageUrl: "测试前置图地址",
  afterImageUrl: "测试后置图地址"
});

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