合並兩個深層數組

Question

因此，我有兩個無限深的數組，如下所示。

const one = [
    {
        name: 'CRISPS',
        items: [
            {
                name: 'salty crisps',
                items: []
            }
        ]
    },
    {
        name: 'CHOCOLATE',
        items: [
            {
                name: 'full sized bars',
                items: []
            }
        ]
    }
]

const two = [
    {
        name: 'CRISPS',
        items: [
            {
                name: 'salty crisps',
                items: []
            }
        ]
    },
    {
        name: 'DRINKS',
        items: [
            {
                name: 'fizzy drinks',
                items: []
            }
        ]
    },
    {
        name: 'CHOCOLATE',
        items: [
            {
                name: 'small sized bars',
                items: []
            }
        ]
    }
]

我希望能夠合並它們，以便獲得

const three = [
    {
        name: 'CRISPS',
        items: [
            {
                name: 'salty crisps',
                items: []
            }
        ]
    },
    {
        name: 'CHOCOLATE',
        items: [
            {
                name: 'full sized bars',
                items: []
            },
            {
                name: 'small sized bars',
                items: []
            }
        ]
    },
    {
        name: 'DRINKS',
        items: [
            {
                name: 'fizzy drinks',
                items: []
            }
        ]
    }
]

這種合並將是兩個數組的組合，並且只會在列表中保留項目的唯一值。

我有一個傾向，我將需要創建一個自定義遞歸函數來合並這兩個函數，但是我希望可以有一個預制的解決方案來做到這一點。

我曾嘗試使用lodash的_.merge()但是我使用的錯誤或不適用。

編輯對於lodash，我嘗試了標准的_.merge(one, two)但是這種合並不會很深。 從那里開始，我開始研究創建自己的遞歸方法。

我還更新了示例，說明如何合並CHOCOLATE 。

謝謝！

Answer 1

沒錯，遞歸函數是解決方法。 我們的想法是，我們在頂層合並列表，如果發現要合並的對象為one和two ，我們將遞歸地調用THEIR項上的merge：

 function merge(arr1, arr2) { let res = []; let arr2Index = arr2.reduce((acc, curr) => { acc[curr.name] = curr; return acc; }, {}); // add all elements from arr1 to res after merging them with their common element in arr2 arr1.forEach(i => { if (i.name in arr2Index) { i.items = merge(i.items, arr2Index[i.name].items); delete arr2Index[i.name]; } res.push(i); }); // add remaining objects from arr2 to res res.push(...Object.values(arr2Index)); return res; } // Test const one = [{ name: 'CRISPS', items: [{ name: 'salty crisps', items: [{ name: 'very salty crisps', items: [{ name: 'mega salty crisps', items: [] }] }] }] }, { name: 'CHOCOLATE', items: [{ name: 'full sized bars', items: [] }] } ]; const two = [{ name: 'CRISPS', items: [{ name: 'salty crisps', items: [{ name: 'very salty crisps', items: [{ name: 'hi', items: [{ name: 'somewhat salty crisps', items: [] }] }] }] }] }, { name: 'DRINKS', items: [{ name: 'fizzy drinks', items: [] }] } ]; console.log(merge(one, two)); 

Answer 2

使用傳播運算符嘗試以下方法：

 const one = [ { name: 'CRISPS', items: [{ name: 'salty crisps',items: [] }] }, { name: 'CHOCOLATE', items: [{ name: 'full sized bars', items: [] }] } ] const two = [ { name: 'CRISPS', items: [{ name: 'salty crisps',items: [] }] }, { name: 'DRINKS', items: [{ name: 'fizzy drinks',items: [] }] } ] const merge = (p, ...arrs) => [...new Set([].concat(...arrs).map(a => JSON.stringify(a)))].map(a => JSON.parse(a)); const three = merge('name', one, two); console.log(three); 

感謝這篇文章： https : //gist.github.com/yesvods/51af798dd1e7058625f4