修改以减少es6

Question

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

HTML

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

JS

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)

Answer 1

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

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

const flexBoxTime = listItems
  .filter(item => item.textContent.includes('Flexbox'))
  .reduce((prev, item) => {
    const [min, sec] = item.dataset.time.split(':');
    return prev + (+min * 60) + +sec
  }, 0);
  
console.log(flexBoxTime);

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

但是,如果您想要将它们组合在一起,因为性能是一个问题:

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

const flexBoxTime = listItems
  .reduce((prev, item) => {
    if(!item.textContent.includes('Flexbox')) {
      return prev;
    }
    
    const [min, sec] = item.dataset.time.split(':');
    return prev + (+min * 60) + +sec
  }, 0);
  
console.log(flexBoxTime);

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