如何根据reference_id关联关系及display_priority重排序数组？

我需要对API返回的数组进行重排序，规则如下：

• 所有reference_id匹配对应元素id的项，必须放在该元素的下方
• 同时整体要按display_priority排序

API返回原始数据 #

[
  { id: 3, name: 'hello world', reference_id: null, display_priority: 10},
  { id: 6, name: 'hello world', reference_id: 2 , display_priority: 30},
  { id: 1, name: 'hello world', reference_id: 2, display_priority: 40 },
  { id: 4, name: 'hello world', reference_id: null, display_priority: 80},
  { id: 2, name: 'hello world', reference_id: null, display_priority: 100 },
  { id: 5, name: 'hello world', reference_id: 3, display_priority: 110 },
]

期望的重排序结果 #

[
  { id: 3, name: 'hello world', reference_id: null, display_priority: 10 },
  { id: 5, name: 'hello world', reference_id: 3, display_priority: 110 },
  { id: 4, name: 'hello world', reference_id: null, display_priority: 80 },
  { id: 2, name: 'hello world', reference_id: null, display_priority: 100 },
  { id: 6, name: 'hello world', reference_id: 2, display_priority: 30},
  { id: 1, name: 'hello world', reference_id: 2, display_priority: 40},
]

详细排序规则 #

1. 先将所有reference_id为null的元素按display_priority升序排列
2. 每个reference_id不为null的元素，必须放在其reference_id匹配的id元素的正下方
3. 同一个父元素（即同一个reference_id对应的元素）下的子元素，也要按display_priority升序排列

示例：

{ id: 2, name: 'hello world', reference_id: null },
{ id: 6, name: 'hello world', reference_id: 2, display_priority: 30},
{ id: 1, name: 'hello world', reference_id: 2, display_priority: 40},

我尝试的代码（未得到预期输出） #

var product={product_skus:
[
    { id: 1, name: 'hello world', reference_id: 2, display_priority: 40 },
    { id: 2, name: 'hello world', reference_id: null, display_priority: 100 },
    { id: 3, name: 'hello world', reference_id: null, display_priority: 10},
    { id: 4, name: 'hello world', reference_id: null , display_priority: 80},
    { id: 5, name: 'hello world', reference_id: 3, display_priority: 110 },
    { id: 6, name: 'hello world', reference_id: 2 , display_priority: 30},
]};
const reorderedArray = test.reduce((acc, current) => {
    const referenceId = current.reference_id;
    if (referenceId === null) {
      const referencedChildIndex = acc.findIndex(item => item.reference_id === current.id);
      if (referencedChildIndex !== -1) {
        acc.splice(referencedChildIndex, 0, current);
      } else {
        acc.push(current);
      }
    } else {
      const referencedIndex = acc.findIndex(item => item.id === referenceId);
      if (referencedIndex !== -1) {
        acc.splice(referencedIndex + 1, 0, current);
      } else {
        acc.push(current);
      }
    }
    return acc;
}, []);

console.log(reorderedArray);

解决方案 #

你的代码存在三个核心问题：

1. 变量名错误：使用了未定义的test，实际应该指向product.product_skus
2. 未提前按display_priority排序父元素和子元素，导致插入顺序混乱
3. 父元素的插入逻辑有误，没有基于优先级先排好父元素队列

正确的实现逻辑如下：

1. 拆分父元素（reference_id: null）和子元素（reference_id !== null）两组
2. 分别对父、子元素按display_priority升序排序
3. 遍历排序后的父元素，将父元素加入结果数组后，再插入对应所有子元素

代码实现：

var product = {
  product_skus: [
    { id: 1, name: 'hello world', reference_id: 2, display_priority: 40 },
    { id: 2, name: 'hello world', reference_id: null, display_priority: 100 },
    { id: 3, name: 'hello world', reference_id: null, display_priority: 10},
    { id: 4, name: 'hello world', reference_id: null , display_priority: 80},
    { id: 5, name: 'hello world', reference_id: 3, display_priority: 110 },
    { id: 6, name: 'hello world', reference_id: 2 , display_priority: 30},
  ]
};

// 拆分父元素与子元素
const parentItems = product.product_skus.filter(item => item.reference_id === null);
const childItems = product.product_skus.filter(item => item.reference_id !== null);

// 按display_priority升序排序
parentItems.sort((a, b) => a.display_priority - b.display_priority);
childItems.sort((a, b) => a.display_priority - b.display_priority);

// 构建最终排序数组
const reorderedArray = [];
parentItems.forEach(parent => {
  reorderedArray.push(parent);
  // 插入当前父元素对应的所有子元素
  const matchedChildren = childItems.filter(child => child.reference_id === parent.id);
  reorderedArray.push(...matchedChildren);
});

console.log(reorderedArray);

这段代码会输出你期望的结果，逻辑清晰且完全符合设定的排序规则。

内容的提问来源于stack exchange，提问作者rasif sahl