Javascript 修改以减少es6

我想收集所有带有文本内容flexbox的li，并在秒内减少总时间并返回它。我做到了，但是如何将代码重写为一个reduce函数。结果应该是以秒为单位的数据时间总和

html

---

我会过滤，然后减少，因为它更具功能性和可读性：

const list items=[…document.querySelectorAll（'li'）；
const flexBoxTime=listItems
.filter（item=>item.textContent.includes（'Flexbox'））
.减少（（上一个，项目）=>{
常量[min，sec]=item.dataset.time.split（“：”）；
返回上一次+（+分钟*60）+秒
}, 0);
console.log（flexBoxTime）
Flexbox视频
Redux视频

另一种方法是使用旧式for循环（是的，我不回答这个问题）：

---

小型化和稍微优化的备选方案：

const time=[].reduce.call（document.getElementsByTagName（'li'），（r，v）=>v.textContent
.includes（'Flexbox'）？（v=v.dataset.time.split（'：'），v[0]*60++v[1]+r）：r，0）
console.log（时间）

Flexbox视频

Redux视频

<li data-time="3:07">Flexbox Video</li>
<li data-time="5:59">Redux Video</li>
...

const listItems = [...document.querySelectorAll('li')];

const flexBoxItem = listItems
    .filter(item => item.textContent.includes('Flexbox'))
    .map(item => item.dataset.time)
    .map(item => {
        let parts = item.split(':').map(i => parseFloat(i))
        return (parts[0] * 60) + parts[1]
    })
    .reduce((prev, next) => prev + next, 0)

 let result = 0;
 for(const item of listItems){
   if(!item.textContent.includes('Flexbox'))
      continue;
   const [mins, secs] = item.dataset.time.split(":");
   result += mins * 60 + +secs;
 }