Comment mapper un tableau verticalement en colonnes?

15

Si j'ai un tableau d'éléments, tels que,

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

Comment puis-je le mapper pour que l'écran / la page s'affiche,

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

J'ai pu le faire fonctionner horizontalement avec,

    const chunkSize = 5;

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

Mais je n'arrive pas à le faire fonctionner verticalement. Comment puis-je faire ceci?

Éditer:

La solution suggérée d'une autre réponse renvoie des sous-tableaux, ce qui n'est pas ce que j'avais demandé dans cette question.

javascript

— Mike K
source

3

Voici une version encore compacte mais lisible.

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

Qui serait utilisé comme:

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/

Voici un moyen de le produire en réponse aux questions posées. Je ne fais pas très attention à l'espacement, je laisse cela à une fonction ou une technique de remplissage de chaîne à mettre en œuvre.

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
source

11

Vous pouvez calculer l'indice de la ligne.

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

Développer l'extrait

— Nina Scholz
source

si rapide. Il m'a fallu un certain temps pour le ralentir, mais j'ai trouvé que vous étiez plus rapide ..

— 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 ] ]
*/

Développer l'extrait

— Wei
source

Vous n'avez pas besoin de la boucle for. Je suppose que vous l'utilisez pour définir les clés? Vous faites exactement le même principe dans forEach, seulement un petit complexeur avec un module

— Martijn