JavaScript中好用的数组对象排序方法分享

Tesia ·

更新时间:2024-09-20

· 539 次阅读

简单的排序方法

实现多重排序

具有通用性的排序方法

使用 Lodash 库

结论

在日常工作中，我们经常需要对数组对象进行排序。尤其是在处理数据可视化需求中，根据不同的数值维度进行排序是必不可少的。本文将介绍一些简单而又实用的方法，帮助你实现对数组对象的某几个 key 进行排序。

简单的排序方法

在最开始，我们先了解最基本的排序方法：sort()。这是 JavaScript 原生的一个函数，可以通过传入一个比较函数来实现对数组对象的排序。比较函数接收两个参数 a 和 b，如果 a 应该排在 b 的前面就返回负数，如果 a 应该排在 b 的后面就返回正数，如果 a 和 b 的位置无所谓就返回 0。

// 按照 age 属性进行排序
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];
people.sort((a, b) => a.age - b.age);
console.log(people);
/*
Output: [ 
    { name: 'Bob', age: 20 }, 
    { name: 'Alice', age: 25 }, 
    { name: 'Charlie', age: 30 }
]
*/

这里的比较函数 (a, b) => a.age - b.age 可以理解为“按照 age 升序排列”。如果想要按照降序排列，只需要将函数改为 (a, b) => b.age - a.age 即可。

实现多重排序

如果要按照多个属性进行排序，我们可以在比较函数中添加更多的逻辑。例如，假设我们想先按照 age 排序，然后按照 name 排序。可以这样实现：

// 按照 age 和 name 属性进行排序
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 },
  { name: 'Bob', age: 15 },
  { name: 'Alice', age: 20 }
];
people.sort((a, b) => {
  if (a.age !== b.age) {
    return a.age - b.age;
  } else {
    return a.name.localeCompare(b.name);
  }
});
console.log(people);
/*
Output: [
  { name: 'Bob', age: 15 },
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]
*/

这里的比较函数先判断两个元素的 age 属性是否相同，如果不同就按照 age 排序；如果相同，再按照 name 排序。注意到这里用了 localCompare() 方法来对字符串进行排序。

具有通用性的排序方法

上面的方法虽然简单易懂，但是当我们需要对多个不同的数组进行排序时，每次都写一个比较函数会显得很麻烦。这时候，我们可以使用一个具有通用性的排序方法 sortBy()。

sortBy() 方法接收两个参数：要排序的数组，以及一个包含排序规则的数组。排序规则数组中的每个元素表示一个排序规则，它本身就是一个由属性名和排序方向组成的数组。

下面是一个简单的实现：

/**
 * 对数组对象的指定属性进行排序
 * @param {Array} arr 数组对象
 * @param {Array} rules 排序规则，每个元素都是形如 ['key', 'asc'] 或者 ['key', 'desc'] 的数组
 */
function sortBy(arr, rules) {
  return arr.sort((a, b) => {
    for (let i = 0; i < rules.length; i++) {
      const [key, direction] = rules[i];
      const order = direction === 'desc' ? -1 : 1;
      if (a[key] < b[key]) {
        return -1 * order;
      }
      if (a[key] > b[key]) {
        return 1 * order;
      }
    }
    return 0;
  });
}

使用方法也很简单。假设我们有一个数组对象，每个对象都包含 name、age 和 score 三个属性。我们想先按照 score 降序排列，然后按照 age 升序排列。只需要这样调用：

const students = [
  { name: 'Alice', age: 20, score: 90 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'David', age: 25, score: 85 }
];
const result = sortBy(students, [
  ['score', 'desc'],
  ['age', 'asc']
]);
console.log(result);
/*
Output: [
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'David', age: 25, score: 85 },
  { name: 'Alice', age: 20, score: 90 }
]
*/

sortBy() 方法可以轻松地实现多重排序，而且相对于每次写比较函数更加方便。不仅如此，还可以扩展到更复杂的排序需求中。例如，如果我们想按照年龄在 20 到 30 岁之间的学生先排列，然后再按照分数排序，只需要传入这样的规则：

const result = sortBy(students, [
  [(student) => student.age >= 20 && student.age <= 30, 'asc'],
  ['score', 'desc']
]);
console.log(result);
/*
Output: [
  { name: 'Alice', age: 20, score: 90 },
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'David', age: 25, score: 85 }
]
*/

这里使用了一个匿名函数 (student) => student.age >= 20 && student.age <= 30，用于判断当前元素是否符合条件。如果符合条件就返回 true，否则返回 false。这个函数可以根据具体需求进行修改。

使用 Lodash 库

最后介绍一下 Lodash 库，它是一个 JavaScript 实用工具库，提供了很多方便的数组操作方法，包括排序。如果你不介意引入一个外部库的话，Lodash 是一个非常好用的选择。

假设我们还是要对上面的学生数组进行排序。使用 Lodash 可以这样实现：

import _ from 'lodash';
const sortedStudents = _.orderBy(students, ['score', 'age'], ['desc', 'asc']);
console.log(sortedStudents);
/*
Output: [
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'David', age: 25, score: 85 },
  { name: 'Alice', age: 20, score: 90 }
]
*/

这里的 orderBy() 方法接收三个参数：要排序的数组，以及一个包含排序属性的数组和一个包含排序方向的数组。属性数组中的元素表示按照哪些属性进行排序，而方向数组中的元素表示每个属性对应的排序方向。

如果要对多重属性进行不同的排序方向，可以这样写：

const sortedStudents = _.orderBy(students, [
  (student) => student.age >= 20 && student.age <= 30,
  'score'
], ['asc', 'desc']);
console.log(sortedStudents);
/*
Output: [
  { name: 'Alice', age: 20, score: 90 },
  { name: 'Charlie', age: 22, score:95 },
  { name: 'David', age: 25, score: 85 },
  { name: 'Bob', age: 25, score: 85 }
]
*/

这里的第一个元素是一个函数，用于判断当前元素是否符合条件。如果符合条件就返回 true，否则返回 false。

总的来说，Lodash 提供了非常方便的数组排序方法，通过引入 Lodash 可以大大简化我们的排序操作。

结论

实现对数组对象进行排序并不是很复杂，但是有几个需要注意的点：

如果只需要对单个属性进行排序，可以使用 JavaScript 原生的 sort() 方法；

如果需要对多个属性进行排序，可以在比较函数中添加更多逻辑或者使用一个通用的排序方法；

如果对多个数组进行排序，可以考虑使用 Lodash 库。

到此这篇关于JavaScript中好用的数组对象排序方法分享的文章就介绍到这了,更多相关JavaScript数组对象排序内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

排序方法方法对象排序数组 JavaScript

1024 个赞