¿Cómo mapear una matriz verticalmente en columnas?

15

Si tengo una variedad de elementos, como,

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

¿Cómo puedo mapearlo, para que se muestre la pantalla / página,

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

Pude hacer que funcionara horizontalmente con,

    const chunkSize = 5;

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

Pero no puedo hacer que funcione verticalmente. ¿Cómo puedo hacer esto?

Editar:

La solución sugerida de otra respuesta devuelve subconjuntos, que no es lo que había preguntado en esta pregunta.

javascript Mike K
fuente

3

Aquí hay una versión compacta pero legible.

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, []);
};

Que se usaría como:

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/

Aquí hay una forma de generarlo a medida que se hacen las preguntas. No estoy prestando atención estricta al espaciado, lo dejaré a una función o técnica de relleno de cadena para implementar.

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/

Jared Farrish
fuente

11

Podrías calcular el índice de la fila.

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

Expandir fragmento

Nina Scholz
fuente

tan rapido. Me tomó un tiempo para slove él, pero he encontrado que eras más rápido ..

Wei

6

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

let result = [];
for (let i = 0; i < chunkSize; i++) {
    result[i] = [];
}

array.forEach((e,i) => {
    result[i % chunkSize].push(e);
});

console.log(result); 
/* 
Result : 
[ [ 1, 6, 11, 16 ],
  [ 2, 7, 12, 17 ],
  [ 3, 8, 13, 18 ],
  [ 4, 9, 14 ],
  [ 5, 10, 15 ] ]
*/

Expandir fragmento

Wei
fuente

No necesitas el bucle for. ¿Asumo que lo usas para configurar las teclas? Estás haciendo exactamente el mismo principio en forEach, solo que un poco más complejo con un módulo

Martijn

¿Cómo mapear una matriz verticalmente en columnas?

Respuestas: