我想根据 widgetOrder 数组中的 sort_number 对 widgets 数组进行排序和重新排列。 我曾尝试循环小部件数组以在 widgetOrder 中比较 sort_number。此小部件数组表示管理面板仪表板页面上的项目。它具有称为小部件的磁贴，可以更改其位置或显示顺序。当一个tile的位置改变时，它被推送到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 }
];
答案 0 :(得分：1)
如果您不介意重新定义小部件数组，这可能会派上用场：
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() 需要来自同一数组的可比较元素才能工作。 如果您需要保持小部件数组的持久性，请回复，我会尽力提供帮助。
答案 1 :(得分：1)
如果有任何不在 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);答案 2 :(得分：0)
我创建了一个函数来帮助我从 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']))