js中的数组对象排序
⼀、普通数组排序
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,如果第⼀个参数应该位于第⼆个之后则返回⼀个正数。例⼦:
var arr = [23, 9, 4, 78, 3];
var compare = function (x, y) {//⽐较函数
if (x < y) {
return -1;
} else if (x > y) {
return 1;
} else {
return 0;
}
}
console.log(arr.sort(compare));
结果为 [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"] 。
⼆、数组对象排序
如果数组项是对象,我们需要根据数组项的某个属性对数组进⾏排序,要怎么办呢?其实和前⾯的⽐较函数也差不多:
var arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25}];
var compare = function (obj1, obj2) {
var val1 = obj1.name;
var val2 = obj2.name;
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
console.log(arr.sort(compare));
输出结果为 [Object { name="wlz", age=25}, Object { name="zlw", age=24}] ,可以看到数组已经按照 name 属性进⾏了排序。我们可以对上⾯的⽐较函数再改造⼀下:
var compare = function (prop) {
return function (obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
}
如果想按照 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排在25前⾯,但是结果不是。这是因为当两个数字字符串⽐较⼤⼩时,会⽐较它们的A
SCII值⼤⼩,⽐较规则是:从第⼀个字符开始,顺次向后直到出现不同的字符为⽌,然后以第⼀个不同的字符的ASCII值确定⼤⼩。所以"24"与"5"⽐较⼤⼩时,先⽐较”2“与"5"的ASCII值,显然”2“的ASCII值⽐"5"⼩,即确定排序顺序。
现在,我们需要对⽐较函数再做⼀些修改:
var compare = function (prop) {
return function (obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];
if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
val1 = Number(val1);
val2 = Number(val2);
}
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
}sort函数 js
在⽐较函数中,先把⽐较属性值转化为数字 Number(val1) 再通过 !isNaN(Number(val1)) 判断转化后的值是不是数字(有可能是NaN),转化后的值如果是数字,则⽐较转换后的值,这样就可以得到我们想要的结果了,调⽤ arr.sort(compare("age")) 得到:
[Object { name="wlz", age="5"}, Object { name="zlw", age="24"}]
可以看到,确实是按正确的⽅式排序了。
这篇⽂章所讲的都是基础的,没什么技术含量,只是最近项⽬中遇到了对数组对象进⾏排序的问题,所以在这⾥写出来分享⼀下,相信总能帮到⼀些朋友。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论