JavaScript30-Adding-Up-Times-With-Reduce-18

提前去體驗了聖誕節，
上一次去那裡好像是五年前了吧。

好像找回了單純青澀的那種感覺，
但有些事情好像會一輩子貼在身上，
不知從什麼時候開始，總是會想著自己不夠好
總是覺得一輩子的努力也甩不掉身上的標籤

看著雙雙對對的情人，來到跟五年前一樣的場地，
說這五年好像長大了，但面對這些事還是一樣沒有長進。
變的是什麼，好像就變得更積極了一點。

又失敗了。
表情還是藏不住，我以為我已經戴上虛偽的面具，
總是可以強顏歡笑的讓人察覺不到，
失落，又一次寫在臉上。

但應該沒關係吧，就像常常對自己說的，
失敗了又怎樣，隔天太陽還是會升起，
結果隔天下雨，唉…
那也沒關係，地球還是會自轉啊。
這些既定的事情，本來就不是這輩子可以改變的，
不論標籤也好，地球繞著太陽轉也好，
試著接受它吧，我可以的吧，
一路不是就是這樣走來的嗎？
也不是最糟糕的那一個，也不是韓劇狗血故事的主角。
享受著當下很純粹的感動就好了吧。

好久沒有走這麼多路了，
好久沒有想要花時間，在工作以外的事情上，
也好久沒有沒有在苦讀後，讓自己的步調慢一點，
看影片不快轉，吃飯不滑手機，
靜靜地品嚐著眼前的一切，

有點忘了上一次零距離的接觸是多久之前，
只覺得，真的像畫面靜止了一樣，
飄著輕柔的雨，吹著寒風但心是暖的，
真想，聖誕節的時候再來一次，
一樣的地方，不一樣的角色，不同的時間，會有不一樣的感受？

突然憂鬱，
總會在飄著雨的冬天，一個人打開心靈開關，
思索著哪裡讓人有一種煩悶，
原來又是那個標籤，讓我自卑，
我總覺得自己不應該擁有這世界的快樂，
總覺得朋友的友善，都是虛情假意的關心，
看似樂情款待也許只是為了背後不知道是什麼的利益，
但這次好像不一樣的了，
也許真的成長了，漸漸不在意身上的標籤，
坐在閃爍的燈泡下，想找出不一樣的原因，
怎麼想都想不出個所以然，
應該是命運，有的時候就是來的這麼突然，
強行關閉我的心靈開關，強制讓我信奉關心是真的。

但強制的結果總會讓機器有點迷惘，
不知道該繼續既定的程序，還是接受新的指令，
想想，還是接受命運吧，
反正跟著感覺走，態度會讓一切明朗。

---

最近一直被獵頭，想著是不是該出去闖一闖了，
雖然一直都有在面試，但被看到總是不一樣的感覺，
終於可以不用自己面對未來的考量，
交到了一個好朋友，可以聽我說說這些我煩惱的事情，
除了感謝，
好像不知道說什麼了。

18 - Adding Up Times with Reduce

首次上傳：2020/11/29

主題

利用map()與reduce()來取得播放清單的總秒數。

步驟

Step1. 取得全部的時間值

在HTML中，時間資訊放在<li data-time>中，
所以透過querySelectorAll來取得，
因為接著會使用map及reduce操作，
資料型態必須先轉為Array。

// 透過Array.from或是[...]來將querySelectorAll取回的NodeList轉Array
const timeNodes = Array.from(document.querySelectorAll('[data-time'));

Step2. 將取回的資料轉為秒數並加總

const seconds = timeNodes
      // 取出每個元素中的data-time資料
      .map(node => node.dataset.time)
      .map(timeCode => {
        // 用解構賦值的方式分別取出split(':')後的分與秒
        // 再透過一個map執行parseFloat將字串轉數值
        const [mins, secs] = timeCode.split(':').map(parseFloat);
        // 回傳這組資料轉換後的總秒數
        return (mins * 60) + secs;
      })
      // 用reduce來加總每次執行結果
      .reduce((total, seconds) => total + seconds);

Step3. 把總秒數轉為時分秒格式

// 利用取得的總秒數來進行總共時分秒的計算
// 使用Math.floor取整數，再利用%來操作餘數
let secondsLeft = seconds;
const hours = Math.floor(secondsLeft / 3600);
secondsLeft = secondsLeft % 3600;
const mins = Math.floor(secondsLeft / 60);
secondsLeft = secondsLeft % 60;

Step4. 印出結果

console.log(`${hours}:${mins}:${secondsLeft}`);

其他

這篇也算是之前學習的再次運用，
比較特別的是發現map中可以直接使用function！

const [mins, secs] = timeCode.split(':').map(parseFloat);
//等同於
const [mins, secs] = timeCode.split(':').map(function(str){
    return parseFloat(str);
});

[DEMO]