如何在Angular4中基於日期對對象數組進行排序？

Question

我有一個對象數組，如下所示：

this.filteredData = [
    {'id': 1, 'date': '04-05-2018'},
    {'id': 2, 'date': '29-03-2018'},
    {'id': 3, 'date': '03-04-2018'},
    {'id': 4, 'date': '24-07-2018'},
    {'id': 5, 'date': '19-08-2018'},
    {'id': 6, 'date': '13-09-2018'},
]

並試圖基於單擊按鈕的date對數組進行排序

    this.filteredData.sort(function(a, b){
      return new Date(b.date) - new Date(a.date);
    });

但數組未排序。

我在哪里做錯了？ 需要幫忙

Answer 1

您的日期格式無效-03-04-2018含糊-是4月3日還是3月4日？

假設您不能輕易地更改源數據，可以將其在您的排序函數中轉換為ISO 8601語法：

this.filteredData.sort(function(a, b){
    return new Date(b.date.split('-').reverse().join('-')) - new Date(a.date.split('-').reverse().join('-'));
});

Answer 2

一種選擇是在new Date()上使用年，月和日作為單獨的參數

新的日期（年，月[，日[，小時[，分鍾[，秒[，毫秒]]]]]））；

 let filteredData = [ {'id': 1, 'date': '04-05-2018'}, {'id': 2, 'date': '29-03-2018'}, {'id': 3, 'date': '03-04-2018'}, {'id': 4, 'date': '24-07-2018'}, {'id': 5, 'date': '19-08-2018'}, {'id': 6, 'date': '13-09-2018'}, ]; filteredData.sort((a, b) => { let formatDate = (dt) => { let [d, m, y] = dt.split('-'); //Split the array return [y, m - 1, d]; //Return on the as year, month and day order. Not m - 1 because js accepts 0-11 month. } return new Date(...formatDate(b.date)).getTime() - new Date(...formatDate(a.date)).getTime(); }); console.log(filteredData); 

Doc： 新的Date（）

Answer 3

當創建一個新的Date它假定一個月，然后一天的順序，因此您的日期，如29-03-2018將被視為03-29-2018 ，並導致invalid Date 。

您只需將日期反向指定為2018-03-29正確查看。

使用字符串分割方法，您可以通過-分割日期值，從而得到數組["29","03","2018"]

然后使用array reverse反轉數組，得到["2018","03","29"]

最后，使用帶有- 數組連接將元素重新連接為單個字符串，結果為"2018-03-29"

 var filteredData = [ {'id': 1, 'date': '04-05-2018'}, {'id': 2, 'date': '29-03-2018'}, {'id': 3, 'date': '03-04-2018'}, {'id': 4, 'date': '24-07-2018'}, {'id': 5, 'date': '19-08-2018'}, {'id': 6, 'date': '13-09-2018'} ] filteredData.sort(function(a, b){ return new Date(b.date.split('-').reverse().join('-')) - new Date(a.date.split('-').reverse().join('-')); }); console.log(filteredData); 

Answer 4

如果您嘗試在控制台中編寫此代碼：

new Date("29-03-2018")

您將獲得無效的日期：無效的日期

這個：

new Date("04-05-2018")

2018年4月5日星期四00:00:00 GMT + 0200（歐洲中部夏令時間）

會給您錯誤的月份（您會得到4月而不是5月）。 但是，如果您將日期寫為：

new Date("03-29-2018")

2018年3月29日星期四00:00:00 GMT + 0200（歐洲中部夏令時間）

您將獲得正確的日期。 因此，請替換月份和日期才能工作！ :)