asc 和 desc 中的 lodash orderBy 日期不起作用答案

【问题标题】：lodash orderBy date in asc and desc not workingasc 和 desc 中的 lodash orderBy 日期不起作用
【发布时间】：2021-02-02 10:08:34
【问题描述】：

我正在 moment() 和 lodash 中寻找 React Web 应用程序的解决方案，以按升序和降序对日期进行排序。不幸的是，这些解决方案都不起作用。

const items = {
  pageNumber: 1,
  totalPages: 1,
  content: [{
      id: 8,
      created: "2020-10-14T15:05:48.427601Z",
      actor: "Anonymous",
      rangeStart: "2020-10-14T11:54:05.610220Z",
      rangeEnd: "2020-10-14T15:05:48.461905Z",
      state: "InProgress",
      amountOrderIds: 0,
      amountOrderDetails: 0
    },
    {
      id: 3,
      created: "2020-8-11T11:54:05.610220Z",
      actor: "houman",
      rangeStart: "2020-10-11T11:54:05.610220Z",
      rangeEnd: "2020-10-14T11:54:05.610220Z",
      state: "Finished",
      amountOrderIds: 0,
      amountOrderDetails: 0
    },
    {
      id: 2,
      created: "2020-9-10T11:53:40.262608Z",
      actor: "mo",
      rangeStart: "2020-10-10T11:53:40.262608Z",
      rangeEnd: "2020-10-11T11:53:40.262608Z",
      state: "Finished",
      amountOrderIds: 0,
      amountOrderDetails: 0
    },
    {
      id: 1,
      created: "2020-10-09T11:53:25.911596Z",
      actor: "leo",
      rangeStart: "2020-10-09T11:53:25.911596Z",
      rangeEnd: "2020-10-10T11:53:25.911596Z",
      state: "Finished",
      amountOrderIds: 0,
      amountOrderDetails: 0
    }
  ]
};

const sortByAsc = item => _.orderBy(item, () => moment(item.created), ['asc'])
const sortedAscList = (backorders) => {
  const newBackorders = _.cloneDeep(backorders)
  return _(newBackorders)
    .orderBy(sortByAsc)
    .compact()
    .value()
}
const sortByDesc = item => _.orderBy(item, () => moment(item.created), ['desc'])
const sortedDescList = (backorders) => {
  const newBackorders = _.cloneDeep(backorders)
  return _(newBackorders)
    .orderBy(sortByDesc)
    .compact()
    .value()
}

console.clear();
console.log('----------sortByAsc------------');
console.log(sortedAscList(items.content));
console.log('----------sortByDesc------------');
console.log(sortedDescList(items.content));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

【问题讨论】：

不要在 orderBy 中使用时刻，使用日期
或者直接使用字符串，它会在基本排序算法中正确排序。
orderBy 应该在链中使用两个参数调用。相反，您在每个项目上都调用 _.orderBy，但似乎想要订购整个系列。正确的语法应该是_(newBackorders).orderBy(item => moment(item.created), ['asc'])
@Nonik 你介意提供一个例子吗？

标签： javascript date momentjs lodash underscore.js

【解决方案1】：

当执行a chain 时，您正在对整个数据集进行操作。因此，调用orderBy 不需要在回调中调用另一个_.orderBy。相反，您需要使用两个参数调用它——第一个参数通常是集合，隐含地是您应用链式操作的包装值。

const sortByAsc = item => _.orderBy(item, () => moment(item.created), ['asc'])
/* ... */
_(newBackorders)
    .orderBy(sortByAsc)

需要变得简单：

/* ... */
_(newBackorders)
    .orderBy(item => moment(item.created), ['asc'])

降序也可以进行类似的转换。

const items = {
  pageNumber: 1,
  totalPages: 1,
  content: [{
      id: 8,
      created: "2020-10-14T15:05:48.427601Z",
      actor: "Anonymous",
      rangeStart: "2020-10-14T11:54:05.610220Z",
      rangeEnd: "2020-10-14T15:05:48.461905Z",
      state: "InProgress",
      amountOrderIds: 0,
      amountOrderDetails: 0
    },
    {
      id: 3,
      created: "2020-8-11T11:54:05.610220Z",
      actor: "houman",
      rangeStart: "2020-10-11T11:54:05.610220Z",
      rangeEnd: "2020-10-14T11:54:05.610220Z",
      state: "Finished",
      amountOrderIds: 0,
      amountOrderDetails: 0
    },
    {
      id: 2,
      created: "2020-9-10T11:53:40.262608Z",
      actor: "mo",
      rangeStart: "2020-10-10T11:53:40.262608Z",
      rangeEnd: "2020-10-11T11:53:40.262608Z",
      state: "Finished",
      amountOrderIds: 0,
      amountOrderDetails: 0
    },
    {
      id: 1,
      created: "2020-10-09T11:53:25.911596Z",
      actor: "leo",
      rangeStart: "2020-10-09T11:53:25.911596Z",
      rangeEnd: "2020-10-10T11:53:25.911596Z",
      state: "Finished",
      amountOrderIds: 0,
      amountOrderDetails: 0
    }
  ]
};

const sortedAscList = (backorders) => {
  const newBackorders = _.cloneDeep(backorders)
  return _(newBackorders)
    .orderBy(item => moment(item.created), ['asc'])
    .compact()
    .value()
}

const sortedDescList = (backorders) => {
  const newBackorders = _.cloneDeep(backorders)
  return _(newBackorders)
    .orderBy(item => moment(item.created), ['desc'])
    .compact()
    .value()
}

console.clear();
console.log('----------sortByAsc------------');
console.log(sortedAscList(items.content));
console.log('----------sortByDesc------------');
console.log(sortedDescList(items.content));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

但是，这并不是这里唯一的改进。不需要 Moment.JS 库 - ISO 8601 日期如果格式正确会自然地按时间顺序排序。因此，如果您可以将月份固定为从零开始，例如：

"2020-9-10T11:53:40.262608Z"

到

"2020-09-10T11:53:40.262608Z"

这意味着您可以使用：

 _(newBackorders)
        .orderBy("created", 'asc')

const items = {
  pageNumber: 1,
  totalPages: 1,
  content: [{
      id: 8,
      created: "2020-10-14T15:05:48.427601Z",
      actor: "Anonymous",
      rangeStart: "2020-10-14T11:54:05.610220Z",
      rangeEnd: "2020-10-14T15:05:48.461905Z",
      state: "InProgress",
      amountOrderIds: 0,
      amountOrderDetails: 0
    },
    {
      id: 3,
      created: "2020-08-11T11:54:05.610220Z",
      actor: "houman",
      rangeStart: "2020-10-11T11:54:05.610220Z",
      rangeEnd: "2020-10-14T11:54:05.610220Z",
      state: "Finished",
      amountOrderIds: 0,
      amountOrderDetails: 0
    },
    {
      id: 2,
      created: "2020-09-10T11:53:40.262608Z",
      actor: "mo",
      rangeStart: "2020-10-10T11:53:40.262608Z",
      rangeEnd: "2020-10-11T11:53:40.262608Z",
      state: "Finished",
      amountOrderIds: 0,
      amountOrderDetails: 0
    },
    {
      id: 1,
      created: "2020-10-09T11:53:25.911596Z",
      actor: "leo",
      rangeStart: "2020-10-09T11:53:25.911596Z",
      rangeEnd: "2020-10-10T11:53:25.911596Z",
      state: "Finished",
      amountOrderIds: 0,
      amountOrderDetails: 0
    }
  ]
};

const sortedAscList = (backorders) => {
  const newBackorders = _.cloneDeep(backorders)
  return _(newBackorders)
    .orderBy("created", 'asc')
    .compact()
    .value()
}

const sortedDescList = (backorders) => {
  const newBackorders = _.cloneDeep(backorders)
  return _(newBackorders)
    .orderBy("created", 'desc')
    .compact()
    .value()
}

console.clear();
console.log('----------sortByAsc------------');
console.log(sortedAscList(items.content));
console.log('----------sortByDesc------------');
console.log(sortedDescList(items.content));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"&gt;&lt;/script&gt;

如果你想泛化排序函数以最小化代码重复，你可以将它作为一个柯里化函数：

const items = { pageNumber: 1, totalPages: 1, content: [{ id: 8, created: "2020-10-14T15:05:48.427601Z", actor: "Anonymous", rangeStart: "2020-10-14T11:54:05.610220Z", rangeEnd: "2020-10-14T15:05:48.461905Z", state: "InProgress", amountOrderIds: 0, amountOrderDetails: 0 }, { id: 3, created: "2020-08-11T11:54:05.610220Z", actor: "houman", rangeStart: "2020-10-11T11:54:05.610220Z", rangeEnd: "2020-10-14T11:54:05.610220Z", state: "Finished", amountOrderIds: 0, amountOrderDetails: 0 }, { id: 2, created: "2020-09-10T11:53:40.262608Z", actor: "mo", rangeStart: "2020-10-10T11:53:40.262608Z", rangeEnd: "2020-10-11T11:53:40.262608Z", state: "Finished", amountOrderIds: 0, amountOrderDetails: 0 }, { id: 1, created: "2020-10-09T11:53:25.911596Z", actor: "leo", rangeStart: "2020-10-09T11:53:25.911596Z", rangeEnd: "2020-10-10T11:53:25.911596Z", state: "Finished", amountOrderIds: 0, amountOrderDetails: 0 } ] };

const sortList = order => (backorders) => {
  const newBackorders = _.cloneDeep(backorders)
  return _(newBackorders)
    .orderBy("created", order)
    .compact()
    .value()
}

const sortedAscList = sortList('asc');

const sortedDescList = sortList('desc');

console.clear();
console.log('----------sortByAsc------------');
console.log(sortedAscList(items.content));
console.log('----------sortByDesc------------');
console.log(sortedDescList(items.content));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"&gt;&lt;/script&gt;

或者，使用_.partial:

const items = { pageNumber: 1, totalPages: 1, content: [{ id: 8, created: "2020-10-14T15:05:48.427601Z", actor: "Anonymous", rangeStart: "2020-10-14T11:54:05.610220Z", rangeEnd: "2020-10-14T15:05:48.461905Z", state: "InProgress", amountOrderIds: 0, amountOrderDetails: 0 }, { id: 3, created: "2020-08-11T11:54:05.610220Z", actor: "houman", rangeStart: "2020-10-11T11:54:05.610220Z", rangeEnd: "2020-10-14T11:54:05.610220Z", state: "Finished", amountOrderIds: 0, amountOrderDetails: 0 }, { id: 2, created: "2020-09-10T11:53:40.262608Z", actor: "mo", rangeStart: "2020-10-10T11:53:40.262608Z", rangeEnd: "2020-10-11T11:53:40.262608Z", state: "Finished", amountOrderIds: 0, amountOrderDetails: 0 }, { id: 1, created: "2020-10-09T11:53:25.911596Z", actor: "leo", rangeStart: "2020-10-09T11:53:25.911596Z", rangeEnd: "2020-10-10T11:53:25.911596Z", state: "Finished", amountOrderIds: 0, amountOrderDetails: 0 } ] };

const sortList = (order, backorders) => {
  const newBackorders = _.cloneDeep(backorders)
  return _(newBackorders)
    .orderBy("created", order)
    .compact()
    .value()
}

const sortedAscList = _.partial(sortList, 'asc');

const sortedDescList = _.partial(sortList, 'desc');

console.clear();
console.log('----------sortByAsc------------');
console.log(sortedAscList(items.content));
console.log('----------sortByDesc------------');
console.log(sortedDescList(items.content));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：