修改减少es6

Question

我想收集所有带有文本内容 flexbox 的 li 并减少秒和 return 中的总时间。我做到了，但是如何将代码重写为一个单一的 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>

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

Answer 3

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

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>

修改减少es6

Modify to reduce es6

javascript

arrays

reduce

ecmascript-6