배열을 세로로 열에 매핑하는 방법은 무엇입니까?

다음과 같은 항목 배열이있는 경우

const array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ]

화면 / 페이지가 렌더링되도록 어떻게 매핑 할 수 있습니까?

1     6     11    16
2     7     12    17
3     8     13    18
4     9     14
5     10    15

수평으로 작업 할 수있었습니다.

    const chunkSize = 5;

    array
      .map((e, i) => {
        return i % chunkSize === 0 ?
           selected.slice(i, i + chunkSize)
         : null;
      })
      .filter(e => e);

그러나 세로로 작동시키지 못했습니다. 어떻게해야합니까?

편집하다:

다른 답변에서 제안 된 솔루션은 하위 배열을 반환하지만이 질문에서 내가 요청한 것은 아닙니다.

아직 작지만 읽을 수있는 버전이 있습니다.

const columnize = (items, rows) => {
  const toColumns = (table, item, iteration) => {
    let row = iteration % rows;

    table[row] = table[row] || [];
    table[row].push(item);

    return table;
  };

  return items.reduce(toColumns, []);
};

다음과 같이 사용됩니다.

const numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ];

console.log(columnize(numbers, 5));

https://jsfiddle.net/69fshprq/

다음은 질문에 따라 출력하는 방법입니다. 간격에주의를 기울이지 않고 문자열 패딩 기능이나 구현 기술로 남겨 두겠습니다.

const numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ]

// <pre id="out"></pre>
let out = document.getElementById('out')
let list = columnize(numbers, 5)

for (var column in list) {
    var item = list[column]
    var line = item.reduce((line, item) => line + item + '    ', '')

    out.textContent += line + ' \n'
}

https://jsfiddle.net/t60rfcpe/

행의 인덱스를 계산할 수 있습니다.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
    chunk = 5,
    result = array.reduce((r, v, i) => {
        (r[i % chunk] = r[i % chunk] || []).push(v);
        return r;
    }, []);
    

result.forEach(a => console.log(...a));