array

Les tableaux (array)

Un tableau est une "collection" d'objets indexés.

Premier exemple.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Un premier tableau </title>
    </head>
    <body>
    
         
    
        <script>
         
        // déclaration d'une variable nommée tableau
        // et affectation d'un tableau vide à cette variable :
        let tableau = []; 
        
        for(let i = 1; i <= 5; i++)  {
        	// on ajoute i*i à la fin du tableau :
        	tableau.push( i * i );
        }
        
        document.write(`Contenu du tableau : ${tableau} <br> <hr>`);
         
        document.write(`Élément d'indice 0 du tableau : ${tableau[0]}. <br>`);
         
        document.write(`Elément d'indice 1 du tableau : ${tableau[1]}. <br>`);
        
        document.write(`Dernier élément du tableau : ${tableau[tableau.length-1]}.`);
        
        </script>
    </body>
</html>

Un exemple plus complexe.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Un premier tableau </title>
    </head>
    <body>
    
         
         
    
        <script>
        // on définit une fonction carré :  
        // ( par exemple carre(3) vaudra 9 )
        const carre = function(x) { return x*x; };
        
        // on définit un tableau et on y place quelques 
        // éléments de diverses natures (number, string, function) :  
        let t = [ 2, 10, 'ICN', 'Html', carre(8), carre ];
        
        document.write(`Contenu du tableau :  ${t} <br>`);
         
        document.write(`Premier élément du tableau : ${t[0]}. <br> `);
         
        document.write(`Dernier élément du tableau : ${t[t.length-1]}. <br>`);
        
        </script>
    </body>
</html>

On retiendra que le premier élément est d'indice 0.

Modifier les éléments d'un array.

Modifier la valeur d'un élément d'indice connu.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Modification d'un élément </title>
    </head>
    <body>
    
         
    
        <script>
        
        /* on définit un tableau   : */
        let t = ['ba', 'be', 'bi', 'bo', 'bu'];
        
        
        /* on affiche le contenu dans la page html : */
        document.write("Contenu du tableau : ");
        document.write(t);
        document.write('<br>');
        
        document.write("Troisième élément, c'est à dire élément d'indice 2 : ");
        document.write(t[2]);
        document.write('<br>');
        
        /*  on modifie l'élément d'indice 2 (c'est à dire le troisième élément) : */
        t[2] = 'bou';
        document.write("Troisième élément, c'est à dire élément d'indice 2, après modification : ");
        document.write(t[2]);
          
        </script>
    </body>
</html>

Effacer un élément d'indice connu.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Suppression d'un élément </title>
    </head>
    <body>
    
         
    
        <script>
        
        /* on définit un tableau   : */
        let t = ['ba', 'be', 'bi', 'bo', 'bu'];
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu initial du tableau : ");
        document.write(t);
        document.write('<br>');
        
        
        /*  on supprime l'élément d'indice 2 (c'est à dire le troisième élément) : */
        t.splice(2,1);// 2 est l'indice du premier élément à supprimer
                      // 1 est le nombre d'éléments à supprimer à partir de l'indice indiqué
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu du tableau après suppression de l'élément d'indice 2 : ");
        document.write(t);
        document.write('<br>');
        
        /* on affiche le nouvel élément d'indice 2 : */
        document.write(" Nouvel élément d'indice 2 : ");
        document.write(t[2]);
        document.write('<br>');
         
         
        /*on redéfinit le tableau t : */
        t = [ 'a', 'e', 'i', 'o', 'u' , 'y'];
        document.write(" Contenu  du tableau après redéfinition complète : ");
        document.write(t);
        document.write('<br>');
        
        /* on supprime les éléments d'indices   2, 3, 4 :*/
        t.splice(2,3); // suppression de 3 éléments d'indices consécutifs
                       // le premier de ses éléments a pour indice 2.
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu du tableau après suppression des  éléments d'indices 2, 3, 4 : ");
        document.write(t);
        
        </script>
    </body>
</html>

Supprimer le premier ou le dernier élément d'un array.

Des méthodes spéciales permettent de retirer facilement le premier élément ou le dernier élément d'un tableau. Illustration ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Suppression d'un élément </title>
    </head>
    <body>
    
        
    
        <script>
        
        /* on définit un tableau   : */
        let t = ['ba', 'be', 'bi', 'bo', 'bu'];
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu initial du tableau : ");
        document.write(t);
        document.write('<br>');
        
        
        /*  on supprime le premier élément  : */
        t.shift(); 
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu  du tableau après suppression du premier élément : ");
        document.write(t);
        document.write('<br>');
        
         
        /*on redéfinit le tableau t : */
        t = [ 'a', 'e', 'i', 'o', 'u' , 'y'];
         /* on affiche le contenu dans la page html : */
        document.write(" Contenu  du tableau après redéfinition : ");
        document.write(t);
        document.write('<br>');
        
        /* on supprime le dernier élément :*/
        let dernier  = t.pop();
         /* on affiche le contenu dans la page html : */
        document.write(" Contenu  du tableau après suppression du dernier élément : ");
        document.write(t);
        document.write('<br>');
        document.write(" Ce dernier élément était : ");
        document.write(dernier);
        </script>
    </body>
</html>

Récupérer l'indice d'un élément.

Si on l'on veut connaître l'indice d'un élément présent dans la liste L, on peut utiliser indexOf :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Indice d'un élément </title>
    </head>
    <body>
     
    
        <script>
        
        /* on définit un tableau   : */
        let t = ['ba', 'be', 'bi', 'bo', 'bu'];
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu initial du tableau : ");
        document.write(t);
        document.write('<br>');
        
        
        /*  on cherche l'indide de l'élément 'bo' : */
        let indiceDeBo =  t.indexOf('bo'); 
        /* on affiche le résultat : */
        document.write(" Indice de 'bo' : ");
        document.write(indiceDeBo);
        document.write('<br>');
        
         
         
        /*on redéfinit le tableau t : */
        t = [ 'a', 'e', 'i', 'o', 'u' , 'y', 'a', 'u', 'i', 'a', 'i'];
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu   du tableau après redéfinition : ");
        document.write(t);
        document.write('<br>');
        
        /* on demande l'indice de la première occurrence de 'a' :*/
        let premierIndice = t.indexOf('a');
        
        /* on demande l'indice de la première occurrence de 'a' se trouvant après l'indice 2 :*/
        let indiceApres2 = t.indexOf('a', 2);
        
        /* on demande l'indice de la dernière occurrence de 'a' : */
        let dernierIndice = t.lastIndexOf('a');
        
        /* on affiche les résultats dans la page html : */
        document.write(premierIndice + '<br>');
        document.write(indiceApres2 + '<br>');
        document.write(dernierIndice + '<br>');
        
        
        </script>
    </body>
</html>

On retiendra que si l'élément a plusieurs occurrences dans le tableau L, L.indexOf() renverra l'indice de la première occurrence.

Ajouter un élément à un array

push()

On a déjà vu plus haut un exemple montrant que la méthode push() permet d'ajouter un élément en fin de tableau.

unshift()

Avec unshift(), on peut ajouter un élément en début de tableau.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Ajout d'un élément </title>
    </head>
    <body>
    
         
    
        <script>
        
        /* on définit un tableau   : */
        let t = ['ba', 'be', 'bi', 'bo', 'bu'];
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu initial du tableau : ");
        document.write(t);
        document.write('<br>');
        
        
        
        /*  on ajoute un élément à la fin  : */
        t.push('bou'); 
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu du tableau  après ajout d'un élément en queue : ");
        document.write(t);
        document.write('<br>');
        
         
         /*  on ajoute un élément au début  : */
        t.unshift('bah'); 
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu   du tableau après ajout d'un élément en tête : ");
        document.write(t);
         
        </script>
    </body>
</html>

Concaténation.

On peut ajouter les éléments d'un array à un autre :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Ajout des éléments d'un autre array </title>
    </head>
    <body>
    
       
         
    
        <script>
        
        /* on définit un tableau   : */
        let A = ['ba', 'be', 'bi', 'bo', 'bu'];
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu initial du tableau A : ");
        document.write(A);
        document.write('<br>');
        
         /* on définit un tableau   : */
        let B = ['grou', 'grrrr'];
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu initial du tableau B : ");
        document.write(B);
        document.write('<br>');
        
        /* on concatène les deux précédents   : */
        let C = A.concat(B);
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu   du tableau C : ");
        document.write(C);
        </script>
    </body>
</html>

Copier un tableau.

Si A désigne un tableau, il est important de comprendre qu'une instruction d'affectation B = A ne créera pas un nouveau tableau, mais simplement un nouveau nom pour le même tableau A.
Éclaircissons cela par quelques manipulations :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Copie d'un array </title>
    </head>
    <body>
     
    
        <script>
        
        /* on définit un tableau   : */
        let A = ['ba', 'be', 'bi', 'bo', 'bu'];
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu initial du tableau A : ");
        document.write(A);
        document.write('<br>');
        
        let B = A;
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu   du tableau B : ");
        document.write(B);
        document.write('<br>');
        
         /*  modification sur B  : */
        B[1] = 'valeur modifiée';
        /* on affiche les contenus dans la page html : */
        document.write(" Contenu   du tableau B : ");
        document.write(B);
        document.write('<br>');
        document.write(" Contenu  du tableau A : ");
        document.write(A);
        document.write('<br>');
        </script>
    </body>
</html>

On constate qu'une modification du tableau B modifie aussi le tableau A (et vice-versa) : il s'agit en fait du même tableau (même emplacement dans la mémoire) et de deux noms différents pour ce tableau.

Dans ces conditions, comment procéder si l'on veut vraiment travailler sur une copie de A sans modifier A ?
Une solution ci-dessous :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Copie d'un array </title>
    </head>
    <body>
    
         
    
        <script>
        
        /* on définit un tableau   : */
        let A = ['ba', 'be', 'bi', 'bo', 'bu'];
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu initial du tableau A : ");
        document.write(A);
        document.write('<br>');
        
        
        // copie des éléments de A à partir de l'élément d'indice 0 :
        let B = A.slice(0);
        /* on affiche le contenu dans la page html : */
        document.write(" Contenu   du tableau B : ");
        document.write(B);
        document.write('<br>');
        
        
         /*  modification sur B  : */
        B[1] = 'valeur modifiée';
        /* on affiche les contenus dans la page html : */
        document.write(" Contenu   du tableau B : ");
        document.write(B);
        document.write('<br>');document.write(" Contenu   du tableau A : ");
        document.write(A);
        document.write('<br>');
        </script>
    </body>
</html>

Cette fois, on a bien créé un second tableau. Au départ, ce second tableau a le même contenu que le premier. Mais le tableau B n'est pas le tableau A, seul le contenu est identique. Une modification de l'un des deux tableaux n'entraîne donc pas de modification de l'autre.

slice() peut admettre un second paramètre. Voir les détails ici.

Parcourir les éléments d'un tableau.

Avec les indices

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> parcourir </title>
    </head>
    <body>
        <script>
         let A = ['ba', 'be', 'bi', 'bo', 'bu'];
         for(let i = 0; i < A.length; i++) {
			 document.write(`Élément d'indice ${i} : ${A[i]}.<br>`);
		 }
        </script>
    </body>
</html>

Sans les indices

Lorsque les valeurs des indices n'ont pas à être connus dans le traitement que l'on cherche à effectuer, on utilisera la structure suivante :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> parcourir </title>
    </head>
    <body>
        <script>
         let A = ['ba', 'be', 'bi', 'bo', 'bu'];
         for(let valeur of A){
			 document.write(valeur + ".<br>");
		 }
        </script>
    </body>
</html>

Transformer une chaîne de caractères en tableau.

Pour diverses raisons (par exemple accéder plus facilement aux mots d'une phrase), on peut vouloir transformer facilement une chaîne de caractères en un tableau.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> string to array </title>
    </head>
    <body>
     
    
        <script>
        let  ch = "html css javascript svg";// chaîne de caractères
        let tab = ch.split(' ');// création d'une liste, le blanc marque le passage à un nouvel élément
        document.write("Éléments du tableau créé avec le blanc comme séparateur d'éléments : " );  
        document.write(tab);
        document.write('<br>');
        document.write("Longueur du tableau tab : " + tab.length);
        document.write('<br>');
        document.write('<hr>');
        
        
        let tab2 = ch.split('s');// la lettre s marque le passage à un nouvel élément
        document.write("Éléments du tableau créé avec le caractère 's' comme séparateur d'éléments : ");  
        document.write(tab2);
        document.write('<br>');
        document.write("Longueur du tableau tab2 : " + tab2.length);
        </script>
    </body>
</html>

Transformer un tableau en chaîne de caractères.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>   array to string </title>
    </head>
    <body>
     
    
        <script>
		// un tableau
		let tableau = [ 1, "éléphant", 2, "éléphants" ];
		
		let ch = tableau.join();
        document.write(ch);
        document.write('<br>');
        document.write(typeof ch);
        document.write('<br>');
        document.write('<hr>');
          
          
        document.write(tableau.join("-"));
        document.write('<br>');
        document.write(tableau.join("X"));
        </script>
    </body>
</html>