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
la 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
la 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
la 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
la 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

Comment mapper un tableau verticalement en colonnes?

Réponses: