js进行数组排序
- sort()
- sort()的用法讲解
- sort()的使用举例
- 排序实例
sort()
有时候后台返回给前端的数据并不是有序的,这时候就需要前端对所有数据进行排序处理,然后再进行分页展示,通常我们选择原生js提供的sort()来对数组进行排序。
sort()的用法讲解
sort() 方法用于对数组的元素进行排序,并返回数组。默认根据字符串Unicode码点顺序来排序。
语法:array.sort(fun);
参数fun可以传也可以不传,规定排序为顺序,func必须是函数。
注意:如果调用该方法时没有传入参数,将按字母顺序对数组中的元素进行排序,说得更精确点,就是按照字符编码的顺序进行排序。
如果想按照其他规则进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
总体来说就是: 比较函数两个参数a和b,返回a-b 升序,返回b-a 降序 。
注意:原数组会发生改变。
sort()的使用举例
1.不传参数,将不会按照数值大小排序,而是按照字符编码的顺序进行排序:
var arr1 = ['General','Tom','Bob','John','Army'];
var resArr1 = arr1.sort();
console.log(resArr1);
//输出 ["Army", "Bob", "General", "John", "Tom"]
var arr2 = [30,10,111,35,1899,50,45];
var resArr2 = arr2.sort();
console.log(resArr2);
//输出 [10, 111, 1899, 30, 35, 45, 50]
2.传入参数,实现升序,降序:
//实现升序:
var arr3 = [30,10,111,35,1899,50,45];
arr3.sort(function(a,b){
return a - b;
})
console.log(arr3);
//输出 [10, 30, 35, 45, 50, 111, 1899]
//实现降序:
var arr4 = [30,10,111,35,1899,50,45];
arr4.sort(function(a,b){
return b - a;
})
console.log(arr4);
//输出 [1899, 111, 50, 45, 35, 30, 10]
3.根据数组中的对象的某个属性值排序:
var arr5 = [{id:10},{id:5},{id:6},{id:9},{id:2},{id:3}];
arr5.sort(function(a,b){
return a.id - b.id
})
console.log(arr5);
//输出新的排序:
// {id: 2}
// {id: 3}
// {id: 5}
// {id: 6}
// {id: 9}
// {id: 10}
4.根据ASCII码从小到大排序:
var arr6 = [{name:'partnerid'},{name:'prepayid'},{name:'package'}];
arr6.sort(function(a,b){
for(var i=0; i<a.length;i++){
if(a.name.charCodeAt(i)==b.name.charCodeAt(i)) continue;
return a.name.charCodeAt(i) - b.name.charCodeAt(i);
}
});
console.log(arr6);
//输出 ["package","partnerid","prepayid"]
排序实例
下面我们将会对后台返回的表格数据进行排序,排序之前我们需要利用正则表达式对数据类型进行判断,如果是数字类型,可以直接传入参数实现升序和降序;如果是日期类型,我们要先将该数据转化为毫秒形式,再传入参数进行排序;如果是字符串类型,则要根据字符串的ASCII码循环遍历进行排序。
代码如下:
//判断时间格式为YYYY-MM-DD HH:MM:SS的正则表达式:
$scope.regTime=/^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$/;
//判断数字类型的正则表达式:
$scope.regNum=/^[0-9]*$/;
//升序排序:
$scope.ASC=function(col,index){
$scope.all_table_data.sort(function(a,b){
//判断是否为时间格式
if($scope.regTime.test(a[index][0])){
//转化为毫秒形式比较
return new Date(a[index][0]).getTime()-new Date(b[index][0]).getTime();
//判断是否为数字类型
}else if($scope.regNum.test(a[index][0])){
//直接传入参数进行比较
return a[index][0] - b[index][0];
}else{
//字符串类型,根据ASCII码进行排序
for(var i=0; i<a[index][0].length;i++){
if(a[index][0].charCodeAt(i)==b[index][0].charCodeAt(i)) continue;
return a[index][0].charCodeAt(i) - b[index][0].charCodeAt(i);
}
}
})
}
//降序排序:
$scope.DESC=function(col,index){
$scope.all_table_data.sort(function(a,b){
//判断是否为时间格式
if($scope.regTime.test(a[index][0])){
//转化为毫秒形式比较
return new Date(b[index][0]).getTime()-new Date(a[index][0]).getTime();
//判断是否为数字类型
}else if($scope.regNum.test(a[index][0])){
//直接传入参数进行比较
return b[index][0] - a[index][0];
}else{
//字符串类型,根据ASCII码进行排序
for(var i=0; i<a[index][0].length;i++){
if(a[index][0].charCodeAt(i)==b[index][0].charCodeAt(i)) continue;
return b[index][0].charCodeAt(i) - a[index][0].charCodeAt(i);
}
}
})
}
排序前效果如下:
排序后效果如下: