使用联合或相交来映射数组以生成第三个数组

Question

我正在尝试解决Angular 7中的问题，在这里我需要编写一个函数，该函数接受两个对象数组，在这种情况下，第一个和第二个对象数组返回第三个数组。

第三个数组与第一个数组非常相似，但是children数组中count键的值取决于第二个数组中是否有任何children ，或者取决于是否反映了该对象中count的值。 是否有可以解决这个问题的角度数组映射功能？

第一个数组：

[
    {
        "name": "Category 1",
        "value": "Vegetables",
        "children": [
            {"name": "Carrots", "value": "Carrots", "count": 2},
            {"name": "Peas", "value": "Peas", "count": 1}
        ]
    },
    {
        "name": "Category 2",
        "value": "Fruits",
        "children": [
            {"name": "Apples", "value": "Apples", "count": 10},
            {"name": "Bananas", "value": "Bananas", "count": 5}
        ]
    },
    {
        "name": "Category 3",
        "value": "Desserts",
        "children": [
            {"name": "Ice Cream", "value": "IceCream", "count": 3},
            {"name": "Cakes", "value": "Cakes", "count": 3}
        ]
    }
]

第二个数组

[
    {
        "name": "Category 1",
        "value": "Vegetables",
        "children": [
            {"name": "Peas", "value": "Peas", "count": 1}
        ]
    },
    {
        "name": "Category 2",
        "value": "Fruits",
        "children": [
            {"name": "Apples", "value": "Apples", "count": 3},
            {"name": "Bananas", "value": "Bananas", "count": 2}
        ]
    },
    {
        "name": "Category 3",
        "value": "Desserts",
        "children": []
    }
]

第三阵列

[
    {
        "name": "Category 1",
        "value": "Vegetables",
        "children": [
            {"name": "Carrots", "value": "Carrots", "count": 0},
            {"name": "Peas", "value": "Peas", "count": 1}
        ]
    },
    {
        "name": "Category 2",
        "value": "Fruits",
        "children": [
            {"name": "Apples", "value": "Apples", "count": 3},
            {"name": "Bananas", "value": "Bananas", "count": 2}
        ]
    },
    {
        "name": "Category 3",
        "value": "Desserts",
        "children": [
            {"name": "Ice Cream", "value": "IceCream", "count": 0},
            {"name": "Cakes", "value": "Cakes", "count": 0}
        ]
    }
]

Answer 1

您可以使用map和find非常简单地执行此操作，然后reduce数组。

 const arr1 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Carrots","value":"Carrots","count":2},{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":10},{"name":"Bananas","value":"Bananas","count":5}]},{"name":"Category 3","value":"Desserts","children":[{"name":"Ice Cream","value":"IceCream","count":3},{"name":"Cakes","value":"Cakes","count":3}]}]; const arr2 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":3},{"name":"Bananas","value":"Bananas","count":2}]},{"name":"Category 3","value":"Desserts","children":[]}]; const res = arr1.map(({ name, value, children }) => { let found = arr2.find(({ name: n, value: v }) => n == name && v == value); if (found) children = children.concat(found.children).reduce((a, c) => { let f = a.findIndex(({ name: n }) => n == c.name); if (f > -1) a[f].count += c.count; else a.push(c); return a; }, []); return { name, value, children }; }); console.log(res); 

 .as-console-wrapper { max-height: 100% !important; top: auto; } 

Answer 2

这里的主意是

• 首先将第二个数组更改为对象，以便在其上查找值变得更加容易
• 现在循环遍历array1并从array2中获取相应的子级
• 在array1的子代上循环并根据array2的子代更改值

 const arr1 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Carrots","value":"Carrots","count":2},{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":10},{"name":"Bananas","value":"Bananas","count":5}]},{"name":"Category 3","value":"Desserts","children":[{"name":"Ice Cream","value":"IceCream","count":3},{"name":"Cakes","value":"Cakes","count":3}]}]; const arr2 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":3},{"name":"Bananas","value":"Bananas","count":2}]},{"name":"Category 3","value":"Desserts","children":[]}]; let arr2Obj = Object.fromEntries(arr2.map(val => [val.name, val])) const res = arr1.map(({ name, value, children }) => { let arr2Children = ( arr2Obj[name] || {} ).children let childrenObj = Object.fromEntries(arr2Children.map(val => [val.name,val])) let newChildren = children.map( val => { let count = (childrenObj[val.name] || {}).count || 0 return {...val,count} }) return {name,value,children:newChildren} }); console.log(res); 

 .as-console-wrapper { max-height: 100% !important; top: auto; } 

PS：-如果您的array1和array2始终处于排序状态，而不需要更改它的对象，则可以直接使用索引进行访问，这对于子对象也是如此

 const arr1 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Carrots","value":"Carrots","count":2},{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":10},{"name":"Bananas","value":"Bananas","count":5}]},{"name":"Category 3","value":"Desserts","children":[{"name":"Ice Cream","value":"IceCream","count":3},{"name":"Cakes","value":"Cakes","count":3}]}]; const arr2 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":3},{"name":"Bananas","value":"Bananas","count":2}]},{"name":"Category 3","value":"Desserts","children":[]}]; let createObject = (arr) => arr.reduce((op,[key,value])=>{ op[key] = value return op },{}) let arr2Obj = createObject(arr2.map(val => [val.name, val])) const res = arr1.map(({ name, value, children }) => { let arr2Children = ( arr2Obj[name] || {} ).children let childrenObj = createObject(arr2Children.map(val => [val.name,val])) let newChildren = children.map( val => { let count = (childrenObj[val.name] || {}).count || 0 return {...val,count} }) return {name,value,children:newChildren} }); console.log(res);