paint-brush
Fügen Sie auf einfache Weise Zeitintervalle in JavaScript hinzuvon@anwarhjg
729 Lesungen
729 Lesungen

Fügen Sie auf einfache Weise Zeitintervalle in JavaScript hinzu

von AHJ George4m2024/01/13
Read on Terminal Reader

Zu lang; Lesen

Sie haben einen Stundenzettel-String, einen schwebenden Boss und JavaScript. Das Problem: Sie möchten die Stunden addieren und verhindern, dass Ihr Chef herumschwebt. Die Lösung: Erfordert keine Hexerei.
featured image - Fügen Sie auf einfache Weise Zeitintervalle in JavaScript hinzu
AHJ George HackerNoon profile picture
0-item

Sie benötigen keines dieser Hexenzubehörteile, um dieses Tutorial abzuschließen. Bild vom Autor.



Huuuff. Ein kaltes Spannungsgefühl schlängelt sich durch deinen Rücken.


Haaaaah. Der eiskalte Atem Ihres Chefs strömt über Ihren Hals wie ein überlaufender Abwasserkanal. Aber man kann ihnen nicht sagen, dass sie sich woanders aufhalten sollen ... Sie beobachten Sie wie ein Falke, seit das Zeiterfassungssystem im Büro kaputt gegangen ist.


Jetzt sind sie einfach da...schweben...atmend. Huffffff.


Sie haben versucht, Ihre Stunden auf einer Arbeitszeittabelle festzuhalten, aber Ihr Chef ist mit all dem Schnüffeln ziemlich beschäftigt. Was wäre, wenn sie nicht richtig gerechnet und Ihre Stunden falsch addiert hätten?


Hier erfahren Sie, wie Sie mit JavaScript die Dinge selbst in die Hand nehmen. Haaaaa .

Das Problem

Sie haben eine Arbeitszeittabelle, die wie der Inhalt dieser String aussieht:

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


Jede Zeile enthält ein Datum, gefolgt von einigen Zeitintervallen. Aber sie sind nicht sehr sauber geschrieben – einige Intervalle sind durch Kommas getrennt, andere haben unregelmäßige Abstände usw.


Angesichts dieser Inkonsistenzen ist es wahrscheinlich sinnvoll, keine anderen Garantien anzunehmen. Wer sagt zum Beispiel, dass alle Zeiten aus demselben Jahr stammen? Niemand, das ist wer. Sie möchten die Stunden so robust wie möglich addieren.

Die Lösung

Das ist ziemlich einfach. Wir beginnen mit der Erstellung einiger regulärer Ausdrücke und einer Hilfsfunktion. Dann werden wir einfach... Huuuuffh!


Pfui!! Boss, entspann dich kurz irgendwo!


Wie gesagt, jetzt können wir die Aufgabe mit einem dreistufigen Algorithmus erledigen:


  1. Wir teilen die Zeichenfolge der Arbeitszeittabelle in einzelne Zeilen auf und reduzieren sie, um ein Array von Objekten zu erstellen


  2. Für jede Iteration:

    A. Teilen Sie die Zeile mithilfe von yearRegex um das Jahr auf und zeichnen Sie die Datumszeichenfolge auf

    B. Erfassen Sie alle Zeitbereichsintervalle mithilfe von intervalsRegex .

    C. Reduzieren Sie die Zeitbereiche und analysieren Sie sie jeweils als JavaScript-Datumsobjekt mithilfe des Hilfsprogramms parseDate und der Datumszeichenfolge aus Schritt 2.A


  3. Reduzieren Sie die Anzahl der Objekte, um die Gesamtstundenzahl zu ermitteln


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


Wenn Sie die console.log(times); -Anweisung sehen Sie ein Array mit Objekten wie:

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

Die Vorteile dieser Methode

Das Erstellen eines Arrays von Objekten hat einige entscheidende Vorteile gegenüber dem einfachen Extrahieren und Hinzufügen der Zeitintervalle.


  • Dies ermöglicht eine einfache Durchquerung im Nachhinein. Dies ist ideal, wenn Sie beispielsweise Ihre Tageszeiten grafisch darstellen möchten.


  • Das Speichern der Datumszeichenfolge für jeden Datensatz ermöglicht die Verwendung integrierter JS-Datumsarithmetikmethoden nach einem Aufruf von Date.parse .


  • Das Objekt ist ein praktischer Ort zum Speichern der Ergebnisse des Aufrufs String.prototype.split , die möglicherweise nicht eindeutig sind, je nachdem, ob zwei Tage dieselben Zeitintervalle umfassten.

Nachteile dieser Methode

Diese Lösung ist nicht perfekt:

  • Es sind zwei große Durchläufe erforderlich – einmal über das Ergebnis der Aufteilung der Arbeitszeittabelle und einmal über das times . Um diesen Code zu optimieren, wäre es wahrscheinlich besser, eine einzelne Reduzierung für ein leeres Objekt zu verwenden, das totalHours “ und times als Felder enthält.


  • Es verwendet reguläre Ausdrücke, die bei einem komplexeren Format möglicherweise komplizierter werden

Zusammenfassung

Sie wissen jetzt, wie Sie Zeit aus einer unordentlichen Arbeitszeittabelle extrahieren können. Mit etwas mehr Aufwand könnten Sie sogar eine vollwertige Stechuhr bauen. Aber dann könnten Sie nicht so viel Zeit damit verbringen, Ihren Chef kennenzulernen, oder? Huffff.