18 - Adding Up Times with Reduce

tags: JavaScript30

專案簡介

第十八天的目標是複習 map 和 reduce 的運用

課程影片：JS30 18
導讀影片：Alex

初始文件

Github 檔案位置：18 - Adding Up Times with Reduce

正式製作

今天我們會在初始網頁拿到一串影片撥放時間，我們要算出他的撥放總時間，並且以 xx:xx:xx 的方式輸出於 console.log 上

首先我們選取所有包含 [data-time] 的元素，這裡要注意的事情是 querySelectorAll 的回傳是 NodeList，不包含 map、reduce這些函式，這裡以解構轉為 List

const timeNodes = [...document.querySelectorAll('[data-time')]; // 預設為 NodeList
console.log(timeNodes);

接下來以 map 和 reduce 逐步做資料處理，這裡希望先把分和秒統一轉成秒儲存

1. 提取出 li 的 dataset.time
2. 由於值是以 分:秒 的形式，因此利用 split(':') 分割，最後再把分 * 60 轉成秒再加上秒
   
3. 以 reduce 將 total 設為初始值為 0 的累加器，加總所有秒數

const seconds = timeNodes
    .map(timeNode => timeNode.dataset.time)
    .map(time => {
      const [min, sec] = time.split(':');
      return min * 60 + sec * 1; // 強制轉型
    })
    .reduce((total, second) => total + second, 0);
console.log(seconds)

最後以得到的總秒數轉為小時、分鐘、秒，這裡要注意的是有除法就會需要用到 floor 做四捨五入

const hour = Math.floor(seconds / 3600);
const min = Math.floor((seconds % 3600) / 60);
const sec = seconds % 60;
console.log(`${hour}:${min}:${sec}`);

到此就完成了，最後結果為 4:58:58

最後程式碼

const timeNodes = [...document.querySelectorAll('[data-time')]; // 預設為 NodeList
console.log(timeNodes);

const seconds = timeNodes
  .map(timeNode => timeNode.dataset.time)
  .map(time => {
    const [min, sec] = time.split(':');
    return min * 60 + sec * 1; // 強制轉型
  })
  .reduce((total, second) => total + second, 0);
console.log(seconds)
const hour = Math.floor(seconds / 3600);
const min = Math.floor((seconds % 3600) / 60);
const sec = seconds % 60;
console.log(`${hour}:${min}:${sec}`);

完成結果圖

最後的成品

結語

以上是第十八天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

How JavaScript's Array Reduce Works - #JavaScript30 18/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽 | Day 18：Adding Up Times With Reduce
MDN Web Docs