Array : mthode concat()

Exemple interactif

const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];
const array3 = array1.concat(array2);

console.log(array3);
// Rsultat attendu : Array ["a", "b", "c", "d", "e", "f"]

Syntaxe

concat()
concat(value1)
concat(value1, value2)
concat(value1, value2, /* , */ valueN)

Paramtres

value1, , valueN Facultatif

Tableaux et/ou valeurs concatner dans le nouveau tableau. Si tous les paramtres valueN sont omis, concat retourne une copie superficielle du tableau existant sur lequel elle est appele. Voir la description ci-dessous pour plus de dtails.

Valeur de retour

Une nouvelle instance de Array.

Description

La mthode concat cre un nouveau tableau. Ce tableau sera d'abord rempli par les lments de l'objet sur lequel elle est appele. Ensuite, pour chaque argument, sa valeur sera concatne dans le tableau : pour les objets normaux ou les valeurs primitives, l'argument lui-mme deviendra un lment du tableau final ; pour les tableaux ou objets assimils des tableaux ayant la proprit Symbol.isConcatSpreadable dfinie une valeur vraie, chaque lment de l'argument sera ajout indpendamment au tableau final. La mthode concat ne parcourt pas rcursivement les tableaux imbriqus passs en argument.

La mthode concat() est une mthode de copie. Elle ne modifie ni this ni aucun des tableaux fournis en argument, mais retourne une copie superficielle qui contient les mmes lments que ceux des tableaux originaux.

La mthode concat() prserve les trous si l'un des tableaux sources est creux.

La mthode concat() est gnrique. La valeur de this est traite de la mme manire que les autres arguments ( ceci prs qu'elle sera d'abord convertie en objet), ce qui signifie que les objets simples seront directement placs en tte du tableau rsultant, tandis que les objets de type tableau avec un [Symbol.isConcatSpreadable] vrai seront dplis dans le tableau rsultant.

Exemples

Concatner deux tableaux

Le code qui suit concatne deux tableaux :

const lettres = ["a", "b", "c"];
const chiffres = [1, 2, 3];

const alphanum = lettres.concat(chiffres);
console.log(alphanum);
// donne : ["a", "b", "c", 1, 2, 3]

Concatner trois tableaux

Le code qui suit concatne trois tableaux :

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const nums = num1.concat(num2, num3);

console.log(nums);
// donne : [1, 2, 3, 4, 5, 6, 7, 8, 9]

Concatner des valeurs avec un tableau

Le code qui suit ajoute trois valeurs un tableau :

const alpha = ["a", "b", "c"];

const alphanumerique = alpha.concat(1, [2, 3]);

console.log(alphanumerique);
// donne : ['a', 'b', 'c', 1, 2, 3]

Concatner des tableaux imbriqus

Dans le code qui suit, on concatne deux tableaux qui ont plusieurs dimensions et on illustre la conservation des rfrences :

const num1 = [[1]];
const num2 = [2, [3]];

const nums = num1.concat(num2);

console.log(nums);
// donne : [[1], 2, [3]]

// Ici, on modifie le premier lment de num1
num1[0].push(4);

console.log(nums);
// donne : [[1, 4], 2, [3]]

Concatner des objets de type tableau avec Symbol.isConcatSpreadable

concat ne traite pas tous les objets de type tableau comme des tableaux par dfaut uniquement si Symbol.isConcatSpreadable est dfini une valeur vraie (par exemple, true).

const obj1 = { 0: 1, 1: 2, 2: 3, length: 3 };
const obj2 = { 0: 1, 1: 2, 2: 3, length: 3, [Symbol.isConcatSpreadable]: true };
console.log([0].concat(obj1, obj2));
// [ 0, { '0': 1, '1': 2, '2': 3, length: 3 }, 1, 2, 3 ]

Utiliser concat() sur des tableaux creux

Si l'un des tableaux sources est creux, le tableau rsultant le sera aussi :

console.log([1, , 3].concat([4, 5])); // [1, vide, 3, 4, 5]
console.log([1, 2].concat([3, , 5])); // [1, 2, 3, vide, 5]

Appeler concat() sur des objets qui ne sont pas des tableaux

Si la valeur de this n'est pas un tableau, elle est convertie en objet puis traite de la mme manire que les arguments de concat(). Dans ce cas, la valeur de retour est toujours un nouveau tableau simple.

console.log(Array.prototype.concat.call({}, 1, 2, 3)); // [{}, 1, 2, 3]
console.log(Array.prototype.concat.call(1, 2, 3)); // [ [Number: 1], 2, 3 ]
const objetSimilaireTableau = {
  [Symbol.isConcatSpreadable]: true,
  length: 2,
  0: 1,
  1: 2,
  2: 99, // ignor par concat() car length vaut 2
};
console.log(Array.prototype.concat.call(objetSimilaireTableau, 3, 4)); // [1, 2, 3, 4]

Spcifications

Compatibilit des navigateurs

Voir aussi

• Guide des collections indexes
• L'objet global Array
• La mthode Array.prototype.push()
• La mthode Array.prototype.unshift()
• La mthode Array.prototype.splice()
• La mthode String.prototype.concat()
• La proprit Symbol.isConcatSpreadable
• Prothse d'mulation pour Array.prototype.concat dans core-js avec corrections et prise en charge des comportements modernes comme Symbol.isConcatSpreadable (angl.)
• Prothse d'mulation es-shims pour Array.prototype.concat (angl.)