克隆JavaScript对象并修改嵌套属性值时遇到的错误问题

你当前代码的问题在于：data1.connections是一个数组，你用{...data1.connections}把整个数组展开到了对象中，JavaScript会把数组的索引（比如0）转为对象的键、数组元素对应值，再加上你额外添加的status: 'passive'，就出现了不符合预期的结构。

根据你的需求，分两种场景提供解决方案：

场景1：仅修改connections数组中第一个元素的status #

如果确定connections数组只有一个元素，直接访问数组下标并克隆修改：

const data1 = {
    connections: [
      {
        id: 'abfd6e01',
        status: 'active',
        created: '2023-05-10T11:30:25.0000000Z',
      },
    ],
    description: 'Mocked description',
    id: '0e8eabf6',
    name: 'Mocked Company',
  };

const data2 = {
  ...data1, // 克隆原对象的其他属性
  connections: [
    { ...data1.connections[0], status: 'passive' } // 克隆数组第一个元素并修改status
  ]
};

场景2：批量修改connections数组中所有元素的status #

如果数组可能包含多个元素，需要统一修改每个元素的status，使用map方法遍历处理：

const data2 = {
  ...data1,
  connections: data1.connections.map(item => ({
    ...item, // 克隆每个数组元素
    status: 'passive' // 修改status属性
  }))
};

两种方法最终都会得到符合预期的结果：

{
  connections: [
    {
      id: 'abfd6e01',
      status: 'passive',
      created: '2023-05-10T11:30:25.0000000Z',
    },
  ],
  description: 'Mocked description',
  id: '0e8eabf6',
  name: 'Mocked Company',
}

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