按日期排序和筛选

Sorting and filtering on Date

本文关键字：筛选 排序 日期      更新时间：2023-09-26

我有一个日期列，需要能够对其进行排序和筛选。数据以字符串形式出现，如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/如果你在右菜单栏的显示->格式下，你会看到本地化的格式，你需要使用L格式-从那时起预先定义的格式，它将显示1986年4月9日（1986年9月4日）；否则，您可以使用DD-MM-YYYY格式创建自己的。

例如，我在React中练习的方式是

要使用let定义变量，请执行以下操作：let deadlineFormated = Moment(this.props.ToDoItem.deadline).format('llll');

希望这对Angular有所帮助！

Gist：解耦排序和过滤。对内部表示进行排序，并对表示进行筛选。

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

如果对显示的内容（演示文稿）进行自由文本过滤，会更直观。因此，如果您将日期格式化为"2016年5月7日"，请在此基础上进行子字符串匹配。如果要将日期格式化为DD.MM.YYYY，请在此基础上进行子字符串匹配。

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

试试这个：获取日期的Unixtimestamp（即数字格式）并使用jquery排序.

请检查这个例子的jquery排序。关于这个例子，请将您的unixtimestamp替换为value。

<ul id="datelist">
<li value="1360013296">Date 1</li>
<li value="1360013297">Date 2</li>
<li value="1360013298">Date 3</li>
<li value="1360013299">Date 4</li>
</ul>
https://jsfiddle.net/ajaygokhale/bohgoq8o/

为了可靠地实现排序，建议将其转换为日期对象（新日期（str））

如果您需要灵活格式化，moment也支持格式化（checkmoment.format（））。Moment也有相当深入的本地支持

您可以始终将它作为一个Date对象作为真相的来源，对于筛选，您可以在筛选时执行Date.toString（）。这将返回一个字符串，您可以使用该字符串进行筛选。

相关文章：