Javascript中高效的人类可读日期字符串排序算法

Question

我正在尝试在我的 React 表中对我的数据库中的数千个日期字符串进行排序。我使用的组件允许用户通过点击最上面一行来对信息进行排序，API 是here。

我最初使用moment.js 编写了我的排序函数来检查输入到排序中的字符串是否有效，如果是，则要获得该日期字符串的总毫秒值，从后面的字符串中减去它数组中的值，然后返回结果。

然而，事实证明这个过程是劳动密集型的，并且导致排序功能在浏览器上运行时出现滞后。相关的代码如下所示：

let isValidDate = (date) => moment(date,'MMM D, YYYY hh:mm a', true).isValid();

function sort(a, b) { // Sorting algorithm 
    if(isValidDate(a) && isValidDate(b)){
      return 
      if(moment(b).valueOf() < moment(a).valueOf()){
        return -1;
      }
      if(moment(b).valueOf() > moment(a).valueOf()){
        return 1;
      }
    }
    return 0;
  }

由于我的表格显示日期的方式（作为人类可读的字符串），我需要一些方法来更有效地按 时间 对 字符串 进行排序。有没有人对如何做到这一点有任何建议？我正在对数千个值进行排序，但这个解决方案又太慢了。

谢谢！

Answer 1

我假设这些字符串是您的状态数据的一部分。我不只是存储字符串（如果这就是你正在做的事情），我会将对象的日期值存储为数字（毫秒-since-The-Epoch）和人类可读的字符串。然后排序回调可以直接使用数字，而不必不断地重新解析字符串。

现场示例：

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: props.list.map(strValue => ({
                dateValue: moment(strValue, 'MMM D, YYYY hh:mm a').valueOf() || 0, // `|| 0` because `valueOf` will return NaN if the date is invalid; we substitute 0 instead
                strValue
            }))
        };
        this.sortAscending  = this.sortAscending.bind(this);
        this.sortDescending = this.sortDescending.bind(this);
    }
    sortAscending() {
        this.setState(({list}) => ({
            list: list.slice().sort((a, b) => a.dateValue - b.dateValue)
        }));
    }
    sortDescending() {
        this.setState(({list}) => ({
            list: list.slice().sort((a, b) => b.dateValue - a.dateValue)
        }));
    }
    render() {
        const {list} = this.state;
        return (
            <React.Fragment>
                <input type="button" onClick={this.sortAscending} value="Sort Ascending" />
                <input type="button" onClick={this.sortDescending} value="Sort Descending" />
                <table>
                    <tbody>
                        {list.map(({strValue}, index) => (
                            <tr key={index}>
                                <td>{strValue}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </React.Fragment>
        );
    }
}

const list = [
    "Jan 2, 2017 12:55 am",
    "Nov 17, 2012 09:06 am",
    "May 19, 2015 05:20 am",
    "May 3, 2015 12:30 pm",
    "Nov 13, 2011 01:44 pm",
    "Jun 25, 2012 03:23 am",
    "Dec 12, 2017 07:42 pm",
    "Dec 12, 2011 04:51 am",
    "Oct 31, 2016 05:56 am",
    "Jan 11, 2013 12:17 pm",
    "Jun 20, 2018 07:05 pm",
    "Mar 21, 2013 04:23 am",
    "Oct 8, 2010 06:37 pm",
    "Jun 23, 2011 04:00 am",
    "Feb 16, 2016 08:57 am",
    "Jul 10, 2016 10:03 pm",
    "Nov 16, 2015 12:17 pm",
    "Jul 7, 2013 05:53 am",
    "Oct 11, 2016 11:52 pm",
    "May 20, 2015 01:00 pm",
    "Oct 4, 2016 10:06 am",
    "Aug 27, 2015 06:16 am",
    "Feb 24, 2013 07:39 am",
    "Jul 28, 2018 10:06 pm",
    "Nov 2, 2018 03:24 am",
    "Apr 23, 2016 09:36 pm",
    "Apr 11, 2010 05:21 am",
    "May 16, 2014 07:52 pm",
    "Sep 17, 2011 05:25 pm",
    "Sep 25, 2010 11:55 am",
    "Jan 30, 2016 01:43 am",
    "Sep 20, 2017 08:23 pm",
    "Feb 6, 2010 01:41 pm",
    "Jul 1, 2009 07:05 am",
    "Jul 12, 2013 03:42 pm",
    "Jun 21, 2011 02:57 am",
    "Jan 16, 2015 05:55 pm",
    "Mar 11, 2012 05:19 pm",
    "Dec 22, 2013 06:34 pm",
    "Oct 29, 2012 07:20 am",
    "May 26, 2015 04:00 am",
    "Feb 21, 2017 09:34 am",
    "Mar 31, 2015 03:37 pm",
    "Jan 24, 2011 11:31 pm",
    "May 28, 2017 03:45 am",
    "Jan 19, 2010 06:45 pm",
    "Jul 31, 2016 03:29 am",
    "May 27, 2011 12:12 am",
    "Dec 7, 2014 11:27 pm",
    "Oct 10, 2016 02:48 am"
];
ReactDOM.render(
    <Example list={list} />,
    document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

Answer 2

TJ 的回答有效。正如他所建议的，我最终改变了我的后端，只将日期作为数字返回。

但是，如果我没有这样做，我发现另一个更快的解决方案是这个排序函数，它利用了 moment.js 在无法解析字符串时返回 NaN 的事实：

let date1 = moment(a[orderBy]).valueOf();
let date2 = moment(b[orderBy]).valueOf();

    if(isNaN(date1) || isNaN(date2)){
      return 0;
    }

    if(date2 < date1){
      return -1;
    }
    if(date2 > date1){
      return 1;
    }
  };