使用并集或交集映射数组以生成第三个数组

Question

我正在尝试解决 Angular 7 中的一个问题，我需要编写一个函数，该函数接受两个对象数组，在本例中为第一个对象和第二个对象，并返回第三个数组。

第三个数组和第一个数组非常相似，但是children数组中count键的值取决于第二个数组中是否有children或者如果存在，反映该值count 在该对象中。有没有 angular 的数组映射函数可以解决这个问题？

第一个数组：

[
    {
        "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 中获取相应的子节点
• 循环数组 1 的子元素并根据数组 2 的子元素更改值

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; }

P.S:-如果您的 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);