Remplacer ou ajouter une valeur dans un tableau

JavaScriptJavaScriptBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire, nous allons travailler sur un exercice de programmation JavaScript qui consiste à remplacer ou à ajouter des valeurs dans un tableau en fonction d'une fonction de comparaison. Grâce à cet exercice, vous allez apprendre à utiliser l'opérateur de propagation, Array.prototype.findIndex(), Array.prototype.push() et Array.prototype.splice() pour manipuler les tableaux en JavaScript. Ce laboratoire vous aidera à améliorer vos compétences dans la manipulation des tableaux et des fonctions en JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28595{{"Remplacer ou ajouter une valeur dans un tableau"}} javascript/data_types -.-> lab-28595{{"Remplacer ou ajouter une valeur dans un tableau"}} javascript/arith_ops -.-> lab-28595{{"Remplacer ou ajouter une valeur dans un tableau"}} javascript/comp_ops -.-> lab-28595{{"Remplacer ou ajouter une valeur dans un tableau"}} javascript/cond_stmts -.-> lab-28595{{"Remplacer ou ajouter une valeur dans un tableau"}} javascript/obj_manip -.-> lab-28595{{"Remplacer ou ajouter une valeur dans un tableau"}} javascript/destr_assign -.-> lab-28595{{"Remplacer ou ajouter une valeur dans un tableau"}} javascript/spread_rest -.-> lab-28595{{"Remplacer ou ajouter une valeur dans un tableau"}} end

Comment remplacer ou ajouter une valeur dans un tableau

Pour remplacer un élément dans un tableau ou l'ajouter s'il n'existe pas, suivez ces étapes :

  1. Utilisez l'opérateur de propagation (...) pour créer une copie superficielle du tableau.
  2. Utilisez Array.prototype.findIndex() pour trouver l'index du premier élément qui satisfait la fonction de comparaison fournie compFn.
  3. Si aucun tel élément n'est trouvé, utilisez Array.prototype.push() pour ajouter la nouvelle valeur au tableau.
  4. Sinon, utilisez Array.prototype.splice() pour remplacer la valeur à l'index trouvé par la nouvelle valeur.

Voici un exemple de mise en œuvre de cette fonctionnalité :

const replaceOrAppend = (arr, val, compFn) => {
  const res = [...arr];
  const i = arr.findIndex((v) => compFn(v, val));
  if (i === -1) res.push(val);
  else res.splice(i, 1, val);
  return res;
};

Vous pouvez utiliser cette fonction avec un tableau d'objets comme ceci :

const people = [
  { name: "John", age: 30 },
  { name: "Jane", age: 28 }
];
const jane = { name: "Jane", age: 29 };
const jack = { name: "Jack", age: 28 };
replaceOrAppend(people, jane, (a, b) => a.name === b.name);
// [ { name: 'John', age: 30 }, { name: 'Jane', age: 29 } ]
replaceOrAppend(people, jack, (a, b) => a.name === b.name);
// [
//   { name: 'John', age: 30 },
//   { name: 'Jane', age: 28 },
//   { name: 'Jack', age: 28 }
// ]

Sommaire

Félicitations ! Vous avez terminé le laboratoire Remplacez ou ajoutez une valeur dans un tableau. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.