vue 数组排序、对象排序

10,999 阅读3分钟

sort()函数是javascript中自带的一个函数,顾名思义,这个函数的功能就是排序,sort()函数在实际的应用中还是很多的,所以今天就来讲一下关于这个函数的简单使用。

sort()语法:

/**
 * sortby: 可选,设置排序的逻辑,必须是函数。
 */
arrayObject.sort(sortby)

在使用sort()函数时,函数参数如果不设置的话,会以默认方式进行排序,就是以字母顺序进行排序,准确的讲就是按照字符编码的顺序进行排序。

var arr = [3,2,3,34,12,23,234,84,9];
arr.sort();

// 结果: 12,2,23,234,3,3,34,84,9

可是这个往往不是我们希望的结果。在实际项目中,我们常常要对价格,距离等做排序,针对数字大小的排序,我们可以自己单独写一个排序算法,例如:冒泡排序选择排序插入排序等,但javascript给我们提供了sort()函数,那我们为什么还要重复造轮子呢,况且造的还不“圆”

现在我们就来通过sort(sortby)函数自定义排序的逻辑。

// 升序
var arr = [3,2,3,34,12,23,234,84,9];
arr.sort(function (a, b) {
    return a - b;
});
// 结果:2,3,3,9,12,23,34,84,234

// 降序
var arr = [3,2,3,34,12,23,234,84,9];
arr.sort(function (a, b) {
    return b - a;
});
// 结果:234,84,34,23,12,9,3,3,2

在上述代码中,我们用一个匿名函数作为sort()的参数。在这个匿名函数中,a和b这两个参数我个人理解就是待排序数组中任意两个连续的元素,如果:

  • a - b < 0: 代表后一个比前一个大,就是升序
  • b - a < 0: 代表前一个比后一个大,就是降序
  • a - b = 0 或 b - a = 0: 前后两个数相等

以上仅是个人想法,下面是w3school的解释:

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

现在,对于一个普通的数组排序,我们可以很容易的解决。但是在开发中,这样的普通数组也很少用。在做前端开发时,往往要配合后端的开发,而前后台的交互现在大都是用json格式的数据,比如这样的数据:

{
     "user":[
        { "name": "has", "age": 17, "height": 165 },
        { "name": "saf", "age": 20, "height": 172 },
        { "name": "gngh", "age": 45, "height": 182 },
        { "name": "yjerw", "age": 42, "height": 156 },
        { "name": "cvb", "age": 22, "height": 176 },
        { "name": "wetty", "age": 32, "height": 178 },
        { "name": "aDNY", "age": 34, "height": 175 }
    ]
}

关于对象数组的排序,sort()函数同样是适用的。

对"age"排序:

// 按age升序排列
var arr = {
    "user":[
        { "name": "has",   "age": 17, "height": 165 },
        { "name": "saf",   "age": 20, "height": 172 },
        { "name": "gngh",  "age": 45, "height": 182 },
        { "name": "yjerw", "age": 42, "height": 156 },
        { "name": "cvb",   "age": 22, "height": 176 },
        { "name": "wetty", "age": 32, "height": 178 },
        { "name": "aDNY",  "age": 34, "height": 175 }
     ]
};
var users = arr.user;
users.sort(function (a, b) {
    return a.age - b.age;
});
// 结果(升序):
/*
name:has age:17 height:165
name:saf age:20 height:172
name:cvb age:22 height:176
name:wetty age:32 height:178
name:aDNY age:34 height:175
name:yjerw age:42 height:156
name:gngh age:45 height:182
*/

如果对name排序呢?这时候就要用到这个函数localeCompare(),关于这个函数的使用请自行查看w3school。具体使用方法如下:

// 按name排列
var arr = {
    "user":[
        { "name": "has",   "age": 17, "height": 165 },
        { "name": "saf",   "age": 20, "height": 172 },
        { "name": "gngh",  "age": 45, "height": 182 },
        { "name": "yjerw", "age": 42, "height": 156 },
        { "name": "cvb",   "age": 22, "height": 176 },
        { "name": "wetty", "age": 32, "height": 178 },
        { "name": "aDNY",  "age": 34, "height": 175 }
     ]
};
var users = arr.user;
users.sort(function (a, b) {
    return a.name - b.name;
});
// 结果:
/*
name:aDNY age:34 height:175
name:cvb age:22 height:176
name:gngh age:45 height:182
name:has age:17 height:165
name:saf age:20 height:172
name:wetty age:32 height:178
name:yjerw age:42 height:156
*/

可以看到这样的字符串排序就是按照字符的ASCII码来比较的。

上面就是我个人此阶段对于sort()函数的理解,功能还是很强大的,至于怎么强大了,这完全取决于sort()函数中的匿名函数了。

原文地址: javascript中sort()函数的理解