如何递归深度合并对象数组

Question

我想合并两个对象数组。这些对象具有相同的结构，但其中一个缺少 hide 属性。我想将 hide 属性的值从一个对象复制到另一个缺少此属性的对象。重要的是我不想改变这些数组中的任何一个！

第一个数组是这样的（注意有 hide 属性）：

let first_array = [
    {
        name: 'John',
        age: 40,
        hide: true,
        childs: [
            {
                name: 'Alice',
                age: 20,
                hide: false,
                childs: [
                    {
                        name: 'Mike',
                        age: 2,
                        hide: true
                    }
                ]
            }
        ]
    },
    {
        name: 'Peter',
        age: 40,
        hide: true,
        childs: [
            {
                name: 'Andrew',
                age: 20,
                hide: true,
                childs: [
                    {
                        name: 'Jessica',
                        age: 2,
                        hide: true
                    }
                ]
            }
        ]
    }
]

第二个数组看起来几乎一样！唯一缺少的是隐藏属性。

let second_array = [
    {
        name: 'John',
        age: 40,
        childs: [
            {
                name: 'Alice',
                age: 20,
                childs: [
                    {
                        name: 'Mike',
                        age: 2,
                    }
                ]
            }
        ]
    },
    {
        name: 'Peter',
        age: 40,
        childs: [
            {
                name: 'Andrew',
                age: 20,
                childs: [
                    {
                        name: 'Jessica',
                        age: 2,
                    }
                ]
            }
        ]
    }
]

现在，我想创建一个新数组，其中每个对象中都有隐藏属性。

我知道如何以 imperative 的方式递归地执行此操作，但不幸的是我正在改变数据 - 我不想这样做。

function getHideProperty(first, second) {
    for (let i = 0; i < second.length; i++) {
        for (let j = 0; j < first.length; j++) {
            if (second[i].name === first[j].name) {
                second[i].hide = first[j].hide
                if (second[i].childs) {
                    second[i].childs = getHideProperty(first[j].childs, second[i].childs)
                }
            }
        }
    }
    return second
}

现在我可以创建包含合并对象的新数组：

const newArray = getHideProperty(second_array, first_array)

现在，second_array 中的每个对象都有 hide 属性。但我改变了数组:(

如何在不改变数组的情况下达到这样的结果？

Answer 1

您需要：

1. 创建一个新数组来存储新信息，并将其返回

2. 深拷贝second[i] 以存储在新数组中，然后再修改任何内容

对于#2，从What is the most efficient way to deep clone an object in JavaScript?中选择您最喜欢的答案

对于#1，非常粗略（参见 cmets）：

function getHideProperty(first, second) {
    const result = []; // Our result array
    for (let i = 0; i < second.length; i++) {
        const secondEntry = result[i] = deepCopy(second[i]); // The deep copy, and let's avoid constantly re-retrieving second[i]/result[i]
        for (let j = 0; j < first.length; j++) {
            if (secondentry.name === first[j].name) {
                secondentry.hide = first[j].hide
                if (secondEntry.childs) {
                    // Could be more efficient here, since the entries in `childs` are already copies; left as an exercise to the reader...
                    secondEntry.childs = getHideProperty(first[j].childs, secondEntry.childs)
                }
            }
        }
    }
    return result;
}

这并不是一个全能唱歌、全能跳舞的解决方案。它旨在帮助您一路走来。请注意deepCopy 占位符，这是您对#2 的首选解决方案。 :-)

---

如果您执行上述操作（嵌套循环）并发现这是一个性能问题，您可以在 first 中创建一个 Map，并以它们的名称作为关键字，然后在映射时查找它们循环通过second（而不是嵌套循环）。复杂性仅在如果使用简单的嵌套循环解决方案遇到性能问题时才有用。

Answer 2

这是一种不会改变任何原始数组或其项的函数式方法：

function getHideProperty(first, second) {
    return second.map(function(item) {
        var corresponding = first.find(function(searchItem) {
            return searchItem.name === item.name;
        });
        return Object.assign({},
          item,
          { hide: corresponding.hide },
          item.childs
            ? { childs: getHideProperty(item.childs, corresponding.childs) } 
            : {}
        );
    });
}