[JS30] Day18: Tally String Times with Reduce

這一天的目標是要透過reduce去處理時間的加總，這邊提供兩種解法。

JavaScript

map & reduce

const timeNodes = [...document.querySelectorAll("[data-time]")]; // 將nodelist轉成array，讓我們有更多操作
const totalTime = timeNodes
  .map((timeNode) => timeNode.dataset.time) // 取得data-time屬性
  .map((time) => {
    const [mins, secs] = time.split(":").map(parseFloat); // 將字串轉為浮數點，以利後面計算不出錯
    return mins * 60 + secs;
  })
  .reduce((total, currentTime) => total + currentTime); // 加總

reduce 因為 map 是針對陣列每個元素做操作，與 reduce 相同，故我們可以將資料處理的邏輯放在 reduce 一次做完，減少我們的程式碼(也是所謂 reduce 的用意)

const totalTime2 = timeNodes.reduce((total, timeNode) => {
  const [mins, secs] = timeNode.dataset.time.split(":").map(parseFloat);
  const time = mins * 60 + secs;
  return total + time;
}, 0);

最後，轉成我們需要的時間格式

let secondsLeft = totalTime;
const hours = Math.floor(secondsLeft / 3600);
secondsLeft %= 3600; // 去掉小時 (60 * 60秒)
const mins = Math.floor(secondsLeft / 60);
secondsLeft %= 60; // 去掉分鐘 (60秒)
console.log(hours, mins, secondsLeft);

JavaScript​

JavaScript