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

更新时间：2023年05月09日 10:50:00 作者：𝑺𝒉𝒊𝒉𝑯𝒔𝒊𝒏𝒈

在日常工作中，我们经常需要对数组对象进行排序，尤其是在处理数据可视化需求中。本文将介绍一些简单而又实用的方法，帮助你实现对数组对象的某几个 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中的异步能省掉await吗?
这篇文章主要介绍了JavaScript中的异步能省掉await吗?一直以来，困扰我的一个问题是JavaScript中，能否实现不带await的异步。今天我终于把这个问题想通了然后分享给大家，希望对大家的学习过程有所帮助
2021-12-12
微信小程序-小说阅读小程序实例（demo）
本篇文章主要介绍了微信小程序-阅读小程序实例（demo），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
选择复选框按钮置灰否则按钮可用
这篇文章主要介绍了使用js实现选择复选框按钮置灰否则按钮可用,需要的朋友可以参考下
2014-05-05
使用纯原生JS实现大文件分片上传
前段时间在工作中接触到了文件上传的内容,但业务中实现的功能比较简单,于是我想着能不能使用纯原生的方式实现一个大文件的上传DEMO,从而在本质上学习大文件上传的思路,本教程使用纯原生的html+node.js实现,需要的朋友可以参考下
2024-06-06
layui实现下拉框三级联动
这篇文章主要为大家详细介绍了layui实现下拉框三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
用RadioButten或CheckBox实现div的显示与隐藏
用RadioButten（或CheckBox）实现div的显示与隐藏，当选择“女”时，显示“美女、才女”；当选择“男”时隐藏，具体实现如下，感兴趣的朋友可以参考下
2013-09-09
利用JavaScript检测CPU使用率自己写的
这篇文章主要介绍了自己写的一个利用JavaScript检测CPU使用率的方法,需要的朋友可以参考下
2014-03-03
js实现响应按钮点击弹出可拖拽的非模态对话框完整实例【测试可用】
这篇文章主要介绍了js实现响应按钮点击弹出可拖拽的非模态对话框,结合完整实例形式分析了原生JavaScript实现的可拖拽非模态对话框实现技巧与使用方法,需要的朋友可以参考下
2023-04-04
JS中数组合并的几种常见方法
这篇文章主要给大家介绍了关于JS中数组合并的几种常见方法,在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况,文中通过实例代码介绍的非常详细,出现需要的朋友可以参考下
2023-07-07
js获取网页可见区域、正文以及屏幕分辨率的高度
这篇文章主要介绍了js获取网页的各种高度，例如可见区域、正文以及屏幕分辨率的高度,需要的朋友可以参考下
2014-05-05