如何提取多个数组中同key的对象合并为单个数组

需求说明 #

现有结构中widgets数组存储了多个组件对象，其中多个type为Grid的对象各自携带仅含单个元素的cards数组，需要将所有Grid对象下的cards元素提取合并，最终输出仅含一个Grid对象、该对象的cards数组包含所有原有卡片元素的新结构。

原始结构示例 #

{
    "widgets" : [
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        },
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        }
    ]
}

目标结构示例 #

{
    "widgets": [
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                },
                {
                    "data": {},
                    "layout": 1
                }
            ]
        }
    ]
}

实现代码（JavaScript） #

核心逻辑是遍历原widgets列表，归集所有Grid组件下的卡片元素，再重新组装为目标结构：

const source = {
    widgets: [
        {type: "Grid", cards: [{data: {}, layout: 1}]},
        {type: "Grid", cards: [{data: {}, layout: 1}]}
    ]
};

// 归集所有Grid下的卡片
const mergedCards = [];
source.widgets.forEach(item => {
    if (item.type === 'Grid' && Array.isArray(item.cards)) {
        mergedCards.push(...item.cards);
    }
});

// 组装结果
const result = {
    widgets: [
        {
            type: 'Grid',
            cards: mergedCards
        }
    ]
};

• 注意点：
  • 追加卡片时用展开运算符...是为了把原cards数组里的元素逐个取出，避免出现数组嵌套的问题
  • 如果原widgets里存在非Grid类型的组件需要保留，只需要在遍历时把非Grid项单独存入结果的widgets数组，最后再把合并好的Grid项追加进去即可
  • 如果需要做深拷贝避免修改原数据，可以在追加卡片时对卡片元素做拷贝处理，根据业务需求选择即可

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