2 façons de fusionner des tableaux en JavaScript

Voici 2 façons de combiner vos tableaux et de retourner un NOUVEAU tableau. J’aime utiliser l’opérateur Spread. Mais si vous avez besoin du support d’un navigateur plus ancien, vous devriez utiliser Concat.
// 2 façons de fusionner des tableaux

const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];

// Méthode 1: Concat
const combined1 = [].concat(fruits, legumes);

// Méthode 2: Spread
const combined2 = [...fruits, ...legumes];

// Résultat
// [ 'pomme', 'poire', 'carotte', 'salade' ]

Syntaxe alternative de Concat

Vous pouvez aussi écrire la syntaxe concat à cet égard :
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'];
Comme vous pouvez le constater, cette façon d’écrire ne manipule ni ne modifie le tableau existant. Lequel dois-je choisir ? Dressons la liste des deux versions, afin que vous puissiez les comparer.
// Version A:
const combinedA = [].concat(fruits, legumes);

// Version B:
const combinedB = fruits.concat(legumes);
Donc maintenant la question est, laquelle dois-je choisir. Je préfère la Version A parce que je pense que l’intention est beaucoup plus claire. Rien qu’en le regardant, je sais que je crée un nouveau tableau et que je ne manipule pas le tableau existant. Alors que si je regarde la Version B, il semble que j’ajoute les legumes au tableau de fruits et il ne me semble pas évident que le tableau de fruits puisse être remplacé par les legumes.

Différence entre Spread et Concat

Je préfère utiliser spread car je le trouve plus concis et plus facile à écrire. MAIS, il y a toujours des avantages à utiliser concat. Le déploiement est fantastique lorsque l’on sait à l’avance que l’on a affaire à des tableaux. Mais que se passe-t-il lorsque la source est autre chose, comme une chaîne de caractères. Et que vous voulez ajouter cette chaîne au tableau. Prenons un exemple.

Exemple

Disons que c’est le résultat que nous voulons :
[1, 2, 3, 'random'];
A. Utilisation de Spread Et si on suit le modèle qu’on a utilisé et qu’on utilise l’opérateur d’écart. Voici ce qui se passe :
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' ]
Si on étale notre chaîne de caractères, cela va diviser le mot en lettres séparées. Donc ça ne donne pas le résultat que nous voulons. B. Utilisation de Concat MAIS, si on suit le modèle de concat que nous avons fait. Voici ce qui se passe :
function combineArray(array1, array2) {
  return [].concat(array1, array2);
}

const isArray = [1, 2, 3];
const notArray = 'random';

combineArray(isArray, notArray);
// [ 1, 2, 3, 'random' ]
Excellent ! Nous obtenons le résultat que nous voulions. Je sais que certains d’entre vous se disent “Bah !”. Je vais juste écrire une conditionnelle pour m’assurer que ce que je passe est un tableau et l’exécuter en conséquence. Bien sûr, ça marche aussi. Ou simplement écrire moins de code et utiliser concat. Verdict Voici donc la règle rapide. Si vous savez que vous avez affaire à des tableaux, utilisez spread. Mais s’il est possible que vous ayez affaire à un élément autre qu’un tableau, utilisez alors concat pour fusionner un tableau Quoi qu’il en soit, je voulais juste le signaler, afin que vous puissiez utiliser la méthode la plus appropriée en fonction du problème que vous essayez de résoudre.

Merge Array with Push (Fusionner deux tableaux avec Push)

Certains d’entre vous se demandent si je ne peux pas aussi utiliser push pour fusionner un tableau. Et oui, vous le pouvez ! Mais lorsque vous utilisez push cela manipule ou modifie le tableau existant. Il ne crée PAS un nouveau tableau. Cela dépend donc de ce que vous essayez de faire. Assurez-vous de garder cela à l’esprit.
const fruits = ['pomme ', 'poire']; 
const legumes = ['carotte ', 'salade'];

const combined = fruits.push(...legumes);

console.log(combined); // 4
// quand vous utilisez push, il retourne la LONGUEUR du tableau combiné

console.log(fruits); // [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(legumes); // ['carotte', 'salade']
Aussi, quand vous essayez de pousser un tableau vers un autre tableau. Vous devrez l’étaler, sinon, vous finirez par obtenir un tableau imbriqué. Bien sûr, sauf si c’est ce que vous vouliez
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];

cars.push(legumes);
// fruits: [ 'pomme ', 'poire', ['carotte ', 'salade'] ]

cars.push(...legumes);
// fruits: [ 'pomme ', 'poire', 'carotte ', 'salade' ]

Support des navigateurs

Spread a été introduit dans ES6, donc tous les navigateurs modernes le supportent. Sinon vous devez utiliser concat à la place ou utiliser un compilateur comme Babel.

Nouvelle vidéo

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.