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.
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.
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
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 :
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 :
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
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
// 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 syntaxeconcat à 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'];
// Version A:
const combinedA = [].concat(fruits, legumes);
// Version B:
const combinedB = fruits.concat(legumes);
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 utiliserspread 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'];
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' ]
function combineArray(array1, array2) {
return [].concat(array1, array2);
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'random' ]
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 utiliserpush 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']
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 utiliserconcat à la place ou utiliser un compilateur comme Babel.
