如何使用 JavaScript 在多列上对数组进行排序？

在实现表格排序和搜索功能中，我们经常需要对多列数据进行排序。这篇文章将介绍如何使用 JavaScript 在多列上对数组进行排序。

使用 Array.sort()

JavaScript 的数组原生提供了排序方法 sort()。sort() 方法的默认行为是，根据 Unicode 编码顺序对数组中的每个元素进行排序。如果要对数值进行排序，就需要传递一个排序函数作为参数。

单列排序

对于单列排序，我们可以直接传递一个排序函数给 sort() 方法：

const array = [10, 8, 5, 1, 7];
array.sort((a, b) => a - b);
console.log(array); // [1, 5, 7, 8, 10]

上面的代码使用箭头函数定义排序函数 (a, b) => a - b，它按升序排序，如果要按降序排序，则改为 (a, b) => b - a。

多列排序

对于多列排序，我们需要在排序函数中依次比较多个属性。

假设我们有一个包含 name、age 和 height 属性的数组：

const people = [
  {name: 'Alice', age: 25, height: 165},
  {name: 'Bob', age: 20, height: 180},
  {name: 'Charlie', age: 30, height: 170},
  {name: 'David', age: 25, height: 175},
];

现在我们要按照 age 和 height 排序，首先比较 age，如果相等再比较 height，可以这样实现排序函数：

people.sort((p1, p2) => {
  if (p1.age !== p2.age) {
    return p1.age - p2.age;
  } else {
    return p1.height - p2.height;
  }
});

上面的排序函数先比较 age，如果不相等就返回 age 差值，如果相等再比较 height 差值，最后返回两个差值的和。这样就能实现多列排序了。

使用 Lodash

Lodash 是一个非常流行的 JavaScript 工具库，其中包含了大量实用的函数，包括排序和数组操作等。

Lodash 的 orderBy() 函数可以方便地对数组进行多列排序，使用方法如下：

const _ = require('lodash');

const people = [
  {name: 'Alice', age: 25, height: 165},
  {name: 'Bob', age: 20, height: 180},
  {name: 'Charlie', age: 30, height: 170},
  {name: 'David', age: 25, height: 175},
];

const result = _.orderBy(people, ['age', 'height'], ['asc', 'desc']);
console.log(result);

上面的代码使用 orderBy() 函数对 people 数组进行了多列排序，先按 age 升序排序，再按 height 降序排序。orderBy() 函数的第一个参数是被排序的数组，第二个参数是要排序的属性名称数组，第三个参数是对应的排序方向数组。

除了 orderBy() 函数，Lodash 还提供了很多其他的数组操作函数，有兴趣的读者可以前往官方文档查阅。

总结

本文介绍了如何使用 JavaScript 在多列上对数组进行排序。单列排序可以直接使用 sort() 方法，多列排序可以编写排序函数依次比较多个属性，或者使用 Lodash 的 orderBy() 函数。在实际开发中，我们可以根据需要选择合适的方法实现所需的排序功能。