基于另一个数组中的排序号的数组排序

Question

我想根据 widgetOrder 数组中的 sort_number 对 widgets 数组进行排序和重新排列。 我尝试循环小部件数组以比较 widgetOrder 中的 sort_number。此小部件数组表示管理面板仪表板页面上的项目。它具有称为小部件的磁贴，可以更改其位置或显示顺序。当一个瓦片的位置改变时，它被推送到widgetOrder。！

const widgets =
                    [
                        {
                            id: 59,
                            roleId: 3,
                            widgetId: 1,
                            sort_number: 1,
                            created_by: '1',
                            updated_by: '1',
                            createdAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            updatedAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            'dashboardWidget.id': 1,
                            'dashboardWidget.name': 'bookingCount',
                            'dashboardWidget.displayName': 'Booking Count',
                            'dashboardWidget.description': 'Shows the count of total bookings for the time period if specified, otherwise shows all booking count',
                            'dashboardWidget.isCounter': 1
                        },
                        {
                            id: 60,
                            roleId: 3,
                            widgetId: 2,
                            sort_number: 2,
                            created_by: '1',
                            updated_by: '1',
                            createdAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            updatedAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            'dashboardWidget.id': 2,
                            'dashboardWidget.name': 'pickUpCount',
                            'dashboardWidget.displayName': 'Pick-up Count',
                            'dashboardWidget.description': 'Shows the count of total pick-ups for the time period if specified, otherwise shows all pick-up count',
                            'dashboardWidget.isCounter': 1
                        },
                        {
                            id: 61,
                            roleId: 3,
                            widgetId: 3,
                            sort_number: 3,
                            created_by: '1',
                            updated_by: '1',
                            createdAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            updatedAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            'dashboardWidget.id': 3,
                            'dashboardWidget.name': 'dropOutCount',
                            'dashboardWidget.displayName': 'Drop-out Count',
                            'dashboardWidget.description': 'Shows the count of total drop-outs for the time period if specified, otherwise shows all drop-out count',
                            'dashboardWidget.isCounter': 1
                        },
                        {
                            id: 62,
                            roleId: 3,
                            widgetId: 9,
                            sort_number: 4,
                            created_by: '1',
                            updated_by: '1',
                            createdAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            updatedAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            'dashboardWidget.id': 9,
                            'dashboardWidget.name': 'enquiryCount',
                            'dashboardWidget.displayName': 'Enquiry Count',
                            'dashboardWidget.description': 'Shows the count of total enquires for the time period if specified, otherwise shows all enquiry count',
                            'dashboardWidget.isCounter': 1
                        }
                    ];              

const widgetOrder =  [
                            { widgetId: 2, sort_number: 4, is_visible: 1 },
                            { widgetId: 3, sort_number: 1, is_visible: 1 }
                          ];

Answer 1

我创建了一个函数来帮助我从 widgetOrder 中获取排序号

const getSortNumber = (widgetOrder, id) => {
    var orderEle = widgetOrder.filter((ele) => ele['widgetId']===id)[0]
  
  //if no sorting order return 0
  return orderEle? orderEle['sort_number'] : 0
}

然后我使用 .sort() 和函数根据它们的 ID 对小部件进行排序
对于升序/降序，只需在 getSortNumber 参数中交换 a 和 b

widgets = widgets.sort((a,b) => getSortNumber(widgetOrder, b['widgetId']) - getSortNumber(widgetOrder, a['widgetId']))

Answer 2

如果您不介意重新定义小部件数组，这可能会派上用场：

const orderedWidgets = [];
widgetOrder.sort((a,b) => a.sortNumber - b.sortNumber);
for (const orderItem of widgetOrder) {
  const foundWidget = widgets.find((widget) => widget.id === orderItem.id);
  if (foundWidget) {
    orderedWidgets.push(foundWidget);
  }
}
// You'll need to make widgets a variable for this to work:
widgets = orderedWidgets

这是我想到的最简单的解决方案，因为 Array.sort() 需要来自同一数组的可比较元素才能工作。 如果您需要保持您的小部件数组持久化，请回复，我会尽力提供帮助。

Answer 3

如果有任何元素不在widgetOrder 中，那么它们将推送到数组的最后一个。

const widgets = [
  {
    id: 59,
    roleId: 3,
    widgetId: 1,
    sort_number: 1,
    created_by: "1",
    updated_by: "1",
    createdAt: "2021 - 04 - 22T03: 09: 32.098Z",
    updatedAt: "2021 - 04 - 22T03: 09: 32.098Z",
    "dashboardWidget.id": 1,
    "dashboardWidget.name": "bookingCount",
    "dashboardWidget.displayName": "Booking Count",
    "dashboardWidget.description":
      "Shows the count of total bookings for the time period if specified, otherwise shows all booking count",
    "dashboardWidget.isCounter": 1,
  },
  {
    id: 60,
    roleId: 3,
    widgetId: 2,
    sort_number: 2,
    created_by: "1",
    updated_by: "1",
    createdAt: "2021 - 04 - 22T03: 09: 32.098Z",
    updatedAt: "2021 - 04 - 22T03: 09: 32.098Z",
    "dashboardWidget.id": 2,
    "dashboardWidget.name": "pickUpCount",
    "dashboardWidget.displayName": "Pick-up Count",
    "dashboardWidget.description":
      "Shows the count of total pick-ups for the time period if specified, otherwise shows all pick-up count",
    "dashboardWidget.isCounter": 1,
  },
  {
    id: 61,
    roleId: 3,
    widgetId: 3,
    sort_number: 3,
    created_by: "1",
    updated_by: "1",
    createdAt: "2021 - 04 - 22T03: 09: 32.098Z",
    updatedAt: "2021 - 04 - 22T03: 09: 32.098Z",
    "dashboardWidget.id": 3,
    "dashboardWidget.name": "dropOutCount",
    "dashboardWidget.displayName": "Drop-out Count",
    "dashboardWidget.description":
      "Shows the count of total drop-outs for the time period if specified, otherwise shows all drop-out count",
    "dashboardWidget.isCounter": 1,
  },
  {
    id: 62,
    roleId: 3,
    widgetId: 9,
    sort_number: 4,
    created_by: "1",
    updated_by: "1",
    createdAt: "2021 - 04 - 22T03: 09: 32.098Z",
    updatedAt: "2021 - 04 - 22T03: 09: 32.098Z",
    "dashboardWidget.id": 9,
    "dashboardWidget.name": "enquiryCount",
    "dashboardWidget.displayName": "Enquiry Count",
    "dashboardWidget.description":
      "Shows the count of total enquires for the time period if specified, otherwise shows all enquiry count",
    "dashboardWidget.isCounter": 1,
  },
];

const widgetOrder = [
  { widgetId: 2, sort_number: 4, is_visible: 1 },
  { widgetId: 3, sort_number: 1, is_visible: 1 },
];

let result = [];
const temp = [];

widgets.forEach((widget) => {
  const order = widgetOrder.find((o) => o.widgetId === widget.widgetId)?.sort_number;
  if (order) result[order] = widget;
  else temp.push(widget);
});

result = [...result.filter((w) => w), ...temp];
console.log(result);