在日期上排序和过滤

maa*_*nus 7 javascript sorting angularjs momentjs angularjs-filter

我有一个日期列,需要能够对它进行排序和过滤.数据以字符串形式出现2010-12-23,并可根据需要进行预处理.它应该显示为23.12.2010.一些国际化将在稍后出现.

我想知道什么是正确的内部表示:

  • 一个字符串就像"23.12.2010"排序一样糟糕(可以通过对函数结果进行排序来完成,但它很慢)
  • 一个像"2010-12-23"正确排序的字符串,可以很容易地格式化,但过滤23.12不起作用(它可以完成,但它会很慢)
  • Date 可能会正确排序,但过滤会很慢
  • 时刻可能是解决方案,不知道

我目前的想法是创建一个包含毫秒和显示的字符串的对象,以便所有操作都可以很快.但我敢打赌,在我之前有人那么聪明......


让我们假设在表格中显示日期2010-12-23是不可接受的,否则问题就解决了.总而言之,问题在于我需要

  • DD.MM.YYYY格式显示和过滤
  • 根据数值排序(或等效地,就像它是ISO格式).

use*_*291 1

我认为您提出的方法不会遇到太多性能问题,除非您要使用非常旧的浏览器或移动设备。

我模拟了一个示例来进行快速(性能)测试。首先,我定义一个对象,其中包含针对排序优化的值和针对显示优化的值:

var MyDate = function(dateString) {
    var date = new Date(dateString);
    var displayValue = "{0}.{1}.{2}"
        .replace("{0}", prefixZeroIfNeeded(date.getUTCDate()))
        .replace("{1}", prefixZeroIfNeeded(date.getUTCMonth() + 1))
        .replace("{2}", date.getUTCFullYear());

    return {
        sortKey: date.getTime(),
        displayValue: displayValue
    };
};
Run Code Online (Sandbox Code Playgroud)

prefixZeroIfNeeded方法确保我们获得DD.MM格式而不是格式dd.mm

var prefixZeroIfNeeded = function(nr) {
    return nr < 10 ? "0" + nr : "" + nr;
};
Run Code Online (Sandbox Code Playgroud)

然后,我们需要一些数据来转换:

var data = [];
var myDates = data
    .map(MyDate)
    .sort(function(date1, date2) {
        return date1.sortKey - date2.sortKey;
    });
Run Code Online (Sandbox Code Playgroud)

最后,一个非常基本的搜索功能的快速示例:

var searchMyDates = function(str) {
    return myDates.filter(function(myDate) {
        return myDate.displayValue.indexOf(str) !== -1;
    });
};
Run Code Online (Sandbox Code Playgroud)

现在,我们可以创建一些模型数据,并检查A)将原始字符串映射并排序到MyDate对象,以及B)在我们的集合中搜索字符串实际需要多长时间。

以下是我生成原始数据的方法:

for (var i = 0; i < 10000; i += 1) {
    var y = Math.floor(Math.random() * 101) + 1900;
    var m = prefixZeroIfNeeded(Math.floor(Math.random() * 13));
    var d = prefixZeroIfNeeded(Math.floor(Math.random() * 29));

    data.push(y + "-" + d + "-" + m);
}
Run Code Online (Sandbox Code Playgroud)

用于console.time测量,在我的机器(A)上处理数据大约需要 40ms。搜索字符串.12.大约需要 5-10 毫秒。

结论:我认为您绝对走在正确的轨道上,并且可以继续朝提议的方向努力。然而,根据我的个人经验,我了解到,每当我开始开发涉及日期和时间的功能时,moment.js都是正确的选择。你最终会遇到夏令时、时区,你说出它的名字,然后后悔你认为这很简单......

让我知道这是否有任何帮助。

编辑:片段中的代码(检查浏览器控制台的输出)

var MyDate = function(dateString) {
    var date = new Date(dateString);
    var displayValue = "{0}.{1}.{2}"
        .replace("{0}", prefixZeroIfNeeded(date.getUTCDate()))
        .replace("{1}", prefixZeroIfNeeded(date.getUTCMonth() + 1))
        .replace("{2}", date.getUTCFullYear());

    return {
        sortKey: date.getTime(),
        displayValue: displayValue
    };
};
Run Code Online (Sandbox Code Playgroud)