Thêm khoảng thời gian trong JavaScript một cách dễ dàng

Hữu ích. Một cảm giác lạnh buốt chạy dọc sống lưng bạn.

Haaaaa. Hơi thở lạnh buốt của sếp phả vào cổ bạn như một cái cống tràn nước. Nhưng bạn không thể bảo họ lượn đi nơi khác...họ đã theo dõi bạn như chim ưng kể từ khi hệ thống theo dõi thời gian ở văn phòng bị hỏng.

Bây giờ, họ chỉ ở đó...lơ lửng...thở. Huffffff.

Bạn đã cố gắng viết số giờ của mình lên bảng chấm công, nhưng sếp của bạn khá bận rộn với việc đó. Điều gì sẽ xảy ra nếu họ tính toán không đúng và cộng sai số giờ của bạn?

Đây là cách giải quyết vấn đề của riêng bạn bằng JavaScript. Haaaaa .

Vấn đề

Bạn có một bảng chấm công trông giống như nội dung của String này:

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

Mỗi dòng chứa một ngày theo sau là một số khoảng thời gian. Nhưng chúng được viết không rõ ràng lắm — một số khoảng được phân tách bằng dấu phẩy, một số khác có khoảng cách không đều, v.v.

Với những mâu thuẫn này, có lẽ tốt hơn là không nên đảm bảo điều gì khác. Ví dụ, ai nói tất cả các thời điểm sẽ diễn ra trong cùng một năm? Không ai cả, đó là ai. Bạn muốn cộng các giờ lại với nhau một cách chắc chắn nhất có thể.

Giải pháp

Điều này khá dễ dàng. Chúng tôi bắt đầu bằng cách tạo một vài biểu thức chính quy và hàm trợ giúp. Vậy thì chúng ta sẽ… Huuuuffh!

Ờ!! Sếp, đi đâu đó thư giãn một chút đi!

Như tôi đã nói, bây giờ chúng ta có thể hoàn thành nhiệm vụ bằng thuật toán ba bước:

1. Chúng tôi chia chuỗi bảng chấm công thành các dòng riêng lẻ và bớt chúng để tạo ra một mảng đối tượng

   
   

2. Đối với mỗi lần lặp, chúng tôi:

   A. Chia dòng quanh năm bằng cách sử dụng yearRegex , ghi lại chuỗi ngày

   B. Thu thập tất cả các khoảng thời gian bằng cách sử dụng intervalsRegex

   C. Giảm theo phạm vi thời gian, phân tích từng phạm vi dưới dạng đối tượng Ngày JavaScript bằng cách sử dụng trình trợ giúp parseDate và chuỗi ngày từ bước 2.A

   
   

3. Giảm bớt mảng đối tượng để tìm tổng số giờ

   
   

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

Nếu bạn bỏ ghi chú console.log(times); câu lệnh, bạn sẽ thấy một mảng chứa các đối tượng như:

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

Lợi ích của phương pháp này

Việc xây dựng một mảng các đối tượng có một số lợi thế khác biệt so với việc chỉ trích xuất các khoảng thời gian và thêm chúng.

• Nó làm cho việc di chuyển dễ dàng sau khi thực tế. Điều này lý tưởng nếu bạn muốn làm điều gì đó như vẽ biểu đồ thời gian hàng ngày của mình.

• Việc lưu chuỗi ngày cho mỗi bản ghi cho phép sử dụng các phương thức số học ngày tháng JS tích hợp sau lệnh gọi tới Date.parse .

• Đối tượng là một nơi thuận tiện để lưu trữ kết quả của việc gọi String.prototype.split , kết quả này có thể không phải là duy nhất tùy thuộc vào việc hai ngày có bao gồm các khoảng thời gian giống nhau hay không.

Nhược điểm của phương pháp này

Giải pháp này không hoàn hảo:

• Nó yêu cầu hai lần duyệt lớn - một lần vượt qua kết quả của việc chia tách bảng chấm công và sau đó một lần vượt qua đối tượng times . Để tối ưu hóa mã này, tốt hơn nên sử dụng một mức giảm duy nhất trên một đối tượng trống chứa các trường totalHours và times .

• Nó sử dụng các biểu thức chính quy có thể phức tạp hơn với định dạng phức tạp hơn

Kết thúc

Bây giờ bạn đã biết cách trích xuất thời gian từ một bảng chấm công lộn xộn. Với một chút nỗ lực, bạn thậm chí có thể tạo ra một chiếc đồng hồ đúng giờ. Nhưng khi đó bạn sẽ không có cơ hội dành toàn bộ thời gian quý giá đó để tìm hiểu sếp của mình, phải không? Huffff.