Mettre à jour l'objet dans le tableau JavaScript

1. Mettre à jour l’objet à l’aide de map() en JavaScript
2. Mettre à jour l’objet à l’aide de findIndex() en JavaScript

Les tableaux sont des objets en JavaScript avec une clé numérique fixe et des valeurs dynamiques qui peuvent contenir n’importe quelle quantité de données dans une seule variable. Un tableau peut être unidimensionnel ou multidimensionnel. Le tableau JavaScript peut stocker des valeurs directement ou stocker des objets JavaScript. Contrairement à d’autres langages, les tableaux JS peuvent contenir différents types de données à différents index du même tableau.

Dans le post d’aujourd’hui, nous allons découvrir comment mettre à jour l’objet d’un tableau en JavaScript.

JavaScript propose deux façons de mettre à jour l’objet, en utilisant map() et findIndex().

Mettre à jour l’objet à l’aide de map() en JavaScript

Cette méthode de tableau intégrée, fournie par JavaScript, parcourt le tableau d’origine et crée le nouveau tableau, complétant les éléments en fonction des conditions spécifiées. Au lieu d’une fonction de flèche, vous pouvez également passer la fonction de rappel. La seule différence entre map() et forEach() est que map() créera le nouveau tableau tandis que forEach() mutera le tableau d’origine.

Syntaxe de map() en JavaScript

Array.prototype.map(element => $updateCondition);
Array.prototype.map($callbackFn);

Paramètre

$updateCondition : ce paramètre obligatoire spécifie quelle action doit être effectuée pour chaque élément.

$callbackFn : c’est un paramètre obligatoire qui spécifie une fonction pour chaque élément d’un tableau qui doit être appelé. Chaque fois que la fonction est appelée, elle renvoie le résultat au nouveau tableau.

Valeur de retour

Renvoie le nouveau tableau dans lequel les éléments sont le résultat de la fonction de rappel.

Exemple de code :

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

const updatedOSArray =
    osArray.map(p => p.id === 1 ? {...p, name: 'Ubuntu'} : p);

console.log('After update: ', updatedOSArray);

Production :

After update:  [
    {id: 0, name: "Windows"},
    {id: 1, name: "Ubuntu"},
    {id: 2, name: "MacOS"}
]

Mettre à jour l’objet à l’aide de findIndex() en JavaScript

Cette méthode de tableau intégrée est fournie par JavaScript, qui trouve l’index des éléments dont la valeur correspond à la condition spécifiée. Au lieu d’une fonction de flèche, vous pouvez également passer la fonction de rappel. Il y a une seule différence entre les deux méthodes, findIndex() et indexOf(). findIndex() est utilisé pour les conditions de correspondance complexes ou les types de données d’objets, tandis que indexOf() est utilisé pour les conditions simples ou les types de données primitifs.

Syntaxe de findIndex() en JavaScript

Array.prototype.findIndex(element => $condition);
Array.prototype.findIndex($callbackFn);

Paramètre

$condition : C’est un paramètre obligatoire. L’utilisateur peut passer n’importe quelle condition liée à l’élément du tableau et trouver le premier élément correspondant qui remplit la condition.

Valeur de retour

Renvoie l’index numérique qui remplit la condition spécifiée. Si aucun élément ne remplit la condition spécifiée, -1 est renvoyé.

Exemple de code :

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

elementIndex = osArray.findIndex((obj => obj.id == 1));
console.log('Before update: ', osArray[elementIndex]);
osArray[elementIndex].name = 'Ubuntu';
console.log('After update: ', osArray[elementIndex]);

Production :

Before update: {id: 1, name: 'Linux'}
After update: {id: 1, name: 'Ubuntu'}