Angular 8中如何将子数组合并到父级子数组中

过滤数据后，在findChildrens函数中得到如下结构的this.newRegion数组。需求是：当该数组长度大于1时，将第二个及后续对象的children数组合并到第一个对象的children数组中，最终只保留合并后的第一个对象。

原响应代码：

findChildrens(){
     this.newRegion = [
      {
        "name": "Africa",
        "children": [
          {
            "name": "Test1",
            "region": "1UL Africa"
          },
          {
            "name": "Test2",
            "region": "South Africa",
          },
          {
            "name": "Test3",
            "region": "New Test",
          }
        ]
      },
      {
        "name": "Europe",
        "children": [
          {
            "name": "Test4",
            "region": "1UL Africa"
          },
          {
            "name": "Test5",
            "region": "Test Europe"
          }
        ]
      }
    ];
  };

预期输出：

this.newRegion = [
      {
        "name": "Africa",
        "children": [
          {
            "name": "Test1",
            "region": "1UL Africa"
          },
          {
            "name": "Test2",
            "region": "South Africa",
          },
          {
            "name": "Test3",
            "region": "New Test",
          },
          {
            "name": "Test4",
            "region": "1UL Africa"
          },
          {
            "name": "Test5",
            "region": "Test Europe"
          }
        ]
      }
    ];

解决方案 #

可以通过以下两种方式实现需求：

方式一：循环合并 #

在获取到this.newRegion后，判断数组长度，若大于1则提取第一个对象，循环将后续所有对象的children合并进去，最后重新赋值数组：

findChildrens(){
     this.newRegion = [
      {
        "name": "Africa",
        "children": [
          {
            "name": "Test1",
            "region": "1UL Africa"
          },
          {
            "name": "Test2",
            "region": "South Africa",
          },
          {
            "name": "Test3",
            "region": "New Test",
          }
        ]
      },
      {
        "name": "Europe",
        "children": [
          {
            "name": "Test4",
            "region": "1UL Africa"
          },
          {
            "name": "Test5",
            "region": "Test Europe"
          }
        ]
      }
    ];

    // 新增合并逻辑
    if (this.newRegion.length > 1) {
      const mergedRegion = { ...this.newRegion[0] };
      for (let i = 1; i < this.newRegion.length; i++) {
        mergedRegion.children = [...mergedRegion.children, ...this.newRegion[i].children];
      }
      this.newRegion = [mergedRegion];
    }
  };

方式二：使用reduce简化代码 #

用数组的reduce方法一次性完成合并操作，代码更简洁：

findChildrens(){
     this.newRegion = [
      {
        "name": "Africa",
        "children": [
          {
            "name": "Test1",
            "region": "1UL Africa"
          },
          {
            "name": "Test2",
            "region": "South Africa",
          },
          {
            "name": "Test3",
            "region": "New Test",
          }
        ]
      },
      {
        "name": "Europe",
        "children": [
          {
            "name": "Test4",
            "region": "1UL Africa"
          },
          {
            "name": "Test5",
            "region": "Test Europe"
          }
        ]
      }
    ];

    // 新增合并逻辑
    if (this.newRegion.length > 1) {
      const mergedRegion = this.newRegion.reduce((acc, curr) => {
        acc.children = [...acc.children, ...curr.children];
        return acc;
      }, { ...this.newRegion[0] });
      this.newRegion = [mergedRegion];
    }
  };

两种写法都能实现需求：当数组长度大于1时，将所有后续对象的children合并到第一个对象中，最终this.newRegion只保留合并后的第一个对象。

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