javascript - 基于字符串长度的自定义排序

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

虽然这可以使用 Angular 过滤器来完成(正如其他人提到的)，但也可以在 View 逻辑之前使用 JavaScript 函数 array.sort() 来完成。 。 sort() 可以接受可选函数 compareFunction 来处理项目排序:

If compareFunction is supplied, the array elements are sorted according to the return value of the compare function. If a and b are two elements being compared, then:

• If compareFunction(a, b) is less than 0, sort a to a lower index than b, i.e. a comes first.
• If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behaviour, and thus not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.
• If compareFunction(a, b) is greater than 0, sort b to a lower index than a.
• compareFunction(a, b) must always return the same value when given a specific pair of elements a and b as its two arguments. If inconsistent results are returned then the sort order is undefined. ¹

要比较每个项目的 label 属性(字符串)，请使用 parseInt()在比较项目时从字符串中解析整数，如下面的代码所示。请注意，10 作为基数(第二个 参数)传递，以确保不会错误地将字符串解析为十六进制/八进制数字。

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