JS：按多个列/键对对象数组进行排序

让我们看看如何完整地配置对象数组的排序。假设我们的整个示例包含以下数据集。



let objs = [
  { name: 'Mark',
    age: 30,
    RollNo: 'R01'
  },
  { name: 'Anne',
    age: 20,
    RollNo: 'R02'
  },
  { name: 'James',
    age: 40,
    RollNo: 'R03'
  },
  { name: 'Jerry',
    age: 30,
    RollNo: 'R04'
  },
  { name: 'Lucy',
    age: 30,
    RollNo: 'R05'
  },
  { name: 'Mark',
    age: 30,
    RollNo: 'R06'
  },
]

查看我们拥有的原始数据console.table(objs)

单列排序

现在假设我们要对同一列的数据进行排序。最好的方法是使用 sort() 方法。查看文档。
下面是一个基于简单字符串数组的示例。



const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);

输出是["Dec", "Feb", "Jan", "March"]
这会自动按字母顺序对原始数组进行排序，并在调用 sort() 时返回原始数组。

对字符串进行排序

使用上面的例子，让我们尝试对对象进行排序



objs.sort(function(a, b) {
    return a.name.localeCompare(b.name)
});

这类似于 SQL 语句



SELECT * FROM OBJS ORDER BY NAME;

按数字排序（ES6 方式）

使用 ES6，我们甚至可以将其写成内联函数。让我们尝试根据 age 这个数字字段进行排序。



objs.sort((a, b) => a.age - b.age);

这类似于 SQL 语句



SELECT * FROM OBJS ORDER BY AGE;

多列排序

我们可以使用 || 运算符按照我们需要的排序顺序来组合排序。

按年龄排序，然后按姓名排序



objs.sort((a,b)=> (a.age - b.age || a.name.localeCompare(b.name)  ));

这类似于 SQL 语句



SELECT * FROM OBJS ORDER BY AGE, NAME;

按姓名排序，然后按年龄排序

我们可以修改排序的顺序。例如，如果我们想先按姓名排序，然后再按年龄排序



objs.sort((a,b)=> (a.name.localeCompare(b.name) || a.age - b.age));

这类似于 SQL 语句



SELECT * FROM OBJS ORDER BY NAME, AGE;

更改为降序

如果我们想让年龄和姓名按降序排列，我们只需要将上面的命令替换为



objs.sort((a,b)=> (b.age - a.age || b.name.localeCompare(a.name)  ));

这类似于 SQL 语句



SELECT * FROM OBJS ORDER BY NAME DESC, AGE DESC;

扩展至对所有 3 列进行排序

使用上述逻辑，您可以按照需要的顺序附加您可能需要的排序列数。



objs.sort((a,b)=> (a.name.localeCompare(b.name) || a.age - b.age || a.RollNo - b.RollNo));

这类似于 SQL 语句



SELECT * FROM OBJS ORDER BY NAME , AGE , ROLLNO;

用例

假设你有一个 API，它以随机方式返回一个对象数组。又或者你的 UI 中有一个表格，你想对这些数据进行排序，使其对用户来说最合理（例如按类别或价格排序）。你需要做的就是调整一下上面的逻辑，大功告成！

鏂囩珷鏉ユ簮锛�https://dev.to/markbdsouza/js-sort-an-array-of-objects-on-multiple-columns-keys-2bj1