Array in Stücke aufteilen

Question

Nehmen wir an, dass ich ein Javascript-Array habe, das wie folgt aussieht:

["Element 1","Element 2","Element 3",...]; // with close to a hundred elements.

Welcher Ansatz wäre angemessen, um das Array in viele kleinere Arrays mit, sagen wir, höchstens 10 Elementen aufzuteilen?

Answer 1

Chunk aus lodash verwenden

lodash.chunk(arr,<size>).forEach(chunk=>{
  console.log(chunk);
})

Answer 2

Sie können diese ES6 chunk Funktion, die einfach zu verwenden ist:

const chunk = (array, size) =>
  Array.from({length: Math.ceil(array.length / size)}, (value, index) => array.slice(index * size, index * size + size));

const itemsPerChunk = 3;
const inputArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

const newArray = chunk(inputArray, itemsPerChunk);
console.log(newArray.length); // 3,

document.write(JSON.stringify(newArray)); //  [ [ 'a', 'b', 'c' ], [ 'd', 'e', 'f' ], [ 'g' ] ]

Answer 3

js

function splitToBulks(arr, bulkSize = 20) {
    const bulks = [];
    for (let i = 0; i < Math.ceil(arr.length / bulkSize); i++) {
        bulks.push(arr.slice(i * bulkSize, (i + 1) * bulkSize));
    }
    return bulks;
}

console.log(splitToBulks([1, 2, 3, 4, 5, 6, 7], 3));

.

function splitToBulks<T>(arr: T[], bulkSize: number = 20): T[][] {
    const bulks: T[][] = [];
    for (let i = 0; i < Math.ceil(arr.length / bulkSize); i++) {
        bulks.push(arr.slice(i * bulkSize, (i + 1) * bulkSize));
    }
    return bulks;
}

Answer 4

Wenn Sie EcmaScript Version >= 5.1 verwenden, können Sie eine funktionale Version von chunk() mit array.reduce() die eine Komplexität von O(N) hat:

function chunk(chunkSize, array) {
    return array.reduce(function(previous, current) {
        var chunk;
        if (previous.length === 0 || 
                previous[previous.length -1].length === chunkSize) {
            chunk = [];   // 1
            previous.push(chunk);   // 2
        }
        else {
            chunk = previous[previous.length -1];   // 3
        }
        chunk.push(current);   // 4
        return previous;   // 5
    }, []);   // 6
}

console.log(chunk(2, ['a', 'b', 'c', 'd', 'e']));
// prints [ [ 'a', 'b' ], [ 'c', 'd' ], [ 'e' ] ]

Erläuterung der einzelnen // nbr oben:

1. Erstellen eines neuen Chunks, wenn der vorherige Wert, d. h. das zuvor zurückgegebene Array von Chunks, leer ist oder wenn der letzte vorherige Chunk chunkSize Artikel
2. Hinzufügen des neuen Chunks zum Array der vorhandenen Chunks
3. Andernfalls ist der aktuelle Chunk der letzte Chunk im Array der Chunks
4. Den aktuellen Wert zum Chunk hinzufügen
5. Rückgabe des geänderten Arrays von Chunks
6. Initialisierung der Reduktion durch Übergabe eines leeren Arrays

---

Currying basierend auf chunkSize :

var chunk3 = function(array) {
    return chunk(3, array);
};

console.log(chunk3(['a', 'b', 'c', 'd', 'e']));
// prints [ [ 'a', 'b', 'c' ], [ 'd', 'e' ] ]

---

Sie können die chunk() Funktion auf die globale Array Objekt:

Object.defineProperty(Array.prototype, 'chunk', {
    value: function(chunkSize) {
        return this.reduce(function(previous, current) {
            var chunk;
            if (previous.length === 0 || 
                    previous[previous.length -1].length === chunkSize) {
                chunk = [];
                previous.push(chunk);
            }
            else {
                chunk = previous[previous.length -1];
            }
            chunk.push(current);
            return previous;
        }, []);
    }
});

console.log(['a', 'b', 'c', 'd', 'e'].chunk(4));
// prints [ [ 'a', 'b', 'c' 'd' ], [ 'e' ] ]

Answer 5

const array = ['a', 'b', 'c', 'd', 'e'];
const size = 2;
const chunks = [];
while (array.length) {
    chunks.push(array.splice(0, size));
}
console.log(chunks);