Comment rechercher et mettre à jour un objet dans un tableau Javascript

Si vous allez être un développeur Javascript, vous devrez vous familiariser avec les tableaux et les objets. Plus précisément, vous devrez apprendre à manipuler des objets dans des tableaux. Heureusement, nous sommes là pour vous aider. Lisez la suite pour identifier notre problème et les multiples solutions pour y faire face.

Le problème – Rechercher et mettre à jour l’objet dans le tableau

Supposons que nous ayons un tableau d’objets :

var inventory = [{item: 'shirt', quantity: 10}, {item: 'pants', quantity: 4}]

Nous voulons trouver un élément dans ce tableau et mettre à jour sa quantité. Et nous aimerions le faire sans copier tout le tableau dans une nouvelle variable. Puisque nous n’avons affaire qu’à un tableau au niveau de base, nous pouvons utiliser le trouverIndex méthode pour rechercher l’index de l’objet dont nous avons besoin.

La solution – findIndex

L’utilisation de findIndex est simple. Voici le code avec la répartition ci-dessous :

var itemIndex = inventory.findIndex(x => x.item == 'shirt')

var item = inventory[itemIndex]
item.quantity = 2

inventory[itemIndex] = item

Dans la première ligne, nous utilisons trouverIndex sur le tableau et recherchez l’élément que nous voulons. Dans ce cas, c’est une « chemise », mais ce serait une sorte d’identifiant unique dans un scénario réaliste. Le retour est la position d’index de l’objet dans notre tableau. Nous pouvons maintenant extraire cet objet dans une variable et mettre à jour n’importe quel champ que nous aimons, vu aux lignes deux et trois. Enfin, nous réécrivons notre nouvel objet dans le tableau d’origine à la ligne quatre.

Nous pouvons également raccourcir cette solution en utilisant l’opérateur de propagation lorsque nous réécrivons dans le tableau.

var itemIndex = inventory.findIndex(x => x.item == 'shirt')

inventory[itemIndex] = {...inventory[itemIndex], quantity: 2}

Ci-dessus, vous pouvez voir que nous avons d’abord ignoré l’écriture de notre objet dans une variable et que nous avons simplement écrit l’objet mis à jour directement dans le tableau.

Cette solution est courte et propre, mais elle suppose que vous recherchez un objet avec un identifiant unique dans votre tableau. Si vous avez un objet de répétition dans le tableau, vous devrez effectuer votre opération dans une boucle. Voici un exemple:

inventory.forEach(x, index) => {
  if(x.item == 'shirt') {
    inventory[index] = {...x, quantity: 2}
  }
}

Bien sûr, vous pouvez utiliser n’importe quelle syntaxe de bouclage que vous aimez pour cette opération.

Nous espérons que vous avez trouvé ce guide utile. Si vous avez des questions sur le code ci-dessus ou des questions javascript en général, n’hésitez pas à nous contacter.