如何利用ES6对象扩展运算符简化测试用例中的数组对象更新？

你遇到的问题核心是没有正确定位到要修改的数组元素，且错误地将数组展开到了对象中，导致扩展运算符没按预期工作。咱们一步步拆解：

原写法的错误点 #

你的代码：

const input = [{ ...baseInput, Customer: { salutation: 'Mr', givenName: 'James', familyName: 'Jamesy' } }];

有两个关键问题：

1. 数组被错误展开到对象内：...baseInput在对象字面量中展开时，会把数组的索引（0、1）作为对象的属性名，生成一个类似{0: {...第一个元素}, 1: {...第二个元素}, Customer: ...}的奇怪对象，完全不是你需要的数组结构。
2. 未定位到目标元素：要修改的Customer属性存在于baseInput的第二个数组元素（索引1）中，而不是数组的顶层或第一个元素里。

正确的写法 #

方法1：精准定位数组元素修改 #

如果确定目标元素在数组中的位置（这里是索引1），可以直接复制数组并替换对应元素：

const input = [
  // 保留第一个元素不变
  baseInput[0],
  // 展开第二个元素的所有原有属性，再覆盖Customer
  {
    ...baseInput[1],
    Customer: { salutation: 'Mr', givenName: 'James', familyName: 'Jamesy' }
  }
];

或者用slice更安全地复制前序元素：

const input = [
  ...baseInput.slice(0, 1),
  {
    ...baseInput[1],
    Customer: { salutation: 'Mr', givenName: 'James', familyName: 'Jamesy' }
  }
];

方法2：动态遍历修改（更灵活） #

如果不确定目标元素的索引，或者数组结构可能变化，可以用map遍历数组，针对性修改包含Customer的元素：

const input = baseInput.map(item => {
  // 只修改包含Customer属性的元素
  if (item.Customer) {
    return {
      ...item,
      Customer: { salutation: 'Mr', givenName: 'James', familyName: 'Jamesy' }
    };
  }
  // 其他元素原样返回
  return item;
});

验证效果 #

修改后的input数组会保留原有的PaymentRequirementsDetail对象，同时第二个元素的Customer被替换为你指定的新值，其他属性（如CardBrand、Delinquency等）都保持不变，完全符合你生成测试快照的需求。

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