修改减少es6答案

【问题标题】：Modify to reduce es6修改减少es6
【发布时间】：2018-05-31 06:17:15
【问题描述】：

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

html

<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)

【问题讨论】：

标签： javascript arrays ecmascript-6 reduce

【解决方案1】：

缩小和稍微优化的替代方案：

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(time)

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

【讨论】：

【解决方案2】：

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

 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;
 }

【讨论】：

【解决方案3】：

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

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>

【讨论】：