在日期排序和筛选

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

我想知道什么是适当的内部表示:

  • "23.12.2010"这样的字符串不利于排序(可以通过对函数结果进行排序来完成,但它会很慢)
  • "2010-12-23"这样的字符串排序正确,可以很容易地格式化,但过滤23.12不起作用(可以完成,但速度会很慢)
  • Date可能会正确排序,但过滤会很慢
  • 时刻可能是解决方案,不知道
  • 我目前的想法是创建一个包含毫秒和显示字符串的对象,以便所有的操作都可以很快。 但我敢打赌,在我之前有人很聪明....


    假设以2010-12-23的形式显示日期是不可接受的,否则问题就解决了。 总而言之,问题是我需要

  • DD.MM.YYYY格式显示和过滤
  • 根据数值进行排序(或等同地,就好像它是在ISO格式中一样)。

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

    我嘲笑了一个例子来做一个快速(性能)测试。 首先,我定义了一个对象,该对象保存了一个为排序而优化的值,并为显示优化了一个值:

    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
        };
    };
    

    prefixZeroIfNeeded方法确保我们得到的DD.MM格式,而不是dd.mm之一:

    var prefixZeroIfNeeded = function(nr) {
        return nr < 10 ? "0" + nr : "" + nr;
    };
    

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

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

    最后,一个非常基本的搜索功能的简单例子:

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

    现在,我们可以创建一些模型数据并检查实际需要多长时间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);
    }
    

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

    结论:我认为你们确实走在正确的轨道上,可以继续按照提出的方向开展工作。 然而 ,根据我个人的经验,我了解到,无论何时我开始研究涉及日期和时间的功能时, moment.js都是要走的路。 你最终会跑到夏令时,时区,你的名字,并后悔你认为它很简单...

    让我知道这是否有帮助。

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

    var data = [];
    
    var prefixZeroIfNeeded = function(nr) {
      return nr < 10 ? "0" + nr : "" + nr;
    };
    
    // Generate random data:
    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);
    }
    
    
    
    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
      };
    };
    
    console.time("Map and sorting");
    
    var myDates = data
      .map(MyDate)
      .sort(function(date1, date2) {
        return date1.sortKey - date2.sortKey;
      });
    
    var searchMyDates = function(str) {
      return myDates.filter(function(myDate) {
        return myDate.displayValue.indexOf(str) !== -1;
      });
    };
    
    console.timeEnd("Map and sorting");
    
    console.time("Search");
    
    console.log("Searching for the month 12, %d results.", searchMyDates(".12.").length);
    
    
    console.timeEnd("Search");

    这可能会对你有所帮助。 我使用与React一样的东西。 这里是Moment.js的链接 - http://momentjs.com/docs/#/displaying/format/如果你在右侧菜单栏的Display - > Format下,你会看到本地化的格式,你需要使用格式L - 预先定义的格式,将显示您09/04/1986(1986年9月4日); 否则你可以使用DD-MM-YYYY格式创建你自己的。

    例如,我在练习中用于练习的方式是

    使用let定义一个变量: let deadlineFormated = Moment(this.props.ToDoItem.deadline).format('llll');

    希望这有助于Angular!


    要点:解耦排序和过滤。 对内部表示进行排序并对演示文稿进行过滤。

    对任何自然可排序格式的内部表示进行排序。 你的原始YYYY-MM-DD日期字符串可以工作,所以将它们解析成Date对象。 性能差异可以忽略不计,除非您处理大量的行 - 但在这种情况下,您将会遇到延迟和渲染性能方面的其他问题。

    如果对所显示内容(演示文稿)进行了自由文本过滤,则会更直观。 因此,如果您将日期格式设置为“2016年5月7日”,请对其进行子字符串匹配。 如果您将日期的格式设置为DD.MM.YYYY,则对其进行子字符串匹配。

    如果筛选是由日期选择器或选择字段等控件的实际日期选择驱动的,则可以对内部表示进行筛选。

    链接地址: http://www.djcxy.com/p/91579.html

    上一篇: Sorting and filtering on Date

    下一篇: TLS 1.1, 1.2 in WebView for android <= 4.3