課程目的:

這次的內容是計算video中屬性data time的加總

本次功能實作重點：

• 選取元素
• 計算總秒數
• 秒數換算到小時函式

選取元素

let li = document.querySelectorAll("li");

計算總秒數

  let data = [...li]
        .map((e) => {
          return e.dataset.time;
        })
        .map((time) => {
          let  [min, sec] = time.split(":"); //取出分秒
          return min * 60 + sec * 1;
        })
        .reduce((totalsec, sec) => {
          return totalsec + sec;
        });

1. [...li] 使用展開運算符拷貝進一個空陣列
2. 第一個.map 取出每個物件中的dataset.time屬性
3. 第二個.map 使用解構賦值 語法對應從數組中提取time.split(":") 分割成數組的值，假設time=12:30 使用.split(":") 之後會返回["10", "30"]，剛好對應我們解構賦值的[min, sec]
4. return min * 60 + sec * 1 將分鐘換算為秒數＋上sec * 1 （為了轉換為Number）

秒數換算到小時函式

 secondsToTime(data);

      function secondsToTime(sec) {
        let seconds = sec % 60;
        let mins = ((sec - seconds) / 60) % 60;
        let hours = (sec - mins * 60 - seconds) / 3600;
        console.log(hours, mins, seconds); //印出轉換後的數值
      }

seconds 為將總秒數換算成分鐘數後的餘數，也就是秒數

mins 為總秒數－seconds 換算成分鐘數之後，再取換算成小時後的餘數，也就是分數

hours為總秒數－mins 換算成秒數之後減seconds，除以3600(秒數轉換成一小時的總秒數)，就可以得到時數

最後重點整理 ：

• 解構賦值 是一種 JavaScript 運算式，可以把陣列或物件中的資料解開成為獨立變數，例let [a,b]=[1,2]
• sec * 1 是一種隱式類型轉換將字串變成數字型別的一種技巧。當對字串和數字進行算術運算時，JavaScript 會嘗試自動將字串轉換為數字，如果想要用別種更明確的轉換型別方式也可以使用Number()

導讀文件以及學習資源

JS30