Javascript中的数组对象排序

落日映苍穹つ 2023-06-05 08:15 38阅读 0赞

## 一、普通数组排序　　 ##

js中用方法sort()为数组排序。sort()方法有一个可选参数，是用来确定元素顺序的函数。如果这个参数被省略，那么数组中的元素将按照ASCII字符顺序进行排序。如：

var arr = ["a", "b", "A", "B"];
    arr.sort();
    console.log(arr);//["A", "B", "a", "b"]

因为字母A、B的ASCII值分别为65、66，而a、b的值分别为97、98，所以上面输出的结果是 `["A", "B", "a", "b"]` 。

如果数组元素是数字呢，结果会是怎样？

var arr = [15, 8, 25, 3];
    arr.sort();
    console.log(arr);//[15, 25, 3, 8]

结果是 `[15, 25, 3, 8]` 。其实，`sort`方法会调用每个数组项的`toString()`方法，得到字符串，然后再对得到的字符串进行排序。虽然数值15比3大，但在进行字符串比较时”15”则排在”3”前面。显然，这种结果不是我们想要的，这时，`sort()`方法的参数就起到了作用，我们把这个参数叫做比较函数。

比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个之后则返回一个正数。例子：

结果为 `[3, 4, 9, 23, 78]` ，返回了我们想要的结果。如果要按降序排序，比较函数写成这样即可：

var compare = function (x, y) {
        if (x < y) {
            return 1;
        } else if (x > y) {
            return -1;
        } else {
            return 0;
        }
    }

我们并不能用比较函数比较一个不能转化为数字的字符串与数字的顺序：

var arr = ["b", 5];
    console.log(arr.sort(compare))

结果是 `["b", 5]` 。因为比较函数在比较时，会把先把字符串转化为数字，然后再比较，字符串b不能转化为数字，所以就不能比较大小。然而，当不用比较函数时，会比较`ASCII`值，所以结果是 `[5, "b"]` 。

## 二、数组对象排序 ##

如果数组项是对象，我们需要根据数组项的某个属性对数组进行排序，要怎么办呢？其实和前面的比较函数也差不多：

输出结果为 `[Object { name="wlz", age=25}, Object { name="zlw", age=24}]` ，可以看到数组已经按照 `name` 属性进行了排序。我们可以对上面的比较函数再改造一下：

如果想按照 `age` 进行排序， `arr.sort(compare("age"))` 即可。

但是对age属性进行排序时需要注意了，如果age属性的值是数字，那么排序结果会是我们想要的。但很多时候我们从服务器传回来的数据中，属性值通常是字符串。现在我把上面的数组改为：

var arr = [{name: "zlw", age: "24"}, {name: "wlz", age: "5"}];

可以看到，我把 `age` 属性由数字改为了字符串，第二个数组项的 `age` 值改为了 “5” 。再次调用 `arr.sort(compare("age"))` 后，结果为：

[Object { name="zlw", age="24"}, Object { name="wlz", age="5"}]

我们的期望是5排在24前面，但是结果不是。这是因为当两个数字字符串比较大小时，会比较它们的ASCII值大小，比较规则是：从第一个字符开始，顺次向后直到出现不同的字符为止，然后以第一个不同的字符的ASCII值确定大小。所以”24”与”5”比较大小时，先比较”2“与”5”的ASCII值，显然”2“的ASCII值比”5”小，即确定排序顺序。

现在，我们需要对比较函数再做一些修改：

在比较函数中，先把比较属性值转化为数字 `Number(val1)` 再通过 `!isNaN(Number(val1))` 判断转化后的值是不是数字(有可能是`NaN`)，转化后的值如果是数字，则比较转换后的值，这样就可以得到我们想要的结果了， 调用 `arr.sort(compare("age"))` 得到：

[Object { name="wlz", age="5"}, Object { name="zlw", age="24"}]

可以看到，确实是按正确的方式排序了。

--------------------

## Js数组排序函数sort()介绍 ##

`JavaScript`实现多维数组、对象数组排序，其实用的就是原生的`sort()`方法，用于对数组的元素进行排序。  
`sort()` 方法用于对数组的元素进行排序。语法如下：

arrayObject.sort(sortby)

返回值为对数组的引用。请注意，数组在原数组上进行排序，不生成副本。  
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。  
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

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

function NumAscSort(a,b)
    {
     return a - b;
    }
    function NumDescSort(a,b)
    {
     return b - a;
    }
    var arr = new Array( 3600, 5010, 10100, 801); 
    arr.sort(NumDescSort);
    alert(arr);
    arr.sort(NumAscSort);
    alert(arr);

`sort(fun)`接受了个排序规则函数，这个函数将比较2个数字的大小。而我们的对象数组排序，实际上原理也是一样的。  
如果不比较数字的大小，则可以这样：

var myarray=["Apple", "Banana", "Orange"]
    myarray.sort()

数组直接调用`sort()`后，数组按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。  
对于对象数组排序，我们先写一个构造比较函数的函数：

//by函数接受一个成员名字符串做为参数
    //并返回一个可以用来对包含该成员的对象数组进行排序的比较函数
    var by = function(name){
     return function(o, p){
       var a, b;
       if (typeof o === "object" && typeof p === "object" && o && p) {
         a = o[name];
         b = p[name];
         if (a === b) {
           return 0;
         }
         if (typeof a === typeof b) {
           return a < b ? -1 : 1;
         }
         return typeof a < typeof b ? -1 : 1;
       }
       else {
         throw ("error");
       }
     }
    }

要排序的数组：

var employees=[]
    employees[0]={name:"George", age:32, retiredate:"March 12, 2014"}
    employees[1]={name:"Edward", age:17, retiredate:"June 2, 2023"}
    employees[2]={name:"Christine", age:58, retiredate:"December 20, 2036"}
    employees[3]={name:"Sarah", age:62, retiredate:"April 30, 2020"}

直接调用函数：

employees.sort(by("age"));

到这里，对象数组排序就算基本实现了。那如何实现多个键值排序呢？意思就是先是对`age`排序，如果`age`相同，再比较`name`。  
这时，我们可以进一步修改`by`函数，让其可以接受第二个参数，当主要的键值产生一个匹配的时候，另一个`compare`方法将被调用以决出高下。

//by函数接受一个成员名字符串和一个可选的次要比较函数做为参数
    //并返回一个可以用来包含该成员的对象数组进行排序的比较函数
    //当o[age] 和 p[age] 相等时，次要比较函数被用来决出高下
    var by = function(name,minor){
     return function(o,p){
       var a,b;
       if(o && p && typeof o === 'object' && typeof p ==='object'){
         a = o[name];
         b = p[name];
         if(a === b){
           return typeof minor === 'function' ? minor(o,p):0;
         }
         if(typeof a === typeof b){
           return a < b ? -1:1;
         }
         return typeof a < typeof b ? -1 : 1;
       }else{
         thro("error");
       }
     }
    }
    
    employees.sort(by('age',by('name')));