Opération sur les tableaux en Javascript

Opération sur les tableaux en Javascript

  1. Objectifs

    • Etre capable de faire des mise à jour sur les tableaux en JavaScript
  2. 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
  3. 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");



  4. 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)
  5. 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
  6. 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
    • La méthode findIndex() renvoie l’indice du premier élément du tableau qui satisfait une condition donnée par une fonction. Si la fonction renvoie faux pour tous les éléments du tableau, le résultat vaut -1.
    • 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>
        



Abonnez vous à notre chaîne YouTube gratuitement