根据两个不同的值对数组进行排序并保持平面数组结构

Question

我有这个数组

const rows = [
    {data: [{text: "A",value: 100}, {text: "B",value: 74}], group: "Elephant"},
    {data: [{text: "C",value: 63}, {text: "D",value: 1}], group: "Elephant"},
    {data: [{text: "E",value: 37}, {text: "F",value: 54}], group: "Penguin"},
    {data: [{text: "G", value: 72}, {text: "H", value: 74}], group: "Lion"},
    {data: [{text: "K", value: 76}, {text: "L", value: 38}], group: "Zebra"},
    {data: [{text: "M", value: 68}, {text: "N", value: 21}], group: "Lion"},
];

还有这些排序功能

const _sortFunction = (
    a,
    b,
    columnIndex,
    sortOrder
) => {
    if (a && a.data && b && b.data) {
        if (a.data[columnIndex].value === b.data[columnIndex].value) {
            return 0;
        } else {
            if (sortOrder === "ASC") return a.data[columnIndex].value > b.data[columnIndex].value ? -1 : 1;
            if (sortOrder === "DESC") return a.data[columnIndex].value < b.data[columnIndex].value ? -1 : 1;
            return 0;
        }
    } else {
        return 0;
    }
};

const sortRowsByColumn = (rows, sortProps) => {
    if (sortProps && rows) {
        const {indexOfColumnToSort, sortOrder} = sortProps;
        const rowsCopy = JSON.parse(JSON.stringify(rows))
        return rowsCopy.sort((a, b) => _sortFunction(a, b, indexOfColumnToSort, sortOrder));
    }
    return rows;
};

这给了我

console.log(sortRowsByColumn(rows, {indexOfColumnToSort: 1, sortOrder: "ASC"}))

[
{data: [{text: "A", value: 100}, {text: "B", value: 74}], group: "Elephant"}, 
{data: [{text: "G", value: 72}, {text: "H", value: 74}], group: "Lion"}, 
{data: [{text: "E", value: 37}, {text: "F", value: 54}], group: "Penguin"}, 
{data: [{ text: "K", value: 76}, {text: "L", value: 38}], group: "Zebra"}, 
{data: [{text: "M", value: 68}, {text: "N", value: 21}], group: "Lion"}, 
{data: [{text: "C", value: 63}, {text: "D", value: 1}],group: "Elephant"}
]

但是，我无法理解的是： 更新后的

sortRowsByColumn()

功能应该

1. 根据

   rows

   键对

   group

   数组进行排序（按字母顺序）
2. 然后根据每个组的列索引进行排序

所有这一切都不会丢失原始数组结构。基本上就像是对每个组进行分组和排序，而不需要修改数组结构或原始数组。 结果应该是这样的

[
{data: [{text: "A",value: 100}, {text: "B", value: 74}], group: "Elephant"}, 
{data: [{text: "C", value: 63}, {text: "D", value: 1}], group: "Elephant"}, 
{data: [{text: "G", value: 72}, {text: "H", value: 74}], group: "Lion"}, 
{data: [{text: "M", value: 68}, {text: "N", value: 21}], group: "Lion"},
{data: [{text: "E",value: 37}, {text: "F", value: 54}], group: "Penguin"}, 
{data: [{text: "K", value: 76}, {text: "L", value: 38}], group: "Zebra"}, 
]

Answer 1

我认为您必须修改 sortRowsByColumn 函数，首先按组属性对行进行分组，然后根据指定的列索引对每个组进行排序。我可以打印出它的 2 个步骤：

const sortRowsByColumn = (rows, sortProps) => {
    if (!sortProps || !rows) {
        return rows;
    }

    const { indexOfColumnToSort, sortOrder } = sortProps;

    // Group rows by the 'group' key
    const grouped = rows.reduce((acc, row) => {
        acc[row.group] = acc[row.group] || [];
        acc[row.group].push(row);
        return acc;
    }, {});

    // Sort each group individually based on the specified column index
    Object.keys(grouped).forEach(group => {
        grouped[group].sort((a, b) => _sortFunction(a, b, indexOfColumnToSort, sortOrder));
    });

    // Combine the sorted groups back into a single array
    const sortedRows = Object.keys(grouped)
        .sort() // sort the groups alphabetically by their keys
        .reduce((acc, group) => acc.concat(grouped[group]), []);

    return sortedRows;
};

该函数使用reduce 函数按行的组属性对行进行分组。 然后，它使用 _sortFunction 根据指定的列索引对每个组进行排序。 对每个组进行排序后，它将这些已排序的组组合回单个数组。 组本身按其键（组名称）的字母顺序排序。