Day18-課題內容

進入JS30的第十八天，今天的課題中，我們也要來處理陣列中的資料，
而這次處理的資料對象為時間，我們要將每個元素的時間加總起來。[1]

進入課題

在一開始的草稿中，作者總共提供了58個代表影片的 li 元素，並利用 Data-attribute 將各個影片長度資料加上，而我們的目的就是利用 array.reduce() 方法，把所有的影片時間加總起來。
首先我們先將所有的li 元素選取起來，然後使用 Array.from() 方法轉為陣列：

const allListItem = Array.from(document.querySelectorAll('li'));

在array.reduce() 方法中，首先先透過 element.dataset.attribute 方法取得 data-time的時間值。再來利用 string.split() 方法將分跟秒分開，因取得的分跟秒為 string ，所以使用 Number() 方法將其轉為數字，然後回傳總秒數：

const total = allListItem.reduce(function(acc, cv){
    //取得代表時間的 data-attribute 字串
    const videoLength = cv.dataset.time;
    //將取的的時間轉為各個陣列中元素
    const array = videoLength.split(':')
    //將字串轉為數字然後計算成總秒數
    const seconds = Number(array[0]*60) + Number(array[1]);
    return acc + seconds;
  },0);

然後要將秒數換算成 '時：分：秒'的格式，我們先來認識一下 javascript 中的數字運算符 operator 。[2]

1. +：加。
2. -：減。
3. *：乘。
4. /：除。
5. %：餘數。
6. ++：加一。
7. --：減一。

知道這些運算符之後，我們就可以將我們的總秒數換算成 '時：分：秒'的格式：

const hour = parseInt(total/3600);
const min = parseInt((total - 3600*hour)/60);
const second = total%60;
console.log(`${hour}:${min}:${second}`);

總結

以上是今天的內容，之前我們處理的資料都是單純的字串或數字，而今天時間的計算，則是需要先透過不同的方法，將資料轉為秒數，在轉為我們要的格式，相信完成今天的課題之後，我們對不同資料的處理可以更得心應手！！

參考資料

1. javascript30
2. w3schools-JavaScript Operators