2017-04-10 4 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 작품 있도록 콘솔에 그 모두를 출력하는 작업 데모입니다. 당신은 (당신이 최대로, startTime을하고 endTime- 사용자를 확인하거나) 당신이 제목이나하지의 'week' 선물을 경우에 따라 확인하고 다른 일을 비교해야합니다

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