后端同事下班早，前端排序我来搞

好啦，在文章正式开始之前呢，告诉大家个好消息，本文点赞，友善评论，友善建议的大哥大姐们，2024年的后半年，一定能够心想事成，工作顺利，家庭和睦，一直到永久。

321... 文本正式开始。

1 未排序的数据

今天早上来了公司，我赶紧喊老张，问：新来的前端妹子这么快就被你搞定啦？听说昨晚你俩10点一起出的公司？是不是，快说。 老张，猛地抬头，问：你咋知道的？我保密工作做这么好。 我说：门口的李大爷说的。你快说说什么情况啊。

老张说：别瞎说，昨天后端下班早，把接口就给妹子了，妹子本来以为调一调接口，传几个参数完事，结果发现后端给的数据没有排序，但看了产品文档，发现，又要根据学生姓名按字母排序，又要根据分数排序，又要根据年龄排序，又要根据日期排序，直接把妹子气的快哭了，所以我就帮他弄了弄。然后就弄到10点了呗，一起出的公司而已，别瞎想。

但是妹子为了感谢我，告诉了我一个好消息，过会儿和你说。我说：你快点说。老张说：你先听我把功能说完，我再告诉你。

你看，后端就一个接口，给的数据大概是这样子：

const users = [
      {"name": "小张伟", "age": 19, "score": 55, "dateTime": '2021-03-03 15:33:10'},
      {"name": "张三", "age": 22, "score": 65, "dateTime": '2023-03-03 10:10:10'},
      {"name": "李四", "age": 30, "score": 87, "dateTime": '2024-04-03 10:10:10'},
      {"name": "阿斌", "age": 50, "score": 90, "dateTime": '2021-03-03 10:10:10'},
      {"name": "曹小操", "age": 1300, "score": 23, "dateTime": '1021-05-08 10:10:10'},
      {"name": "小张灰", "age": 31, "score": 15, "dateTime": '1994-03-04 08:33:10'},
];

2 根据属性排序

这是一个杂乱的json型数组，但是要根据属性进行排序。我们目前做了3种类型的实现

2.1 引入工具库

这里说一个高效便捷功能丰富的前端JS库，首先引入js-tool-big-box工具库。

执行安装命令：

npm install js-tool-big-box

引入dataBox对象，排序的这些公共方法被放到了这个对象下面：

import { dataBox } from 'js-tool-big-box';

2.2 数值型排序

数值型排序呢，就是，你看，age 和 score 都是数值型的，我们把这些归结为一类进行排序。

2.2.1 根据age从小到大的排序

代码如下：

const ageResult1 = dataBox.sortByNumber(users, 'age');
console.log('age是数值型，从小到大，排序后的值为：', ageResult1);

结果如下：

2.2.2 根据age从大到小的排序

代码如下：

const ageResult2 = dataBox.sortByNumber(users, 'age', 1);
console.log('age是数值型，从大到小，排序后的值为：', ageResult2);

结果如下：

2.2.3 根据score从低到高的排序

代码如下：

const ageResult3 = dataBox.sortByNumber(users, 'score');
console.log('score是数值型，从低到高，排序后的值为：', ageResult3);

结果如下：

2.2.4 根据score从高到低的排序

代码如下：

const ageResult4 = dataBox.sortByNumber(users, 'score', 1);
console.log('score是数值型，从大到小，排序后的值为：', ageResult4);

结果如下：

2.3 中文按字母排序

比如我们的姓名，很多时候需要按字母从A到Z来展示，这个时候就可以用下面这个方法来快速实现：

2.3.1 按字母从A到Z排序

代码如下：

const nameResult1 = dataBox.sortByletter(users, 'name');
console.log('比如name，我们按照字母顺序排序后为：', nameResult1);

结果如下：

2.3.2 按字母从Z到A排序

代码如下：

const nameResult2 = dataBox.sortByletter(users, 'name', 1);
console.log('比如name，我们按照字母顺序倒序排序后为：', nameResult2);

结果如下：

2.3.3 注意

需要注意的是，我们这里只是传入了name的属性，如果这个json中有其他中文属性，也是可以使用这个方法进行按字母排序的，很灵活。

2.4 按日期时间排序

比如我们例子中的时间，按时间排序也是非常实用且常见的需求，

2.4.1 按时间从早到晚排序

代码如下：

const timeResult1 = dataBox.sortByTime(users, 'dateTime');
console.log('以时间从早到晚排序后的值为：', timeResult1);

结果如下：

2.4.2 按时间从晚到早排序

代码如下：

const timeResult2 = dataBox.sortByTime(users, 'dateTime', 1);
console.log('以时间从晚到早排序后的值为：', timeResult2);

结果如下：

2.4.3 注意

需要注意的是，我们例子中只是传入了dateTime属性，如果json对象中有其他的是时间格式的属性值，也可以把属性传入，就可以进行字段的属性排序啦，很便捷。

3 最后

把效果展示完了，我赶紧催促老张说：你刚才跟我说的好消息呢？老张悄声说：妹子和门口老大爷，还有咱们公司老板都姓李，你品去吧。妹子跟我说了，她跟她爸爸说：这个季度的优秀就是我。我一听也跟着高兴起来，希望看到这篇文章的大哥大姐们，也都能像老张一样，升职加薪，变得越来越优秀。

---

最后告诉你个消息： js-tool-big-box的npm地址是(js-tool-big-box 的npm地址)

js-tool-big-box的git仓库地址(js-tool-big-box的代码仓库地址)