Wie ordne ich ein Array vertikal in Spalten zu?

15

Wenn ich eine Reihe von Elementen habe, wie z.

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

Wie kann ich es zuordnen, damit der Bildschirm / die Seite gerendert wird?

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

Ich konnte es dazu bringen, horizontal zu arbeiten,

    const chunkSize = 5;

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

Aber ich kann es nicht dazu bringen, vertikal zu arbeiten. Wie kann ich das machen?

Bearbeiten:

Die vorgeschlagene Lösung aus einer anderen Antwort gibt Subarrays zurück, was ich in dieser Frage nicht gestellt habe.

javascript Mike K.
quelle

3

Hier ist eine noch kompakte, aber lesbare Version.

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

Welches würde verwendet werden als:

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/

Hier ist eine Möglichkeit, es auszugeben, wenn die Fragen gestellt werden. Ich achte nicht genau auf den Abstand, ich überlasse das einer String-Padding-Funktion oder -Technik, die implementiert werden soll.

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
quelle

11

Sie können den Index für die Zeile berechnen.

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

Erweitern Sie das Snippet

Nina Scholz
quelle

so schnell. Ich habe eine Weile gebraucht, um es zu schieben, aber ich fand, dass Sie schneller waren.

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

Erweitern Sie das Snippet

Wei
quelle

Sie brauchen die for-Schleife nicht. Ich nehme an, Sie verwenden es, um die Schlüssel zu setzen? Sie machen genau das gleiche Prinzip in forEach, nur ein wenig komplexer mit einem Modul

Martijn

Wie ordne ich ein Array vertikal in Spalten zu?

Antworten: