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

Question

我正在尝试从我的 React 表中的数据库中对数千个日期字符串进行排序。我正在使用的组件允许用户通过单击最上面的行来对信息进行排序，API 在这里。我最初对排序函数进行了编程，以检查输入排序的字符串是否有效，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

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

现场示例：

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

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

但是，如果我没有这样做，我发现的另一个更快的解决方案是这种排序函数，它利用了当 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;

    }

  };