透過 Array.reduce()算出影片總時間並印在 console 中

• 字串分割：String.prototype.split()
• 陣列映射：Array.prototype.map()
• 元素自定義數據屬性：HTMLElement: dataset property
• 陣列累加/歸納：Array.prototype.reduce()
• 數學向下取整：Math.floor() - JavaScript | MDN

觀察 index.html，可以發現結構上只有一個<ul> 裡面包著無數<li>
並且都有相同的dataset屬性：time，題目也明確地告訴我們要累加計算全部的影片時間，今天跟昨天一樣算是拿之前所學到的進行組合式應用。

實作開始

1. 節點選取：先把所有<li>且有data-time屬性的節點全部選取吧，並因為稍後需要用到其他 Array method，所以我們要解構賦值讓這個NodeList變成真正的陣列。

videoList = [...document.querySelectorAll("li[data-time]")];

2. 資料處理：使用Array.map()，把資料處理轉換成我們需要的部分就好：

• 每個影片的data-time都是分：秒的字串，因此我們先用String.split()根據:為切割點將分與秒分開並賦值於minutes及seconds變數
• 最後把影片時間全部換算成秒數回傳，完成後這個videoTimes陣列裝的將是各個影片的總秒數(數字型別)

const videoTimes = videoList.map((node) => {
  const [minutes, seconds] = node.dataset.time.split(":");
  return Number(minutes) * 60 + Number(seconds);
});

3. 資料加總：有了各個影片的總秒數陣列，我們便可以使用Array.reduce()加總算出整個 html 中所有影片的總時間，初始值設為0。

const totalSeconds = videoTimes.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);

4. 格式化時間：寫一個函式來將總秒數轉換為時：分：秒字串回傳

function formatTime(totalSeconds) {
  //  小時 = 總秒數除以3600取整數
  const hours = Math.floor(totalSeconds / 3600);
  //  分鐘 = 總秒數先取除以3600的餘數再除以60取整數
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  //  秒 = 總秒數除以60的餘數
  const seconds = totalSeconds % 60;
  return `${hours}:${minutes}:${seconds}`;
}

5. 印出執行結果

console.log(formatTime(totalSeconds)); //4:58:58

👉Github Demo 頁面 👈

👉 好想工作室 15th 鐵人賽看板 👈

參考資料

1. Javascript 30 官網
   https://javascript30.com/
2. MDN 官網
   https://developer.mozilla.org/en-US/