Question

该示例很简单，但是对于使用角度和材质创建的数据表（该数据表接收一个数组），该示例将帮助我解决一个复杂的问题。我收到一个对象数组，该对象数组想通过亲子关系进行组织，如以下示例所示，该对象以一种简单的方式表示，以免使问题与复杂的数据纠缠在一起。

我收到的数据为array1：

array1 = [
  {id:1, parent_id:0, data:'txt'},
  {id:2, parent_id:0, data:'txt'},
  {id:3, parent_id:1, data:'txt'},
  {id:4, parent_id:1, data:'txt'},
  {id:5, parent_id:0, data:'txt'},
  {id:6, parent_id:0, data:'txt'},
  {id:7, parent_id:5, data:'txt'},
];

我想将其组织为array2。

array2 = [
  {id:1, parent_id:0, data:'txt'},
  {id:3, parent_id:1, data:'txt'},
  {id:4, parent_id:1, data:'txt'},
  {id:2, parent_id:0, data:'txt'},
  {id:5, parent_id:0, data:'txt'},
  {id:7, parent_id:5, data:'txt'},
  {id:6, parent_id:0, data:'txt'},
];

Answer 1

这里有一个可能的解决方案，首先使用Array.filter()获取没有父对象的对象（即parent_id:0处的对象），然后使用id属性对其进行排序。此后，我们使用Array.reduce()来获取每个先前对象的子代列表，对这些子代进行排序并将它们直接放在其父代之后。但是，这不是一个有效的解决方案，也许有更好的解决方法。

const array1 = [
  {id:1, parent_id:0, data:'txt'},
  {id:2, parent_id:0, data:'txt'},
  {id:3, parent_id:1, data:'txt'},
  {id:4, parent_id:1, data:'txt'},
  {id:5, parent_id:0, data:'txt'},
  {id:6, parent_id:0, data:'txt'},
  {id:7, parent_id:5, data:'txt'},
];

let res = array1
    .filter(({parent_id}) => parent_id === 0)
    .sort((a, b) => a.id - b.id)
    .reduce((acc, curr) =>
    {
        const children = array1
            .filter(({parent_id}) => parent_id === curr.id)
            .sort((a, b) => a.id - b.id);

        return [...acc, curr, ...children];
    }, []);

console.log(res);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

该解决方案来自我前段时间提出的类似问题，您也可以在此处查看其他答案，而我的第一种方法（性能较好，但不是通用的，有一些局限性，如此处所述）来解决问题像这样：Sorting an array of categories and subcategories

如何通过JavaScript中的父元素对数组进行排序

1 个答案: