如何合并多个不同对象中相同key对应的items数组

问题原因 #

你原有代码的嵌套问题是因为每次更新colorData时，直接将整个旧的colorData数组作为新数组的第一个元素，而非展开旧数组的内容：

// 错误写法 直接把旧数组放新数组第一个位置，产生嵌套
colorData = blueData.items ? [colorData, ...blueData.items] : colorData

修复方案 #

方案1：修改原有写法逻辑 #

只需把旧数组也做展开操作即可：

const blueData = {
    "items": [
        {
            "id": 35,
            "revision": 1,
            "updatedAt": "2021-09-10T14:29:54.595012Z",
        },
    ]
}

const redData = {}

const greenData = {
    "items": [
        {
            "id": 36,
            "revision": 1,
            "updatedAt": "2021-09-10T14:31:07.164368Z",
        }
    ]
}

let colorData = []
// 展开旧数组 + 展开新的items元素
colorData = blueData.items ? [...colorData, ...blueData.items] : colorData
colorData = redData.items ? [...colorData, ...redData.items] : colorData
colorData = greenData.items ? [...colorData, ...greenData.items] : colorData

方案2：更简洁的批量处理写法 #

如果后续还要新增其他颜色数据，推荐用flatMap批量处理，代码更易维护：

const colorData = [blueData, redData, greenData]
  // 没有items的对象返回空数组，flatMap会自动抹平空数组层级
  .flatMap(item => item.items || [])

两种方案最终得到的colorData都是单层级结构，内容为：

[
  { id: 35, revision: 1, updatedAt: '2021-09-10T14:29:54.595012Z' },
  { id: 36, revision: 1, updatedAt: '2021-09-10T14:31:07.164368Z' }
]

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