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

有时候我们需要在数组中按照多个属性来排序。在 JavaScript 中，我们可以使用 Array.prototype.sort() 方法对数组进行排序。但是默认情况下，sort() 方法只能按照一个属性进行排序。那么如何在多列上对数组进行排序呢？

以下是一些可能会用到的 JavaScript 的方法和技巧。

使用数组排序方法

首先让我们看看如何使用 sort() 方法进行单列排序。sort() 方法可以接受一个排序函数作为参数。该函数接受两个参数 a 和 b，代表待比较的两个元素。

例如，如果我们想对一个包含数字的数组进行排序，我们可以这样写：

const numbers = [4, 2, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4]

排序函数返回一个负值表示 a 应该在 b 的前面，返回一个正值表示 a 应该在 b 的后面，返回 0 表示 a 和 b 相等，顺序不变。

然后我们来看看如何按照多列进行排序，例如按照年龄和姓名进行排序。我们可以这样写：

const people = [
  { name: 'John', age: 25 },
  { name: 'David', age: 30 },
  { name: 'Jane', age: 20 },
  { name: 'Bob', age: 25 }
];

people.sort((a, b) => {
  if (a.age !== b.age) {
    return a.age - b.age; // 先按照年龄升序排序
  } else {
    return a.name.localeCompare(b.name); // 年龄相同则按照姓名升序排序
  }
});

console.log(people);

输出

[
  { name: 'Jane', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'John', age: 25 },
  { name: 'David', age: 30 }
]

使用 lodash 或 Underscore.js 库

如果你不想手动编写排序函数，那么可以将排序工作交给 lodash 或 Underscore.js 库。这些库提供了一些有用的函数，可以轻松地按照多列对数组进行排序。

例如，使用 lodash 库的 _.orderBy() 函数，我们可以这样写：

const people = [
  { name: 'John', age: 25 },
  { name: 'David', age: 30 },
  { name: 'Jane', age: 20 },
  { name: 'Bob', age: 25 }
];

const sortedPeople = _.orderBy(people, ['age', 'name'], ['asc', 'asc']);
console.log(sortedPeople);

调用 _.orderBy() 函数时，我们传递了三个参数。第一个参数是待排序的数组，第二个参数是一个字符串数组，其中每个字符串代表一个排序属性。第三个参数是一个字符串数组，其中每个字符串代表排序方式。如果排序属性需要按照升序排序，就用 'asc'，如果需要按照降序排序，就用 'desc'。

这个例子中我们传递的排序属性是 'age' 和 'name'。结果数组首先按照年龄升序排序，如果年龄相同则按照姓名升序排序。

输出

[
  { name: 'Jane', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'John', age: 25 },
  { name: 'David', age: 30 }
]

使用多个 sort() 方法

如果你不使用 lodash 或 Underscore.js 库，但是仍然不想手动编写排序函数，那么你可以使用多个 sort() 方法。

例如，将之前的例子修改为：

const people = [
  { name: 'John', age: 25 },
  { name: 'David', age: 30 },
  { name: 'Jane', age: 20 },
  { name: 'Bob', age: 25 }
];

people.sort((a, b) => a.age - b.age); // 按照年龄升序排序
people.sort((a, b) => {
  if (a.age === b.age) {
    return a.name.localeCompare(b.name); // 年龄相同则按照姓名升序排序
  }
});

console.log(people);

这里我们连续调用了两个 sort() 方法。第一个 sort() 方法按照年龄升序排序，接着第二个 sort() 方法在根据年龄排序后的数组中按照姓名升序排序。

输出

[
  { name: 'Jane', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'John', age: 25 },
  { name: 'David', age: 30 }
]

结论

在 JavaScript 中，使用 sort() 方法能够轻松地对数组进行排序。对于多列排序，可以手动编写排序函数或者使用第三方库来实现。无论哪种方法，多列排序都能让我们更方便地处理带有多个排序属性的数组。