JavaScript
Tableaux
Préparé par : Larbi HASSOUNI
Qu'est ce que et comment créer un tableau?
• Qu'est ce qu'un tableau?
• Un tableau est une variable qui peut contenir plusieurs valeurs, et qui permet
d'accéder à ces valeurs en utilisant un indice.
• Comment Créer un tableau?
• Utiliser un tableau literal.
• Syntaxe:
• var array_name = [item1, item2, ...];
• Exemple:
• var t1 = ["a", "b", "c"];
• Utiliser new Array()
• Syntaxe:
• var array_name = new Array(item1, item2, …);
• Exemple:
• var t2 = new Array(1, 2, 3);
Larbi HASSOUNI 2
• Remarques:
• La première syntaxe est plus simple et offre de meilleures
performances lors de l'exécution.
• La syntaxe "new Array" complique le code et peut produire des
résultats inattendus.
• Il est donc recommandé d'utiliser la première syntaxe.
Larbi HASSOUNI 3
Accéder aux éléments d'un tableau
• La synatxe est:
• <nomTableau>[i]
• Exemple:
• var x = t1[0]; (accède au premier élément du tableau; (="a"))
• t1[1] = "d"; (modifie le 2ème élément du tableau)
• Remarque:
• Contrairement aux autres langages tels que C et Java, un tableau JavaScript
peut contenir des éléments de type différent.
• Exemple:
var t1=["a", "b", "c"];
var t3=[10, "abcd", [Link], 12,5, t1]; //Contient des éléments de # types.
Larbi HASSOUNI 4
Les tableaux sont des objets
• Les tableaux sont un type spécial d'objets.
• L'opérateur typeof retourne "object" pour une variable tableau.
• Un tableau a donc des propriétés et méthodes.
• Propriété length:
• La propriété length retourne la longueur du tableau, c’est-à-dire le nombre de ses éléments.
• var t1=["a", "b", "c"];
• [Link] → 3
• Remarque:
• var tab1=[]; //Crée un tableau vide
• var tab2 = new Array(); Crée un tableau vide
• [Link] = [Link] = 0;
• tab1[1]=10; ajoute un élément au tableau
Larbi HASSOUNI 5
Comment déterminer si une variable est un tableau?
• L'opérateur typeof ne peut pas être utiliser pour déterminer si une
variable est de type tableau car il retourne object.
• Utiliser la méthode isArray ou l'opérateur instanceof
• var tab = [10, 20, 30, 40, 50];
• typeof tab; → object
• [Link](tab); → true
• tab instanceof Array; → true
Larbi HASSOUNI 6
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script>
var tab =[10, 20, 30, 40, 50];
[Link]("Longueur du tableau : " + [Link] +"<br>");
[Link]("type du tableau :" + typeof tab + "<br>");
[Link]("tab est il un tableau ? " + [Link](tab) + "<br>");
[Link]("tab est instance de Array ? ");
[Link](tab instanceof Array);
[Link]("tab est instance de Array : " + (tab instanceof Array));
</script>
</body>
</html>
Larbi HASSOUNI 7
Méthodes des tableaux
• La force des tableaux JavaScript réside dans les méthodes qu'ils peuvent exécuter.
• Méthode toString() : Convertir un tableau en une String
• La méthode toString() convertit un tableau en une String formé par la suite de ses éléments
séparés par une virgule.
• Example
• var tab = ["JavaScript", "Python", "Java"];
[Link](); → JavaScript,Python,Java
• Méthode join() : Joindre les éléments d'un tableau pour former une string.
• Join() se comporte comme toString(), mais en plus elle peut specifier le séparateur
• Exemple
• var tab = ["JavaScript", "Python", "Java"];
[Link](" * "); → JavaScript*Python*Java
Larbi HASSOUNI 8
Méthodes des tableaux (suite)
• Méthode push : empiler un ou plusieurs élément dans le tableau.
• La syntaxe est :
• [Link](elt1, elt2, …)
• Exemple:
• var tab = ["JavaScript", "Python", "Java"];
• [Link]("C#", "VB");
• →tab = ["JavaScript", "Python", "Java", "C#", "VB" ];
• Méthode pop : dépiler un élément (=supprimer le dernier élément)
• La syntaxe est :
• [Link]();
• Exemple:
• var tab = ["JavaScript", "Python", "Java"];
• [Link](); →tab = ["JavaScript", "Python"]
Larbi HASSOUNI 9
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<p id="para1"></p>
<p id="para2"></p>
<p id="para3"></p>
<script>
var tab=["JavaScript", "Python", "Java"];
[Link]("C#", "VB");
[Link]("para1").innerHTML = tab;
[Link]();
[Link]("para2").innerHTML = tab;
[Link]("para3").innerHTML = "Nouvelle longueur du tableau :
" + [Link];
</script>
</body>
</html>
Larbi HASSOUNI 10
Méthodes des tableaux (suite)
• Méthode shift : décaler les éléments vers la gauche (=supprimer le 1er élément)
• La syntaxe est :
• [Link]()
• Exemple:
• var tab = ["JavaScript", "Python", "Java"];
• [Link]();
• → tab = ["Python", "Java"];
• Méthode unshift : insére un ou plusieurs éléments au début du tableau et décale
les autres vers la droite.
• La syntaxe est :
• [Link](element1, element2, ….);
• Exemple:
• var tab = ["JavaScript", "Python", "Java"];
• [Link]("C"); →tab = ["C", "JavaScript", "Python", "Java"];
Larbi HASSOUNI 11
Méthodes des tableaux (suite)
• Méthode delete : supprime un élément du tableau et laisse sa position vide
(undefined)
• La syntaxe est :
• delete nomTableau [indiceElement];
• Exemple:
• Var tab = ["JavaScript", "Python", "Java"];
• Delete tab[0];
• →tab = ["Python", "Java"];
• Méthode splice : supprime et insère de nouveaux éléments à une position
donnée.
• La syntaxe est :
• [Link](position, nombreElementASupprimer, element1, element2, ….);
• Exemple:
• var tab = ["JavaScript", "Python", "Java"];
• [Link](1, 0, "C#"); →tab = ["JavaScript", "C#", "Python", "Java"];
Larbi HASSOUNI 12
Méthodes des tableaux (suite)
• Méthode sort : trier un tableau par ordre alphabétique
• La syntaxe est :
• [Link]();
• Exemple1:
• var tab = ["JavaScript", "Python", "Java"];
• [Link]();
• →tab = ["Java", "JavaScript" ,"Python"] les données sont triés par ordre alphabétique
• Exemple2: sort() considère les nombres comme des Strings
• var montant = [100, 20, 5, 15]
• [Link]();
• →montant = [100, 15, 20, 5] les données sont triés par ordre alphabétique
• Méthode reverse : inverse l'ordre des éléments.
• La syntaxe est :
• [Link]();
• Exemple:
• var tab = ["JavaScript", "Python", "Java"];
• [Link](); →tab = ["Java", "Python", "JavaScript"]
Larbi HASSOUNI 13
Méthodes des tableaux (suite)
• Méthode sort : trier un tableau de nombres en utilisant une fonction de
comparaison
• Pour trier un tableau de nombres il faut passer à la méthode sort une fonction de
comparaison comme argument.
• Exemple1: tri par ordre croissant
• var montants = [50, 20, 15, 30]
• [Link](function(a,b){return a-b}); → [15, 20, 30, 50]
• [Link](function(a,b){return a>b}); → produit la même chose
• Exemple2: tri par ordre décroissant
• var montants = [50, 20, 15, 30]
• [Link](function(a,b){return b-a}); → [50, 30, 20, 15]
• [Link](function(a,b){return b>a}); → produit la même chose
• Comment sort utilise la fonction de comparaison : function(a,b) {return a-b}
• Pour trier deux éléments a et b, sort commence par évaluer la fonction pour les arguments a
et b.
en calculant a-b. si le résultat est <0, a est placé avant b, si le résultat est >0, a est placé après
b. si le résultat est nul, l'ordre n'est pas changé.
Larbi HASSOUNI 14
Méthodes des tableaux (suite)
• Méthode concat : fusion des éléments de deux tableaux
• La syntaxe est :
• [Link](nomTableau2);
• Exemple:
• var arbres = ["Olivier", "Pommier", "Amandier"]
• var plantes = ["Brocolli", "Epinard", "Chou"]
• [Link](plantes];
• →["Olivier", "Pommier", "Amandier", "Brocolli", "Epinard", "Chou"]
• Les tableaux arbres et plantes ne sont pas modifiés.
• Méthode slice : extrait une partie du tableau
• La syntaxe est :
• [Link](position1, position2); //Extrait les élément de position1 à position2-1
• Exemple:
• var x = ["a", "b", "c", "d", "e"];
• var y = [Link](1,4); extraire x[1] à x[3], x[4] n'est pas inclus.
• y→["b", "c", "d"] , x n'est pas modifié
• var z = [Link](2); extrait les éléments de x[2] jusqu'à la fin. z → ["c", "d", "e"]; 15
Tableau de tableau comme liste python
for(var indice in tableau)
For(var valeur of tableau)
ECMASCRIPT6
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head> =====for (indice in tableau=====0:10
<body> 1:20
<script> 2:30
var tab =[10, 20, 30, 40, 50]; 3:40
[Link]("=====for (indice in tableau)=====") 4:50
for (indice in tab){ Longueur du tableau : 5
[Link]( indice+":" + tab[indice] +"<br>");
=====for de ES6 : for(element of tableau=====0:10
}
[Link]("Longueur du tableau : " + [Link] +"<br>");
1:20
[Link]("=====for de ES6 : for(element of tableau)=====") 2:30
var indice = 0 3:40
for (element of tab){ 4:50
[Link]( indice+":" + element +"<br>");
indice++;
}
</script>
</body>
</html>
Larbi HASSOUNI 17
