Insertion de tableau JavaScript - Comment ajouter à un tableau avec les fonctions Push, Unshift et Concat

Les tableaux JavaScript sont facilement l'un de mes types de données préférés. Ils sont dynamiques, faciles à utiliser et offrent tout un tas de méthodes intégrées dont nous pouvons profiter.

Cependant, plus vous avez d'options, plus il peut être difficile de décider laquelle utiliser.

Dans cet article, je voudrais discuter de quelques façons courantes d'ajouter un élément à un tableau JavaScript.

La méthode Push

La première et probablement la méthode de tableau JavaScript la plus courante que vous rencontrerez est push () . La méthode push () est utilisée pour ajouter un élément à la fin d'un tableau.

Disons que vous avez un tableau d'éléments, chaque élément étant une chaîne représentant une tâche que vous devez accomplir. Il serait judicieux d'ajouter des éléments plus récents à la fin du tableau afin que nous puissions terminer nos tâches précédentes en premier.

Regardons l'exemple sous forme de code:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

D'accord, alors push nous a donné une syntaxe simple et agréable pour ajouter un élément à la fin de notre tableau.

Disons que nous voulions ajouter deux ou trois éléments à la fois à notre liste, que ferions-nous alors? En fait, push () peut accepter plusieurs éléments à ajouter à la fois.

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Maintenant que nous avons ajouté quelques tâches supplémentaires à notre tableau, nous pourrions vouloir savoir combien d'éléments sont actuellement dans notre tableau pour déterminer si nous en avons trop dans notre assiette.

Heureusement, push () a une valeur de retour avec la longueur du tableau après que nos éléments ont été ajoutés.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

La méthode Unshift

Toutes les tâches ne sont pas créées égales. Vous pouvez rencontrer un scénario dans lequel vous ajoutez des tâches à votre baie et soudainement vous en rencontrez une qui est plus urgente que les autres.

Il est temps de présenter notre ami unshift () qui nous permet d'ajouter des éléments au début de notre tableau.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

Vous remarquerez peut-être dans l'exemple ci-dessus que, tout comme la méthode push () , unshift () renvoie la nouvelle longueur de tableau que nous pouvons utiliser. Cela nous donne également la possibilité d'ajouter plus d'un élément à la fois.

La méthode Concat

Abréviation de concatenate (to link together), la méthode concat () est utilisée pour joindre deux (ou plus) tableaux.

Si vous vous souvenez de ci-dessus, les méthodes unshift () et push () renvoient la longueur du nouveau tableau. concat () , d'autre part,renverra un tout nouveau tableau.

C'est une distinction très importante et rend concat () extrêmement utile lorsque vous avez affaire à des tableaux que vous ne voulez pas muter (comme des tableaux stockés dans l'état React).

Voici à quoi pourrait ressembler un cas assez basique et simple:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

Disons que vous avez plusieurs tableaux que vous souhaitez réunir. Pas de soucis, concat () est là pour sauver la situation!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Clonage avec Concat

Rappelez-vous comment j'ai dit que concat () peut être utile lorsque vous ne voulez pas muter votre tableau existant? Voyons comment nous pouvons tirer parti de ce concept pour copier le contenu d'un tableau dans un nouveau tableau.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Impressionnant! Nous pouvons essentiellement "cloner" un tableau en utilisant concat () .

Mais il y a un petit «piège» dans ce processus de clonage. Le nouveau tableau est une "copie superficielle" du tableau copié. Cela signifie que tout objet est copié par référence et non par l'objet réel.

Jetons un coup d'œil à un exemple pour expliquer plus clairement cette idée.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

Même si nous n'avons apporté aucune modification directe à notre tableau d'origine, le tableau a finalement été affecté par les modifications que nous avons apportées à notre tableau cloné!

Il existe plusieurs façons différentes de faire correctement un "clonage profond" d'un tableau, mais je vous laisse cela comme un devoir.

TL; DR

Lorsque vous souhaitez ajouter un élément à la fin de votre tableau, utilisez push (). Si vous devez ajouter un élément au début de votre tableau, essayez unshift (). Et tu peuxajoutez des tableaux ensemble en utilisant concat ().

Il existe certainement de nombreuses autres options pour ajouter des éléments à un tableau, et je vous invite à aller chercher d'autres méthodes de tableau!

N'hésitez pas à me contacter sur Twitter et à me faire part de votre méthode de tableau préférée pour ajouter des éléments à un tableau.