Day 18 - Tally String Times with Reduce

前言

JS 30 是由加拿大的全端工程师 Wes Bos 免费提供的 JavaScript 简单应用课程，课程主打 No Frameworks、No Compilers、No Libraries、No Boilerplate 在30天的30部教学影片里，建立30个JavaScript的有趣小东西。

另外，Wes Bos 也很无私地在 Github 上公开了所有 JS 30 课程的程序码，有兴趣的话可以去 fork 或下载。

本日目标

今天也是复习回，主要是拿来重新复习下 Array 的map()和reduce()的用法。我们的最终目标是算出影片的长度总和并以时、分、秒呈现在 console里。

解析程序码

HTML 部分

以下是我们要用来计算影片总时数的清单，其中data-time属性值标示出影片的长度。

<ul class="videos">
    <li data-time="5:43">
      Video 1
    </li>
    <li data-time="2:33">
      Video 2
    </li>
    <li data-time="3:45">
      Video 3
    </li>
    <li data-time="0:47">
      Video 4
    </li>
    <li data-time="5:21">
      Video 5
    </li>
    <!--以下省略-->
<ul>

JS 部分

一开始，我们宣告常数timeNodes用来放我们取得的所有清单项目(<li>~</li>)，因为之後会用到 Array 的reduce()、map()，这里就顺便把NodeList用Array.from()转换成 Array。

const timeNodes = Array.from(document.querySelectorAll('[data-time]'));

宣告常数seconds存入所有影片的秒数总和。

第一个map()帮我们取得个别影片时间所构成的阵列(分:秒)。
第二个map()帮我们把影片时间的分和秒切开(间隔符号:)，第三个map()帮我们把阵列中的元素都转换成浮点数，最後把影片的长度都换成秒(mins * 60 + secs)。

把影片长度都换成以秒为单位後，就可以用reduce()将它们加在一起罗!

const seconds = timeNodes
    .map(node => node.dataset.time)
    .map(timeCode => {
      const [mins, secs] = timeCode.split(':').map(parseFloat);
      return (mins * 60) + secs;
    })
    .reduce((total, vidSeconds) => total + vidSeconds);

• 第一次map()後产生的阵列
  

• 第二、三次map()後产生的阵列
  

• 所有影片长度的秒数总和
  

接下来，把得到的总秒数换成时、分、秒的形式就完成本日的目标罗!

let secondsLeft = seconds;
//Math.floor() 回传小於等於所给数字的最大整数
const hours = Math.floor(secondsLeft / 3600);
secondsLeft = secondsLeft % 3600;

const mins = Math.floor(secondsLeft / 60);
secondsLeft = secondsLeft % 60;

console.log(hours, mins, secondsLeft);

补充资料:

Array.from()
parseFloat()
Array.prototype.map()
Array.prototype.reduce()
Math.floor()