根據字符串長度自定義排序

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>