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

写掘金博客有一小段时间了，我发现了一个秘密。文章阅读量小了吧，很心烦，阅读量大了吧，更心烦。很多特别懂特别会的大哥们就会来“指点”我。感谢这些大哥们的“指点”，使我进步。后来我和群里的小伙伴们讨论了一下，为什么掘金文章会有那么多大哥们来“开心指点”呢？大概是这么几种情况：

1 他们爱学习，爱分享，但是即将要被裁员了，所以心情不是太好，怎么办呢？去掘金上指点他们去，让他们知道自己很会很懂；

2 他们在团队中就是翘楚，指点完了团队的人，然后不放心，怕世界不足够完美，反正自己也要被裁员了，有时间，然后补偿没拿够，心情不太好，去给他们指点指点去；

3 他们一直觉得自己不太懂，但是看见文章又想指点指点，所以呢，在家找了3个月工作这段时间，一边学习，然后看大家的文章，学习过程中呢，看哪里觉得不太合适，指点指点，希望趁着阅读量高的文章，好希望有人能发现他们，直接邀约他们入职；

这种人呢，我们总结了一下，他们可以叫“黑哥会”，意思就是黑哥们，比较会，啥都会那种，嗯，希望黑哥会的成员们早日找到心仪的工作，在家闲着不好的。

好啦，在文章正式开始之前呢，告诉大家个好消息，本文点赞，友善评论，友善建议的大哥大姐们，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的代码仓库地址)