2017-04-10 11 views
0

ネイティブJSが仕事を遂行する場所で不必要なサードパーティの依存関係を取り除こうとするプロジェクトを行っています。私たちはUnderscoreの_.sortByを使って日付の配列をソートしていますが、何らかの理由で正確なソート順をまだ複製できません。カスタム日付範囲のソート

データがソートされていない戻ってくると、次のようになります。

{ 
    "title": "February 2016", 
    "startTime": "2016-02-01T10:00:00.000Z", 
    "endTime": "2016-03-01T09:59:59.000Z" 
    }, 
    { 
    "title": "Week of February 28 2016", 
    "startTime": "2016-02-28T05:00:00.000Z", 
    "endTime": "2016-03-06T04:59:59.000Z" 
    }, 
    { 
    "title": "March 2016", 
    "startTime": "2016-03-01T10:00:00.000Z", 
    "endTime": "2016-04-01T07:59:59.000Z" 
    }, 
    { 
    "title": "Week of March 06 2016", 
    "startTime": "2016-03-06T05:00:00.000Z", 
    "endTime": "2016-03-13T04:59:59.000Z" 
    }, 
    { 
    "title": "Week of March 13 2016", 
    "startTime": "2016-03-13T05:00:00.000Z", 
    "endTime": "2016-03-20T03:59:59.000Z" 
    }, 

範囲「の...週は」前に月全体の範囲を表示されます除いて基本的には、単に標準の日付ソートを必要とします。

これは、それが現在(も活字体を使用して)下線& MomentJSを使用して行われている方法です、これは正しく私たちが望む正確にどのようにそれを並べ替え:

_.sortBy(dateRanges, (range: IDateRange) => { 
    if (moment(range.endTime).diff(range.startTime, "days") > 7) { 
    return range.endTime; 
    } else { 
    return range.startTime; 
    } 
}); 

が、私はその正確な出力を複製しようとしますが、アンダースコアを使用せずにいますまたはMomentJS。ここで私がこれまで持っているものです。

dateRanges.sort((r1: IDateRange, r2: IDateRange) => { 
    //604800000 milliseconds in 1 week 
    //easier to hard code number this than do all the math on each iteration here 
    const isWholeMonth = r1.endTime.getTime() - r1.startTime.getTime() > 604800000; 

    if (isWholeMonth) { 
    if (r1.endTime > r2.endTime) { 
     return 1; 
    } else if (r1.endTime < r2.endTime) { 
     return -1; 
    } 
    return 0; 
    } else { 
    //Make the week listings for a month appear before the entire month listings 
    if (r1.startTime > r2.startTime) { 
     return 1; 
    } else if (r1.startTime < r2.startTime) { 
     return -1; 
    } 
    return 0; 
    } 
}); 

それは完全にまだ正しく並べ替えていないが、私はかなり理由を把握することはできません。ここでは異なるネイティブsortより
http://codepen.io/chrismbarr/pen/KWOaaE

答えて

1

アンダーの_sortBy作品ように、コンソールにそれらの両方を出力し、作業のデモです。あなたはタイトルに'week'存在を持っていないか(もしくはあなた次第、開始時間startTimeとendTimeのを確認してください)場合によっては、異なるものをチェックして比較する必要があります。

interface IDateRange { 
    title: string; 
    startTime: Date; 
    endTime: Date; 
} 

const dateRanges: IDateRange[] = [ 
    { 
    "title": "February 2016", 
    "startTime": "2016-02-01T10:00:00.000Z", 
    "endTime": "2016-03-01T09:59:59.000Z" 
    }, 
    { 
    "title": "Week of February 28 2016", 
    "startTime": "2016-02-28T05:00:00.000Z", 
    "endTime": "2016-03-06T04:59:59.000Z" 
    }, 
    { 
    "title": "March 2016", 
    "startTime": "2016-03-01T10:00:00.000Z", 
    "endTime": "2016-04-01T07:59:59.000Z" 
    }, 
    { 
    "title": "Week of March 06 2016", 
    "startTime": "2016-03-06T05:00:00.000Z", 
    "endTime": "2016-03-13T04:59:59.000Z" 
    }, 
    { 
    "title": "Week of March 13 2016", 
    "startTime": "2016-03-13T05:00:00.000Z", 
    "endTime": "2016-03-20T03:59:59.000Z" 
    }, 
    { 
    "title": "October 2016", 
    "startTime": "2016-10-01T08:00:00.000Z", 
    "endTime": "2016-11-01T07:59:59.000Z" 
    }, 
    { 
    "title": "Week of October 02 2016", 
    "startTime": "2016-10-02T04:00:00.000Z", 
    "endTime": "2016-10-09T03:59:59.000Z" 
    }, 
    { 
    "title": "Week of October 30 2016", 
    "startTime": "2016-10-30T04:00:00.000Z", 
    "endTime": "2016-11-06T03:59:59.000Z" 
    }, 
    { 
    "title": "November 2016", 
    "startTime": "2016-11-01T08:00:00.000Z", 
    "endTime": "2016-12-01T09:59:59.000Z" 
    }, 
    { 
    "title": "Week of November 13 2016", 
    "startTime": "2016-11-13T05:00:00.000Z", 
    "endTime": "2016-11-20T04:59:59.000Z" 
    }, 
    { 
    "title": "Week of November 20 2016", 
    "startTime": "2016-11-20T05:00:00.000Z", 
    "endTime": "2016-11-27T04:59:59.000Z" 
    }, 
    { 
    "title": "Week of November 27 2016", 
    "startTime": "2016-11-27T05:00:00.000Z", 
    "endTime": "2016-12-04T04:59:59.000Z" 
    }, 
    { 
    "title": "December 2016", 
    "startTime": "2016-12-01T10:00:00.000Z", 
    "endTime": "2017-01-01T09:59:59.000Z" 
    }, 
    { 
    "title": "Week of December 04 2016", 
    "startTime": "2016-12-04T05:00:00.000Z", 
    "endTime": "2016-12-11T04:59:59.000Z" 
    }, 
    { 
    "title": "Week of December 11 2016", 
    "startTime": "2016-12-11T05:00:00.000Z", 
    "endTime": "2016-12-18T04:59:59.000Z" 
    }, 
    { 
    "title": "Week of December 25 2016", 
    "startTime": "2016-12-25T05:00:00.000Z", 
    "endTime": "2017-01-01T04:59:59.000Z" 
    }, 
    { 
    "title": "January 2017", 
    "startTime": "2017-01-01T10:00:00.000Z", 
    "endTime": "2017-02-01T09:59:59.000Z" 
    }, 
    { 
    "title": "Week of January 15 2017", 
    "startTime": "2017-01-15T05:00:00.000Z", 
    "endTime": "2017-01-22T04:59:59.000Z" 
    }, 
    { 
    "title": "Week of January 29 2017", 
    "startTime": "2017-01-29T05:00:00.000Z", 
    "endTime": "2017-02-05T04:59:59.000Z" 
    }, 
    { 
    "title": "February 2017", 
    "startTime": "2017-02-01T10:00:00.000Z", 
    "endTime": "2017-03-01T09:59:59.000Z" 
    }, 
    { 
    "title": "Week of February 05 2017", 
    "startTime": "2017-02-05T05:00:00.000Z", 
    "endTime": "2017-02-12T04:59:59.000Z" 
    }, 
    { 
    "title": "Week of February 12 2017", 
    "startTime": "2017-02-12T05:00:00.000Z", 
    "endTime": "2017-02-19T04:59:59.000Z" 
    }, 
    { 
    "title": "March 2017", 
    "startTime": "2017-03-01T10:00:00.000Z", 
    "endTime": "2017-04-01T07:59:59.000Z" 
    }, 
    { 
    "title": "Week of March 05 2017", 
    "startTime": "2017-03-05T05:00:00.000Z", 
    "endTime": "2017-03-12T04:59:59.000Z" 
    }, 
    { 
    "title": "Week of March 12 2017", 
    "startTime": "2017-03-12T05:00:00.000Z", 
    "endTime": "2017-03-19T03:59:59.000Z" 
    }, 
    { 
    "title": "Week of March 19 2017", 
    "startTime": "2017-03-19T04:00:00.000Z", 
    "endTime": "2017-03-26T03:59:59.000Z" 
    }, 
    { 
    "title": "Week of March 26 2017", 
    "startTime": "2017-03-26T04:00:00.000Z", 
    "endTime": "2017-04-02T03:59:59.000Z" 
    } 
]; 

////============================== 

console.clear(); 

//Convert to real data objects... 
for (const range of dateRanges) { 
    range.startTime = moment(range.startTime).utc().toDate(); 
    range.endTime = moment(range.endTime).utc().toDate(); 
} 


//OLD 
const librarySort = _.sortBy(dateRanges, (range: IDateRange) => { 
    if (moment(range.endTime).diff(range.startTime, "days") > 7) { 
    return range.endTime; 
    } else { 
    return range.startTime; 
    } 
}); 

//NEW - changes made here 
const nativeSort = dateRanges.sort((r1: IDateRange, r2: IDateRange) => { 
    let firstPartToCompare; 
    let secondPartToCompare; 

    if(r1.title.indexOf('eek') > -1) { 
    firstPartToCompare = r1.startTime; 
    } else { 
    firstPartToCompare = r1.endTime; 
    } 

    if(r2.title.indexOf('eek') > -1) { 
    secondPartToCompare = r2.startTime; 
    } else { 
    secondPartToCompare = r2.endTime; 
    } 

    if (firstPartToCompare > secondPartToCompare) { 
    return 1; 
    } else if (firstPartToCompare < secondPartToCompare) { 
    return -1; 
    } 
    return 0; 
}); 

console.info("CORRECT order - old way") 
console.table(librarySort); 

console.info("ATTEMPT to duplicate - new way") 
console.table(nativeSort); 

http://codepen.io/anon/pen/GWVrwB

+1

'と文字列比較を使用します> 'は辞書編集的なものになります。 '.valueOf()'を使って数値のEpoch Time値を取得し、それをソートします。まずUTCに変換してください。 –

+0

ありがとう、それはトリックでした。私は何か簡単なことを知っていた。ここでは、 "week"という単語の代わりに、日付から外れるように変更したものの基礎を示します。 'const r1IsWholeMonth = r1.endTime.getTime() - r1.startTime.getTime()> 604800000 ; const firstPartToCompare = r1IsMholeMonth? r1.endTime:r1.startTime; ' –

+1

@ChrisBarr問題はありませんでした。私にとってはかなり遅かったので、私はそれを単純にしたいと思いました。時間差を比較することも良い方法ですが、Aluanのコメントも考慮に入れてください。 – Oskar