Opération sur les tableaux en Javascript

Objectifs

• Etre capable de faire des mise à jour sur les tableaux en JavaScript

Modification d'un élément

• var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine');

• Pour modifier le texte "Nour" par "Noura" en écrit:

• mon_tableau[0]="Noura";

• Nom du table[indice de l'élément à changer]=le nouveau élément

Ajout d'élément

1. Ajout d'élément au début du tableau

   La méthode unshift () ajoute de nouveaux éléments au début d'un tableau et renvoie la nouvelle longueur.

   • Syntaxe

   • array.unshift(item1, item2, ..., itemX)

   • Pour ajouter un élément au tableau utilisez le mot clé unshift

   • var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine');

   • Ajoutez le nom "Marwen" à votre tableau

   • mon_tableau.unshift("Marwen");

2. Ajout d'élément à la fin du tableau

   La méthode push () ajoute de nouveaux éléments à la fin d'un tableau et renvoie la nouvelle longueur.

   • Syntaxe

   • array.push(item1, item2, ..., itemX)

   • Pour ajouter un élément au tableau utilisez le mot clé push

   • var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine');

   • Ajoutez le nom "Marwen" à la fin de votre tableau

   • mon_tableau.push("Marwen");

Retrait d'élément

1. Supprimer le premier élément d'un tableau

   La méthode shift () supprime le premier élément d'un tableau et renvoie cet élément.

   • Syntaxe

   • array.shift()

   • Pour supprimer le premier élément d'un tableau utilisez le mot clé shift

   • var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine');

   • Supprimez le le dernier élément du tableau en JavaScript

   • mon_tableau.shift();

2. Supprimer le dernier élément d'un tableau en JavaScript

   La méthode pop () supprime le dernier élément d'un tableau et renvoie cet élément.

   • Syntaxe

   • array.pop()

   • Pour supprimer le dernier élément d'un tableau utilisez le mot clé pop

   • var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine');

   • Supprimez le le dernier élément du tableau

   • mon_tableau.pop();

3. Supprimer un élément à partir d'un index

   var mon_tableau = ['Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine'];
   console.log(mon_tableau );
   // ["Nour", "Salah", "Mourad", "Alexendar", "Lamia", "Sabrine"]
   var pos = 2;
   var supprimerElement = mon_tableau.splice(pos,1);
   console.log(mon_tableau);
   // ["Nour", "Salah", "Alexendar", "Lamia", "Sabrine"]

4. Supprimer des éléments à partir d'un index

   
   var mon_tableau = ['Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine'];
   console.log(mon_tableau );
   // ["Nour", "Salah", "Mourad", "Alexendar", "Lamia", "Sabrine"]
   var pos = 1, n = 2;
   var supprimerElement = mon_tableau.splice(pos, n);
   // n définit le nombre d'éléments à supprimer,
   // à partir de la position pos
   
   console.log(mon_tableau);
   // ["Nour", "Alexendar", "Lamia", "Sabrine"] (le tableau d'origine est changé)
   
   console.log(supprimerElement);
   // ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)

L'accès à une cellule d'un tableau JavaScript

• On accède à l'une des valeurs d'un tableau en mentionnant le nom du tableau suivi du numéro de la cellule entre crochets, en numérotant les cellules à partir de 0

Rechercher un élément dans le tableau JavaScript

• Souvent, on a besoin d’un ou plusieurs éléments de notre tableau qui remplissent une condition.
• Une première approche est d’utiliser la méthode findIndex() qui permet de remonter l’indice du premier élément de notre tableau qui rempli une condition.

La méthode findIndex () renvoie l'index du premier élément d'un tableau qui passe un test (fourni en tant que fonction).

• Exemple

  function findC(element) {
    return element === 'C';
  }
  let tableau = ['A', 'B', 'C', 'D', 'C'];
  tableau.findIndex(findC);
  // Retourne 2, l'indice de notre premier C

Activité

• Soit le tableau suivant: var ages = [3, 10, 18, 20, 12];
• Utilisez la méthode findIndex () pour obtenir l'index du premier élément du tableau qui a une valeur de 18 ou plus
• Cliquez sur un bouton pour afficher l'index du premier élément du tableau qui a une valeur de 18 ou plus.

Solution

<!DOCTYPE html>
<html>
<body>

<p>Cliquez sur le bouton pour vérifier obtenir l'index 
	du premier élément du tableau qui a une valeur de 18 ou plus.</p>

<button onclick="myFunction()">Essayer</button>

<p id="demo"></p>

<p><strong>Remarque:</strong> La méthode findIndex () n'est pas prise en 
	charge dans IE 11 (et les versions antérieures).</p>
<script>
var ages = [3, 10, 18, 20, 12];

function rechercher(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(rechercher);
}
</script>

</body>
</html>