我怎么加载数组映射到列多行吗?

Question

我想要一个像这样的数组:

let thisArray = [1,2,3,4,5,6,7,8];

，我希望能够将数组映射到2x4列/行。

<div className='numberRow'>
<div className='numberCol'>1</div>
<div className='numberCol'>2</div>
</div>
<div className='numberRow'>
<div className='numberCol'>3</div>
<div className='numberCol'>4</div>
</div>
<div className='numberRow'>
<div className='numberCol'>5</div>
<div className='numberCol'>6</div>
</div>
<div className='numberRow'>
<div className='numberCol'>7</div>
<div className='numberCol'>8</div>
</div>

是否可以使用map()并开始新行?

Answer 1

您可以通过创建一个新数组并使用Array.push和Array.splice，然后map通过每个项目将数组分成2块，并构建HTML:

let thisArray = [1, 2, 3, 4, 5, 6, 7, 8];
let split = []
while (thisArray.length > 0) {
split.push(thisArray.splice(0, 2));
}
const HTML = split.map(e => `<div className='numberRow'>
<div className='numberCol'>${e[0]}</div>
<div className='numberCol'>${e[1]}</div>
</div>`).join('')
document.write(HTML)

[className=numberRow]{background-color:yellow;padding:10px}[className=numberCol]{background-color:lightgrey}

Answer 2

您可以使用Array#reduce()方法来创建所需的数据数组，然后您可以使用Array#map()方法来创建HTML，如下面的演示所示:

let thisArray = [1,2,3,4,5,6,7,8];
let twoCol = thisArray.reduce((acc,cur,i,a) => 2*i < a.length ? acc.concat([a.slice(2*i,2*i+2)]) : acc,[]);
console.log( twoCol );
let table = twoCol.map(([c1,c2]) => `<div className='numberRow'>
<div className='numberCol'>${c1}</div>
<div className='numberCol'>${c2}</div>
</div>`)
.join('');
console.log( table );