JavaScript에서 쉬운 방법으로 시간 간격 추가

후우프. 차가운 압박감이 척추를 따라 내려갑니다.

하아아아. 상사의 싸늘한 숨결이 하수구가 넘쳐흐르는 것처럼 목을 타고 흘러내린다. 하지만 다른 곳으로 이동하라고 말할 수는 없습니다. 사무실 시간 추적 시스템이 고장난 이후로 그들은 매처럼 당신을 지켜보고 있습니다.

이제 그들은 단지 거기에...맴돌고...호흡하고 있습니다. 허푸.

근무 시간표에 근무 시간을 적으려고 했지만 상사가 호흡을 맞추느라 꽤 바쁩니다. 그들이 계산을 제대로 하지 않아서 시간을 잘못 추가했다면 어떻게 될까요?

JavaScript를 사용하여 문제를 직접 해결하는 방법은 다음과 같습니다. 하아아아 .

문제

이 String 의 내용과 유사한 작업표가 있습니다.

 const a = `November 30 2023 13:20-15:00, 15:30-16:40 December 4 2023 15:45-16:15, December 5 2023 08:00-08:30, 18:15-19:30, 21:45-22:15, 22:30-23:00 December 6 2023 19:45-21:45 December 7 2023 14:15-14:45, 15:15-15:45, 16:00-16:30, 16:45-17:15, 18:45-20:15, 20:45-22:45 December 13 2023 03:00-03:50 December 15 2023 09:00-09:30 20:30-21:15 21:45-22:30 23:30-24:00 December 16 2023 23:25-23:55 December 17 2023 19:05-19:50 20:30-21:30 22:15-23:45 December 20 2023 23:30-24:00 December 21 2023 02:20-2:50 03:15-03:30 13:40-14:00 16:00-17:15 17:45-18:45 19:20-20:10 21:30-22:20 23:00 - 24:00 December 22 2023 0:00-0:15`;

각 줄에는 날짜와 시간 간격이 포함됩니다. 그러나 매우 깔끔하게 작성되지는 않습니다. 일부 간격은 쉼표로 구분되어 있고 다른 간격은 불규칙합니다.

이러한 불일치를 고려하면 다른 보장은 없다고 가정하는 것이 좋습니다. 예를 들어, 누가 모든 시간이 같은 해에 나온 것이라고 말합니까? 아무도 없어요. 그 사람이에요. 가능한 한 견고하게 시간을 합산하려고 합니다.

해결책

이것은 매우 쉽습니다. 몇 가지 정규식과 도우미 함수를 만드는 것부터 시작합니다. 그럼 우리는... 후우우우우우!

윽!! 보스, 잠깐 어디 가서 쉬세요!

앞서 말했듯이 이제 우리는 3단계 알고리즘을 사용하여 작업을 완료할 수 있습니다.

1. 작업표 문자열을 개별 줄로 분할하고 이를 줄여 개체 배열을 만듭니다.

   
   

2. 각 반복에 대해 우리는 다음을 수행합니다.

   A. yearRegex 사용하여 연도를 기준으로 선을 분할하고 날짜 문자열을 기록합니다.

   B. intervalsRegex 사용하여 모든 시간 범위 간격을 수집합니다.

   C. 시간 범위를 줄여서 2.A단계의 parseDate 도우미와 날짜 문자열을 사용하여 각각을 JavaScript 날짜 개체로 구문 분석합니다.

   
   

3. 총 시간을 찾기 위해 객체 배열을 줄입니다.

   
   

 const yearRegex = /(\d{4})/gi; const intervalsRegex = /(\d+\:\d+)\s*-\s*(\d+\:\d+)/gi; const parseDate = (date, time) => Date.parse(`${date} ${time}`); let times = [...a.split("\n")].reduce((arr, entryLine) => { let entryLineSplit = entryLine.split(yearRegex); let o = { date: entryLineSplit[0] + entryLineSplit[1], timeRanges: [...entryLine.matchAll(intervalsRegex)], }; o.hoursForDay = o.timeRanges.reduce((total, [x, start, end]) => { let s = parseDate(o.date, start); let e = parseDate(o.date, end); return total + (e - s) / 1000 / 60 / 60; }, 0); return [...arr, o]; }, []); console.log(times); let totalHours = times.reduce((total, { hoursForDay }) => total + hoursForDay, 0); console.log(totalHours);

console.log(times); 명령문을 실행하면 다음과 같은 객체가 포함된 배열이 표시됩니다.

 { date: 'November 30 2023', timeRanges: [ [ '13:20-15:00', '13:20', '15:00', index: 17, input: 'November 30 2023 13:20-15:00, 15:30-16:40', groups: undefined ], [ '15:30-16:40', '15:30', '16:40', index: 30, input: 'November 30 2023 13:20-15:00, 15:30-16:40', groups: undefined ] ], totalHours: 2.8333333333333335 },

이 방법의 이점

객체 배열을 구축하면 단순히 시간 간격을 추출하고 추가하는 것보다 몇 가지 뚜렷한 이점이 있습니다.

• 사실 이후에 쉽게 탐색할 수 있습니다. 일일 시간을 그래프로 표시하려는 경우에 이상적입니다.

• 각 레코드의 날짜 문자열을 저장하면 Date.parse 호출 후 내장된 JS 날짜 산술 메서드를 사용할 수 있습니다.

• 객체는 String.prototype.split 호출 결과를 저장하기에 편리한 장소입니다. 이는 이틀에 동일한 시간 간격이 포함되었는지 여부에 따라 고유하지 않을 수 있습니다.

이 방법의 단점

이 솔루션은 완벽하지 않습니다.

• 두 번의 큰 순회가 필요합니다. 한 번은 작업표를 분할한 결과에 대해 한 번은 times 개체에 대해 한 번은 통과해야 합니다. 이 코드를 최적화하려면 totalHours 및 times 필드로 포함하는 빈 객체에 대해 단일 감소를 사용하는 것이 더 나을 것입니다.

• 더 복잡한 형식으로 인해 더 복잡해질 수 있는 정규식을 사용합니다.

마무리

이제 지저분한 작업표에서 시간을 추출하는 방법을 알았습니다. 조금만 더 노력하면 완전한 시간 시계를 만들 수도 있습니다. 하지만 그렇게 되면 상사를 알아가는 데 그토록 좋은 시간을 보낼 수 없을 것입니다. 그렇죠? 허프.