javascript - 每两个元素映射一个数组

Question

假设我有一组服务对象

services: [{title: title, caption: caption},{title: title, caption: caption},{title: title, caption: caption},{title: title, caption: caption}]

最终结果是一个映射数组，每两个元素都在它自己的 div 中。

<div>
 <div>services[0]</div>
 <div>services[1]</div>
</div>
<div>
 <div>services[2]</div>
 <div>services[3]</div>
</div>

我无法全神贯注于如何实现这一目标？按每两个元素映射和拆分数组？将数组拆分为两个数组，然后映射？是不是一大早呢？是的。

Answer 1

是的，一种方法是按每两个元素对数组进行分组，但您可以使用 reduce 来做到这一点。

reduce 的回调 can actually take four arguments ，你可以用一个空数组初始化累加器，所以它最终看起来像这样:

const services = [{
  title: 'title0',
  caption: 'caption0'
}, {
  title: 'title1',
  caption: 'caption1'
}, {
  title: 'title2',
  caption: 'caption2'
}, {
  title: 'title3',
  caption: 'caption3'
}];

services
  .reduce((accumulator, currentValue, currentIndex, array) => {
    if (currentIndex % 2 === 0) {
      accumulator.push(array.slice(currentIndex, currentIndex + 2));
    }
    return accumulator;
  }, [])
  .forEach(p => console.log(p[0], p[1]));