Come mappare un array verticalmente in colonne?


15

Se ho una serie di articoli, come,

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

Come posso mapparlo, in modo che lo schermo / la pagina vengano visualizzati,

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

Sono stato in grado di farlo funzionare in modo orizzontale con,

    const chunkSize = 5;

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

Ma non riesco a farlo funzionare verticalmente. Come posso fare questo?

Modificare:

La soluzione suggerita da un'altra risposta restituisce subarrays, che non è quello che avevo chiesto in questa domanda.

Risposte:


3

Ecco una versione ancora compatta ma leggibile.

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

Quale sarebbe usato come:

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/

Ecco un modo per emetterlo quando vengono poste le domande. Non sto prestando molta attenzione alla spaziatura, la lascerò a una funzione di imbottitura di corde o tecnica da implementare.

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/


11

È possibile calcolare l'indice per la riga.

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


così veloce. Mi ci è voluto un po 'di tempo per farlo, ma ho scoperto che eri più veloce ..
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 ] ]
*/


Non è necessario il ciclo for. Presumo che lo usi per impostare le chiavi? Stai facendo lo stesso principio esatto in Ogni, solo un po 'più complesso con un modulo
Martijn
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.