Tally String Times with Reduce

這次沒有什麼畫面，主要是利用JS去處理影片的總長度。
假設有一推影片，每一個影片都有他自己的時間長度，時間長度預先存放在自定義屬性data-time中，data-time的格式為分秒的格式（例如：5:18)，所以需要迴圈去把所有影片長度都變成秒數，再reduce去加總。
最後又轉換為時、分、秒的格式。

<li data-time="5:43">
   Video 1
</li>

個人codepen

技巧點

1. nodeList節點清單

• querySelectorAll選取到所有項目的一個集合，本身不是陣列，能夠操作的方法較少，所以會將它轉成真陣列。

const nodes = document.querySelectorAll("[data-time]"); 

//轉換成陣列，底下兩種都可以
const arr = Array.from(nodes);
const arr = [...nodes];

2. split(separator)

• 將字串按照你所指定的分割模式去將字串切割成多個單位，最後返回一個陣列。separator可以是字串、物件或是正則表達之類...

// 要切割的字串為空字串，separator為非空字串的情況，得到一個空字串陣列
const str = '';
const words = str.split('a');
console.log(words); // ['']


// 要切割的字串為空字串，separator也為空字串的情況，得到一個空陣列
const str = '';
const words = str.split('');
console.log(words); // ['']


// 簡單範例，匹配到逗號，就進行切割
const name = "jack,tim,ann,ella";
const newArr = name.splits(",");
console.log(newArr); // ['jack', 'tim', 'ann', 'ella']


// 利用正則當作切割點
const word = 'one: bird band  ;two: dog band ;  three: cat band;';
const splitword = word.split(/\s*;\s*(?!$)/);
console.log(splitword); // ['one: bird band', 'two: dog band', 'three: cat band;']


// split(separator, limit)可以放入第二個參數，去限制匹配後要回傳的數量
const myString = "Hello World. How are you doing?";
const splits = myString.split(" ", 3);
console.log(splits); // [ "Hello", "World.", "How" ]

3. Math.floor()

• 括號內放入要處理的數字，可以把它當作無條件捨去，參考ＭＤＮ的範例如下：

console.log(Math.floor(5.95));
// Expected output: 5

console.log(Math.floor(5.05));
// Expected output: 5

console.log(Math.floor(5));
// Expected output: 5

console.log(Math.floor(-5.05));
// Expected output: -6

4. parseFloat()

• 將字串轉換成以十進位表示的浮點數，如果第一個字無法轉換的話，就會回傳NaN
• 遇到空格的話無法處理，就會中斷解析，把前面解析完成的回傳

parseFloat(10)  // 10
parseFloat("10") // 10
parseFloat("10.33") // 10.33
parseFloat("34 45 66") // 34
parseFloat("He was 40"); // NaN

心得

處理上要經過很多道程序，如果對語法不夠熟悉的話，會一直要打印出來看一下，目前變成什麼樣子了。
影片的作者，就很輕鬆地一路講解下去，真是厲害。

這次用到的某些技巧都是前面天數有講解過的，忘記的話去查查文章複習，因為我就很常忘記哈～