表单提交时合并数组中boxId相同对象的cartQuantityAllots方案

需求场景 #

提交表单时需向目标数组中添加对象，遵循以下规则：

• 若新增对象与数组中已有对象的boxId相同，无需添加完整对象，仅将新增对象的cartQuantityAllots数组元素合并到对应已有对象的cartQuantityAllots数组中；
• 若新增对象的boxId与数组中所有对象的boxId均不同，则直接将完整的新增对象加入结果数组。

示例输入 #

let arr = [
    {
        "code": "756WP",
        "id": "full",
        "name": "Full Cart",
        "boxId": "box6",
        "cartQuantityAllots": [
            {
                "code": "21",
                "cartType": "fullCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Bar Cart - Liquor, Liqueur",
                        "value": "Bar Cart - Liquor, Liqueur",
                        "label": "Bar Cart - Liquor, Liqueur"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Beverages - Juice & Softdrinks",
                        "value": "Beverages - Juice & Softdrinks",
                        "label": "Beverages - Juice & Softdrinks"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "ECY Liquor",
                        "value": "ECY Liquor",
                        "label": "ECY Liquor"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Extra Earphones",
                        "value": "Extra Earphones",
                        "label": "Extra Earphones"
                    }
                ]
            }
        ],
        "index": "NewGalley1",
        "imageGalley": "/static/media/galley4.961c9560760d59cd336f.png"
    },
    {
        "code": "756WP",
        "id": "full",
        "name": "Full Cart",
        "boxId": "box6",
        "cartQuantityAllots": [
            {
                "code": "908SA",
                "cartType": "fullCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Cutlery Sets",
                        "value": "Cutlery Sets",
                        "label": "Cutlery Sets"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Dry Store",
                        "value": "Dry Store",
                        "label": "Dry Store"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "papercups",
                        "value": "papercups",
                        "label": "papercups"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "ECY Juice",
                        "value": "ECY Juice",
                        "label": "ECY Juice"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Duty Free",
                        "value": "Duty Free",
                        "label": "Duty Free"
                    }
                ]
            }
        ],
        "index": "NewGalley1",
        "imageGalley": "/static/media/galley4.961c9560760d59cd336f.png"
    }
];

示例输出 #

const final = [
    {
        "code": "756WP",
        "id": "full",
        "name": "Full Cart",
        "boxId": "box6",
        "cartQuantityAllots": [
            {
                "code": "21",
                "cartType": "fullCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Bar Cart - Liquor, Liqueur",
                        "value": "Bar Cart - Liquor, Liqueur",
                        "label": "Bar Cart - Liquor, Liqueur"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Beverages - Juice & Softdrinks",
                        "value": "Beverages - Juice & Softdrinks",
                        "label": "Beverages - Juice & Softdrinks"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "ECY Liquor",
                        "value": "ECY Liquor",
                        "label": "ECY Liquor"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Extra Earphones",
                        "value": "Extra Earphones",
                        "label": "Extra Earphones"
                    }
                ]
            },
            {
                "code": "908SA",
                "cartType": "fullCart",
                "typesOfItems": [
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Cutlery Sets",
                        "value": "Cutlery Sets",
                        "label": "Cutlery Sets"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Dry Store",
                        "value": "Dry Store",
                        "label": "Dry Store"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "papercups",
                        "value": "papercups",
                        "label": "papercups"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "ECY Juice",
                        "value": "ECY Juice",
                        "label": "ECY Juice"
                    },
                    {
                        "key": "02f2c8e0-cd40-11ed-8563-092a964acecc",
                        "name": "Duty Free",
                        "value": "Duty Free",
                        "label": "Duty Free"
                    }
                ]
            }
        ],
        "index": "NewGalley1",
        "imageGalley": "/static/media/galley4.961c9560760d59cd336f.png"
    }
];

实现方案 #

批量合并数组中已有对象 #

通过reduce方法遍历数组，以boxId为键构建映射完成合并：

function mergeCartArray(arr) {
    return Object.values(arr.reduce((acc, current) => {
        if (!acc[current.boxId]) {
            // 浅拷贝对象和数组，避免修改原数据
            acc[current.boxId] = {...current, cartQuantityAllots: [...current.cartQuantityAllots]};
        } else {
            // 合并cartQuantityAllots数组
            acc[current.boxId].cartQuantityAllots.push(...current.cartQuantityAllots);
        }
        return acc;
    }, {}));
}

// 使用示例
const final = mergeCartArray(arr);

向原数组添加单个新对象 #

如果是每次添加一个新对象到原数组的场景，可使用以下函数：

function addOrMergeCart(originalArr, newCart) {
    const existingCart = originalArr.find(item => item.boxId === newCart.boxId);
    if (existingCart) {
        // 合并数组并返回原数组的拷贝，避免直接修改原数组
        return originalArr.map(item => 
            item.boxId === newCart.boxId 
                ? {...item, cartQuantityAllots: [...item.cartQuantityAllots, ...newCart.cartQuantityAllots]}
                : item
        );
    } else {
        // 直接添加新对象
        return [...originalArr, newCart];
    }
}

// 使用示例
const newCart = {
    "code": "123AB",
    "id": "half",
    "name": "Half Cart",
    "boxId": "box7",
    "cartQuantityAllots": [],
    "index": "NewGalley2",
    "imageGalley": "/static/media/galley5.png"
};

const updatedArr = addOrMergeCart(arr, newCart);

逻辑说明 #

1. 批量合并：利用reduce构建boxId到对象的映射，遍历过程中完成数组元素的合并，最后将映射值转为数组得到结果；
2. 单个添加：通过find查找是否存在相同boxId的对象，存在则合并数组，不存在则直接追加新对象，全程返回新数组避免修改原数据产生副作用。

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