Hier zijn 2 manieren om je arrays te combineren en een NIEUWE array terug te geven. Ik gebruik het liefst de spread-operator. Maar moet je oudere browsers ondersteunen, neem dan concat.
// 2 manieren om arrays samen te voegen
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
// Methode 1: Concat
const combined1 = [].concat(fruits, legumes);
// Methode 2: Spread
const combined2 = [...fruits, ...legumes];
// Resultaat
// [ 'pomme', 'poire', 'carotte', 'salade' ]Een alternatieve concat-syntaxis
Je kunt de concat-syntaxis ook zo schrijven:
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.concat(legumes);
// [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(fruits); // ['pomme ', 'poire'];
console.log(legumes); // ['carotte ', 'salade'];
Zoals je ziet raakt deze schrijfwijze de bestaande array niet aan en verandert ze die ook niet.
Welke moet ik kiezen?
Laten we beide versies naast elkaar zetten, zodat je ze kunt vergelijken.
// Versie A:
const combinedA = [].concat(fruits, legumes);
// Versie B:
const combinedB = fruits.concat(legumes);
De vraag is nu welke je moet kiezen. Ik neem versie A, omdat de bedoeling daar veel duidelijker is. Ik zie in één oogopslag dat ik een nieuwe array maak en de bestaande niet aanraak. Bij versie B, lijkt het alsof ik legumes aan de array fruits toevoeg, en het is voor mij niet meteen duidelijk dat de array fruits vervangen kan worden door de legumes.
Het verschil tussen spread en concat
Ik gebruik het liefst spread, want ik vind het korter en makkelijker te schrijven. MAAR er blijven gevallen waarin concat wint.
Spread is uitstekend zolang je vooraf weet dat je met arrays werkt. Maar wat als de bron iets anders is, een string bijvoorbeeld, en je die string aan de array wilt toevoegen? Laten we een voorbeeld nemen.
Voorbeeld
Stel dat dit het resultaat is dat we willen:
[1, 2, 3, 'random'];
A. Met spread
Volgen we het patroon van hiervoor en pakken we de spread-operator, dan gebeurt dit:
function combineArray(array1, array2) {
return [...array1, ...array2];
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]
Een string spreaden splitst het woord in losse letters. Dat levert dus niet het resultaat op dat we wilden.
B. Met concat
MAAR volgen we het patroon van concat, dan gebeurt dit:
function combineArray(array1, array2) {
return [].concat(array1, array2);
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'random' ]
Uitstekend! Precies het resultaat dat we wilden.
Ik weet dat sommigen van jullie nu denken: “kom op”. Ik schrijf gewoon een conditie die controleert of wat ik doorgeef een array is, en handel het zo af. Dat werkt natuurlijk ook. Of je schrijft minder code en gebruikt concat.
Conclusie
Dit is dus de vuistregel. Weet je dat je met arrays werkt, gebruik dan spread. Bestaat de kans dat je iets anders dan een array binnenkrijgt, gebruik dan concat om samen te voegen
Hoe dan ook, ik wilde het even aanstippen, zodat je de methode kunt kiezen die past bij het probleem dat je probeert op te lossen.
Merge Array with Push (twee arrays samenvoegen met Push)
Sommigen van jullie vragen zich af of push ook kan om een array samen te voegen. En ja, dat kan! Maar push raakt de bestaande array aan en verandert die. Er komt GEEN nieuwe array uit. Het hangt dus af van wat je wilt bereiken. Houd dat in gedachten.
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.push(...legumes);
console.log(combined); // 4
// wanneer je push gebruikt, geeft het de LENGTE van de gecombineerde array terug
console.log(fruits); // [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(legumes); // ['carotte', 'salade']
En als je een array in een andere array wilt pushen, moet je hem spreaden, anders houd je een geneste array over. Tenzij dat natuurlijk precies is wat je wilde
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
cars.push(legumes);
// fruits: [ 'pomme ', 'poire', ['carotte ', 'salade'] ]
cars.push(...legumes);
// fruits: [ 'pomme ', 'poire', 'carotte ', 'salade' ]
Browserondersteuning
Spread kwam in ES6, dus elke moderne browser ondersteunt het. Zo niet, gebruik dan concat of draai een compiler zoals Babel.
