重新排列具有id和parentid的对象数组

Question

我有两个数组。它们都包含具有唯一id和parentid值的对象（给定的id仅为示例，在实际中它们由uuid生成器生成）。 第一个数组按照这样的方式排序，即具有与“parent”不同的parentid的对象紧随具有相应id的父对象之后：

const array1 = [
  { id: "id1", parentId: "parent" },
  { id: "id2", parentId: "id1" },
  { id: "id3", parentId: "id2" },
  { id: "id4", parentId: "id3" },
  { id: "id5", parentId: "id4" },
  { id: "id6", parentId: "parent" },
  { id: "id7", parentId: "id6" },
  { id: "id8", parentId: "id7" },
  { id: "id9", parentId: "parent" }
];

第二个是按“嵌套深度”排序的：

const array2 = [
    { id: "id1", parentId: "parent" },
    { id: "id6", parentId: "parent" },
    { id: "id9", parentId: "parent" },
    { id: "id2", parentId: "id1" },
    { id: "id7", parentId: "id6" },
    { id: "id3", parentId: "id2" },
    { id: "id8", parentId: "id7" },
    { id: "id4", parentId: "id3" },
    { id: "id5", parentId: "id4" },
  ];

什么是将array2按照array1的顺序重新排列的最佳方法？

- Laszlo

---

{ id: "id2", parentId: "id2" }, 看起来像是一个循环引用。 - Nina Scholz

好的，刚刚修复了这个。 - Laszlo

Answer 1

你可以使用Array.prototype.reduce()函数来实现。最初的回答中已经提到了这个函数。

const array2 = [
    { id: "id1", parentId: "parent" },
    { id: "id6", parentId: "parent" },
    { id: "id9", parentId: "parent" },
    { id: "id2", parentId: "id1" },
    { id: "id7", parentId: "id6" },
    { id: "id3", parentId: "id2" },
    { id: "id8", parentId: "id7" },
    { id: "id4", parentId: "id3" },
    { id: "id5", parentId: "id4" },
  ];
  
  const sortedArray2= array2.reduce((accumulator, currentValue) => {
    let item = accumulator.find(x => x.id === currentValue.parentId);
    let index = accumulator.indexOf(item);
    index = index !== -1 ? index + 1 : accumulator.length;
    accumulator.splice(index, 0, currentValue);
    return accumulator;
  }, []);
  
  console.log(sortedArray2);

- Guerric P

Answer 2

创建一个辅助函数，执行 sort 需要的各种比较操作。

const sortHelper = (a,b)=>a>b?1:a<b?-1:0;

那就直接写吧

array2.sort((a,b) => sortHelper(a.id,b.id);

这是要求sort函数使用您提供的函数来对项目进行排序。此处给出的函数比较每个对象的id属性的值。

- emrys57

Answer 3

单一排序无法工作，因为在对数据进行排序时没有考虑父子关系。

这个问题可以分为两部分解决：

1. 利用给定的关系建立一棵树。

2. 使用广度优先搜索逐层遍历树，并使用堆栈获取排序后的平面数据。

var data = [{ id: "id1", parentId: "parent" }, { id: "id2", parentId: "id1" }, { id: "id3", parentId: "id2" }, { id: "id4", parentId: "id3" }, { id: "id5", parentId: "id4" }, { id: "id6", parentId: "parent" }, { id: "id7", parentId: "id6" }, { id: "id8", parentId: "id7" }, { id: "id9", parentId: "parent" }],
    tree = function (data, root) {
        var o = {};
        data.forEach(function (a) {
            o[a.id] = { data: a, children: o[a.id] && o[a.id].children };
            o[a.parentId] = o[a.parentId] || {};
            o[a.parentId].children = o[a.parentId].children || [];
            o[a.parentId].children.push(o[a.id]);
        });
        return o[root].children;
    }(data, 'parent'),
    stack = [tree],
    result = [];

while (stack.length) {
    stack.shift().forEach(({ data, children = [] }) => {
        result.push(data);
        stack.push(children);
    });
}

console.log(result);

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

- Nina Scholz