如何通过比较 React 中同一数组中的 Id 和 reference_id 来重新排序数组列表

Question

这是我得到的数组

[
  { id: 1, name: 'hello world', reference_id: null },
  { id: 2, name: 'hello world', reference_id: null },
  { id: 3, name: 'hello world', reference_id: 1 },
  { id: 4, name: 'hello world', reference_id: null },
  { id: 5, name: 'hello world', reference_id: 1 },
  { id: 6, name: 'hello world', reference_id: 2 },
]

我需要将这个数组重新排序成与此类似的东西。

[
  { id: 1, name: 'hello world', reference_id: null },
  { id: 3, name: 'hello world', reference_id: 1 },
  { id: 5, name: 'hello world', reference_id: 1 },
  { id: 2, name: 'hello world', reference_id: null },
  { id: 6, name: 'hello world', reference_id: 2 },
  { id: 4, name: 'hello world', reference_id: null },
]

这是我试过的代码

const parentIndex = skus?.findIndex(item => item.id === item.reference_id);
    console.log(parentIndex)

    if (parentIndex !== -1) {
      const parentId = skus[parentIndex].id;

      const parentItem = skus.splice(parentIndex, 1)[0];
      const referencedItem = skus.find(item => item.id === parentId);

      if (referencedItem) {
        const referencedIndex = skus.indexOf(referencedItem);
        skus.splice(referencedIndex + 1, 0, parentItem);
      } else {
        skus.push(parentItem);
      }
    }

当我运行这段代码时，我得到了一些奇怪的意外结果，而且大多数时候它没有在第一行之后运行。

有人可以帮我解决这个问题吗？我正在努力寻找解决方案。

Answer 1

A

.map()

可以帮助定义一个可以应用的排序标准，然后稍后再次删除（通过第二个

.map()

调用）：

const arr=[
  { id: 1, name: 'hello world', reference_id: null },
  { id: 2, name: 'hello world', reference_id: null },
  { id: 3, name: 'hello world', reference_id: 1 },
  { id: 4, name: 'hello world', reference_id: null },
  { id: 5, name: 'hello world', reference_id: 1 },
  { id: 6, name: 'hello world', reference_id: 2 },
];

const res=arr.map(c=>({ref:(c.reference_id??"")+`${c.id}`,el:c}))
             .sort((a,b)=>a.ref.localeCompare(b.ref))
             .map(c=>c.el);

console.log(res)

Answer 2

看起来你所追求的是按

id

进行的主要排序，其中共享

reference_id

的元素组合在一起。

如果是这种情况，一种前进的方法是首先 group-by

reference_id

然后在

flattening

分组数组之前按每个组的第一个元素的 id 排序。这里通过

id

对

input

数组的副本执行初始排序。

const input = [
  { id: 4, reference_id: null },
  { id: 13, reference_id: null },
  { id: 5, reference_id: 1 },
  { id: 2, reference_id: null },
  { id: 1, reference_id: null },
  { id: 3, reference_id: 1 },
  { id: 6, reference_id: 2 },
];

const sorted = Object
  .values(
    [...input]
      .sort((a, b) => a.id - b.id)
      .reduce((a, c, i) => ((a[c.reference_id ?? `null_${i}`] ??= []).push(c), a), {})
  )
  .sort(([a], [b]) => a.id - b.id)
  .flat();

// logging
console.log(sorted.map((o) => JSON.stringify(o)).join(',\n'));

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

Answer 3

您可以通过自定义

sort()

功能来做到这一点：

const list = [
  { id: 1, name: "hello world", reference_id: null },
  { id: 2, name: "hello world", reference_id: null },
  { id: 3, name: "hello world", reference_id: 1 },
  { id: 4, name: "hello world", reference_id: null },
  { id: 5, name: "hello world", reference_id: 1 },
  { id: 6, name: "hello world", reference_id: 2 }
];

list.sort((a, b) => {

  // obj.reference_id = 1 goes before obj.reference_id = 2
  if (a.reference_id && b.reference_id) {
    return a.reference_id - b.reference_id;
  }

  // obj.reference_id = 1 goes before obj.id = 2
  if (a.reference_id && !b.reference_id) {
    return a.reference_id - b.id;
  }

  // again, obj.reference_id = 1 goes before obj.id = 2
  if (!a.reference_id && b.reference_id) {
    return a.id - b.reference_id;
  }

  // if reference_id is null then obj.id = 1 goes before obj.id = 2
  return a.id - b.id;
});

console.log(list);