Adicione intervalos de tempo em JavaScript de maneira fácil

Huuuff. Um aperto frio percorre sua espinha.

Haaaaah. O hálito gelado do seu chefe passa pelo seu pescoço como um esgoto transbordando. Mas você não pode dizer a eles para pairarem em outro lugar... eles estão observando você como um falcão desde que o sistema de controle de tempo do escritório quebrou.

Agora, eles estão lá... pairando... respirando. Huffff.

Você tentou escrever suas horas em um quadro de horários, mas seu chefe está muito ocupado com toda aquela respiração. E se eles não fizeram as contas corretamente e somaram incorretamente suas horas?

Veja como resolver o problema com suas próprias mãos com JavaScript. Haaaaa .

O problema

Você tem uma planilha de horas semelhante ao conteúdo desta 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`;

Cada linha contém uma data seguida por alguns intervalos de tempo. Mas eles não são escritos de forma muito clara - alguns intervalos são separados por vírgulas, outros têm espaçamento irregular, etc.

Dadas essas inconsistências, provavelmente é bom não assumir nenhuma outra garantia. Por exemplo, quem disse que todos os horários serão do mesmo ano? Ninguém, é quem. Você deseja somar as horas da forma mais robusta possível.

A solução

Isso é muito fácil. Começamos criando algumas expressões regulares e uma função auxiliar. Então, vamos apenas… Huuuuffh!

Eca!! Chefe, vá relaxar em algum lugar por um segundo!

Como eu estava dizendo, agora podemos completar a tarefa com um algoritmo de três etapas:

1. Dividimos a string do quadro de horários em linhas individuais e as para criar uma matriz de objetos

   
   

2. Para cada iteração, nós:

   A. Divida a linha em torno do ano usando yearRegex , registrando a sequência de data

   B. Colete todos os intervalos de tempo usando intervalsRegex

   C. Reduza os intervalos de tempo, analisando cada um como um objeto JavaScript Date usando o auxiliar parseDate e a string de data da etapa 2.A

   
   

3. Reduza a matriz de objetos para encontrar o total de horas

   
   

 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);

Se você descomentar console.log(times); instrução, você verá um array contendo objetos como:

 { 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 },

Os benefícios deste método

Construir uma matriz de objetos tem algumas vantagens distintas sobre simplesmente extrair os intervalos de tempo e adicioná-los.

• Isso facilita a travessia após o fato. Isso é ideal se você quiser fazer algo como representar graficamente seus horários diários.

• Salvar a string de data para cada registro permite o uso de métodos aritméticos de data JS integrados após uma chamada para Date.parse .

• O objeto é um local conveniente para armazenar os resultados da chamada String.prototype.split , que pode não ser exclusivo dependendo se dois dias incluíram os mesmos intervalos de tempo.

Desvantagens deste método

Esta solução não é perfeita:

• São necessárias duas grandes travessias - uma vez sobre o resultado da divisão da planilha de horas e, a seguir, sobre o objeto times . Para otimizar esse código, provavelmente seria melhor usar uma única redução em um objeto vazio contendo totalHours e times como campos.

• Ele usa expressões regulares que podem ficar mais complicadas com um formato mais complexo

Empacotando

Agora você sabe como extrair tempo de um quadro de horários confuso. Com um pouco de esforço extra, você pode até construir um relógio de ponto completo. Mas então você não gastaria todo esse tempo de qualidade conhecendo seu chefe, não é? Huffff.