根据字符串长度自定义排序

Question

我想对这些数据进行排序。

我的数据是这样的：

var test = [ 
      {label: '41_45', 
      value :14}, 
      {label: '46_50', 
      value :34}, 
      {label: '1', 
      value :44}, 
      {label: '10_15', 
      value :84} 
      {label: '3', 
      value :44}, 
      {label: '6_10', 
      value :94}, 
      {label: '16_20', 
      value :74}, 
      {label: '21_25', 
      value :64}, 
      {label: '26_30', 
      value :44}, 
      {label: '31_35', 
      {label: '4', 
      value :44}, 
      {label: '5', 
      value :24}, 
      {label: '36_40', 
      value :444}, 
      {label: '>50', 
      value :24}, 
      {label: '2', 
      value :44} 
     ]; 

但我想根据标签进行排序，以便我能得到这样的结果：

var test = [ 
      {label: '1', 
      value :44}, 
      {label: '2', 
      value :44}, 
      {label: '3', 
      value :44}, 
      {label: '4', 
      value :44}, 
      {label: '5', 
      value :24}, 
      {label: '6_10', 
      value :94}, 
      {label: '11_15', 
      value :84}, 
      {label: '16_20', 
      value :74}, 
      {label: '21_25', 
      value :64}, 
      {label: '26_30', 
      value :44}, 
      {label: '31_35', 
      value :4}, 
      {label: '36_40', 
      value :444}, 
      {label: '41_45', 
      value :14}, 
      {label: '46_50', 
      value :34}, 
      {label: '>50', 
      value :24} 
     ]; 

是否有任何库或函数我可以利用来实现这一目标？

Answer 1

虽然这可能使用角度来完成过滤器（如其他人所提到的），它也可以在查看逻辑之前完成，利用JavaScript函数array.sort()。 排序（）可以接受的可选功能的compareFunction，可以处理排序的项目：

如果的compareFunction被提供时，所述阵列元件根据比较函数的返回值来分类的。如果两个元素进行比较，然后a和b是：

• 如果compareFunction(a, b)小于0，排序一个比B，即一个较低折射率的第一。
• 如果compareFunction(a, b)返回0，则相对于彼此保持a和b不变，但相对于所有不同的元素进行排序。注意：ECMAscript标准并不保证这种行为，因此并非所有浏览器（例如，至少可以追溯到2003年的Mozilla版本）都尊重这一点。
• 如果compareFunction(a, b)大于0，则将b排序为比a更低的索引。
• compareFunction(a, b)当给定一对特定元素a和b作为其两个参数时，必须始终返回相同的值。如果返回不一致的结果，那么排序顺序是未定义的。 ¹

为了比较每个项目，它是一个字符串的标签属性，使用parseInt()比较项目时，如在下面的代码从字符串解析的整数。通知作为基数传递（参数为2 ^和），以确保没有字符串被错误地解析为十六进制/八进制数。

var newArray = test.sort(function(item1, item2) { 
    if (parseInt(item1.label,10) < parseInt(item2.label,10)) { 
     return -1; //put item2 after item1 
    } 
    return 1; //otherwise put item1 after item2 
}); 

请参见下面的这个演示（点击运行的代码片段看到的结果）。使用ternary operator简化了条件逻辑。

var test = 
 
    [{ 
 
     label: '41_45', 
 
     value: 14 
 
    }, { 
 
     label: '46_50', 
 
     value: 34 
 
    }, { 
 
     label: '1', 
 
     value: 44 
 
    }, { 
 
     label: '10_15', 
 
     value: 84 
 
    }, { 
 
     label: '3', 
 
     value: 44 
 
    }, { 
 
     label: '6_10', 
 
     value: 94 
 
    }, { 
 
     label: '16_20', 
 
     value: 74 
 
    }, { 
 
     label: '21_25', 
 
     value: 64 
 
    }, { 
 
     label: '26_30', 
 
     value: 44 
 
    }, { 
 
     label: '31_35' 
 
    }, { 
 
     label: '4}', 
 
     value: 44 
 
    }, { 
 
     label: '5', 
 
     value: 24 
 
    }, { 
 
     label: '36_40', 
 
     value: 444 
 
    }, { 
 
     label: '>50', 
 
     value: 24 
 
    }, { 
 
     label: '2', 
 
     value: 44 
 
    }]; 
 
var newArray = test.sort(function(item1, item2) { 
 
    return (parseInt(item1.label,10) < parseInt(item2.label,10))?-1:1; 
 
    }); 
 
console.log(newArray);

---

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

一个很好的选择是使用

var users = [ 
    { 'user': 'fred', 'age': 48 }, 
    { 'user': 'barney', 'age': 36 }, 
    { 'user': 'fred', 'age': 40 }, 
    { 'user': 'barney', 'age': 34 } 
]; 

_.sortBy(users, [function(o) { return o.user; }]); 
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]] 

_.sortBy(users, ['user', 'age']); 
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]] 

Answer 3

如果你想使用angular做在视图中，可以使用排序依据与ng repeat过滤器，

代码：

<div ng-repeat="item in test | orderBy:'label' "> 
    <h1>{{item}}</h1> 
    </div> 

如果你想这样做的控制器，可以使用$过滤器，

代码

$scope.filtered = $filter('orderBy')($scope.test, 'label'); 

DEMO

var app = angular.module('app', []); 
 
app.controller('loginController', ['$scope','$filter', function($scope,$filter) { 
 
    $scope.test = 
 
    [{ 
 
     label: '41_45', 
 
     value: 14 
 
    }, { 
 
     label: '46_50', 
 
     value: 34 
 
    }, { 
 
     label: '1', 
 
     value: 44 
 
    }, { 
 
     label: '10_15', 
 
     value: 84 
 
    }, { 
 
     label: '3', 
 
     value: 44 
 
    }, { 
 
     label: '6_10', 
 
     value: 94 
 
    }, { 
 
     label: '16_20', 
 
     value: 74 
 
    }, { 
 
     label: '21_25', 
 
     value: 64 
 
    }, { 
 
     label: '26_30', 
 
     value: 44 
 
    }, { 
 
     label: '31_35' 
 
    }, { 
 
     label: '4}', 
 
     value: 44 
 
    }, { 
 
     label: '5', 
 
     value: 24 
 
    }, { 
 
     label: '36_40', 
 
     value: 444 
 
    }, { 
 
     label: '>50', 
 
     value: 24 
 
    }, { 
 
     label: '2', 
 
     value: 44 
 
    }]; 
 
    $scope.filtered = $filter('orderBy')($scope.test, 'label'); 
 
}]);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
</head> 
 

 
<body ng-app="app" ng-controller="loginController"> 
 
    <div ng-repeat="item in filtered"> 
 
    <h1>{{item}}</h1> 
 
    </div> 
 
    <script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script> 
 
    <script type="text/javascript " src="MainViewController.js "></script> 
 
</body> 
 
</html>

Answer 4

可行解将被@Sajeetharan已经建议。 Angular可以更好地控制这些数据，这些数据效率高且易于实现。

您可以使用过滤器从角度js获得输出的时间。

<table> 
     <tr> 
      <td>label</td> 
      <td>value</td> 
     </tr> 
     <div ng-repeat="data in test | orderBy:'label' "> 
      <tr> 
      <td>data.label</td> 
      <td>data.value</td> 
      </tr> 
     </div> 
    <table>