js中.sort()函数的常见用法与高级操作

叶小刀

这是.sort()函数最常见的用法

1. //没有函数参数，按字符编码格式排序
   
2. var arr = [3,2,3,34,12,23,234,84,9];
   
3. arr.sort();
   
4. 
   
5. // 结果: 12,2,23,234,3,3,34,84,9

复制代码

1. // 需要升序或者降序则需要传入一个函数参数
   
2. var arr = [3,2,3,34,12,23,234,84,9];
   
3. arr.sort(function (a, b) {
   
4.     return a - b;
   
5. });
   
6. // 结果：2,3,3,9,12,23,34,84,234
   
7. 
   
8. // 降序
   
9. var arr = [3,2,3,34,12,23,234,84,9];
   
10. arr.sort(function (a, b) {
    
11.     return b - a;
    
12. });

复制代码

但或许你还对其为什么要这么操作存有一些疑惑
我们要先搞懂往.sort()里传入的函数的参数a，b是什么
sort()要排序就要遍历数组，以上面的数组为例子
其中遍历第一步的a=3、b=2，
第二步时候a=2、b=3，
第三步的时候a=3，b=34
。。。。。。。
就像你写的冒泡排序一样，每一个元素都会被对比到
如何排序呢？这是w3c对其的解释：

1. 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。若 a 等于 b，则返回 0。若 a 大于b，则返回一个大于 0 的值。

复制代码

也就是说，在传入的函数里如果你想a排在b前，就return一个小于0的数
如果你想a排在b后，就return一个大于0的数
这样，就能完成对数组元素的排序了。
清楚了原理，那么我们就可以想到一些高级的骚操作了
关于对象数组的排序：

1. // 按age升序排列
   
2. var users =[
   
3.         { "name": "has",   "age": 17, "height": 165 },
   
4.         { "name": "saf",   "age": 20, "height": 172 },
   
5.         { "name": "gngh",  "age": 45, "height": 182 },
   
6.         { "name": "yjerw", "age": 42, "height": 156 },
   
7.         { "name": "cvb",   "age": 22, "height": 176 },
   
8.         { "name": "wetty", "age": 32, "height": 178 },
   
9.         { "name": "aDNY",  "age": 34, "height": 175 }
   
10.      ]
    
11. users.sort(function (a, b) {
    
12.     return a.age - b.age;
    
13. });
    
14. // 结果（升序）：
    
15. /*
    
16. name:has age:17 height:165
    
17. name:saf age:20 height:172
    
18. name:cvb age:22 height:176
    
19. name:wetty age:32 height:178
    
20. name:aDNY age:34 height:175
    
21. name:yjerw age:42 height:156
    
22. name:gngh age:45 height:182
    
23. */

复制代码

1. // 按name排列
   
2. var users =[
   
3.         { "name": "has",   "age": 17, "height": 165 },
   
4.         { "name": "saf",   "age": 20, "height": 172 },
   
5.         { "name": "gngh",  "age": 45, "height": 182 },
   
6.         { "name": "yjerw", "age": 42, "height": 156 },
   
7.         { "name": "cvb",   "age": 22, "height": 176 },
   
8.         { "name": "wetty", "age": 32, "height": 178 },
   
9.         { "name": "aDNY",  "age": 34, "height": 175 }
   
10.      ]
    
11. var users.sort(function (a, b) {
    
12.     return a.name - b.name;
    
13. });
    
14. // 结果：
    
15. /*
    
16. name:aDNY age:34 height:175
    
17. name:cvb age:22 height:176
    
18. name:gngh age:45 height:182
    
19. name:has age:17 height:165
    
20. name:saf age:20 height:172
    
21. name:wetty age:32 height:178
    
22. name:yjerw age:42 height:156
    
23. */

复制代码

1. // 按布尔值排列
   
2. var users=[
   
3.         { "name": "has",   "age": 17, "height": 165, "state": true},
   
4.         { "name": "saf",   "age": 20, "height": 172, "state": false},
   
5.         { "name": "gngh",  "age": 45, "height": 182, "state": false },
   
6.         { "name": "yjerw", "age": 42, "height": 156, "state": true },
   
7.         { "name": "cvb",   "age": 22, "height": 176, "state": false },
   
8.         { "name": "wetty", "age": 32, "height": 178, "state": true },
   
9.         { "name": "aDNY",  "age": 34, "height": 175, "state": false }
   
10.      ]
    
11. users.sort(function (a, b) {
    
12.     return b.state- a.state;
    
13. });
    
14. //众所周知，true - false = 1
    
15. //结果
    
16. /*
    
17. [
    
18.   { name: 'has', age: 17, height: 165, state: true },
    
19.   { name: 'yjerw', age: 42, height: 156, state: true },
    
20.   { name: 'wetty', age: 32, height: 178, state: true },
    
21.   { name: 'saf', age: 20, height: 172, state: false },
    
22.   { name: 'gngh', age: 45, height: 182, state: false },
    
23.   { name: 'cvb', age: 22, height: 176, state: false },
    
24.   { name: 'aDNY', age: 34, height: 175, state: false }
    
25. ]
    
26. */

复制代码

总结
到此这篇关于js中.sort()函数的常见用法与高级操作的文章就介绍到这了,更多相关js中.sort()函数用法内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

毫各个万万夏

顶顶更健康！！！

刁冰枫

路过，支持一下

A863

感谢楼主分享。