Base de données MySQL la clause where
L'objet Array (tableau) est utilisé pour stocker plusieurs valeurs dans une seule variable
Les tableaux sont des variables complexes qui nous permettent de stocker plus d'une valeur ou un groupe de valeurs sous un seul nom de variable. Les tableaux JavaScript peuvent stocker toute valeur valide, y compris des chaînes de caractères, des nombres, des objets, des fonctions et même d'autres tableaux, ce qui permet de créer des structures de données plus complexes telles qu'un tableau d'objets ou un tableau de tableaux.
L'objet Array (tableau) est utilisé pour stocker plusieurs valeurs dans une seule variable.
Un array est une variable spéciale, qui peut tenir plus d'une valeur, à la fois.
Si vous avez une liste d’articles (une liste de noms, par exemple), le stockage des noms dans des variables simples pourrait ressembler à ceci :
Var nom1= " Philipe " ;
Var nom2= " Justin " ;
Var nom3= " Luis " ;
Cependant, si vous voulez faire une boucle sur des variables nom et trouver un spécifique ?
Et si vous n'aviez pas que 3 noms, mais 300 ? ou 3000 ? ou même plus ?!!!
La meilleure solution ici est d'employer un array !
Un array permet de créer des tableaux et de travailler avec eux.
Un array peut tenir toutes vos valeurs de variables sous un seul nom simple. Et vous pouvez accéder aux valeurs en se rapportant au nom de l'array.
Chaque élément dans l'array a sa propre identification de sorte qu'on puisse facilement y accéder.
Un array peut être définie de trois manières.
Le code suivant crée un objet array appelé mesNom :
1 : On peut créer Un array de la manière suivante :
var mesNom=new Array();
/* array (ajouter un entier optionnel
argument pour contrôler la taille du tableau )*/
mesNom[0]="Philipe";
mesNom[1]="Justin";
mesNom[2]="Luis";
2 : Ou de celle la :
var mesNom=new Array("Philipe","Justin","Luis")
3 :Ou encor comme ceci :
var mesNom=["Philipe","Justin","Luis"]
Note : Si vous spécifiez des nombres ou les rectifiez/valeurs faux à l'intérieur de la array alors que le type variable sera nombre ou booléen, au lieu de la corde.
Vous pouvez se référer à un élément particulier dans Un array en se rapportant au nom de l'array et de l'index. Les d'index débutent par 0.
La ligne de code suivante :
document.write (mesNom [0]) ;
Aura comme conséquence le résultat suivant : Philipe
Pour modifier une valeur dans Un array existant, ajoutez juste une nouvelle valeur à l'array avec un index spécifique :
mesNom [0] = " Piere " ;
Maintenant, la ligne de code suivante :
document.write (mesNom [0]) ;
Aura comme conséquence le résultat suivant : Piere
La propriété length renvoie la longueur d'un tableau, c'est-à-dire le nombre total d'éléments contenus dans le tableau. La longueur d'un tableau est toujours supérieure à l'index de l'un de ses éléments quelque soit l’index.
Exemple :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript longueur d'un tableau</title>
</head>
<body>
<script>
var fruits = [" Banane ", " Pomme ", " Mangue ", " Orange ", " Papaye "] ;
document.write(fruits.length);
</script>
</body>
</html>
</body>
</html>
Exemples de l’utilisation des tableaux (array ) de javascript
Voici quelques exemples pour manipuler l’objet array.
Vous pouvez utiliser la boucle for pour accéder à chaque élément d'un tableau dans un ordre séquentiel, comme ceci :
Exemple comment créer Un array (tableau) et afficher ses éléments en javascript
Exemple : Copier le code
<html>
<body>
<script>
// créer le tableau array
var mesNom = new Array();
mesNom[0]="Philipe";
mesNom[1]="Justin";
mesNom[2]="Luis";
//affichage des éléments
for (i=0;i<mesNom.length;i++)
{
document.write(mesNom[i] + "<br>");
}
</script>
</body>
</html>
Exemple comment ranger par ordre les élèment d’Un array
Exemple : Copier le code
<html> <body> <script> var mesNom=["Philipe","Justin","Paule","Luis"]; document.write(mesNom.sort()); </script> </body> </html>
Exemple créer un tableau (array) de nombres et afficher les éléments par ordre croissant
Exemple : Copier le code
<html>
<body>
<script>
function ordreCroissant(a, b)
{
return a - b;
}
var nombres = [11, 2, 40, 85, 101, 6];
var somme = nombres[0]+ nombres[1] ;
document.write(" la somme du deux premiers éléments est : "+somme+"
<br>" ) ;
document.write(nombres.sort(ordreCroissant));
</script>
</body>
</html>
Pour créer un tableau de nombre on n’a pas besoin de guillemets ; si on les met les nombre seront considérés comme du texte voir l’exemple suivant
Exemple nombres considérés comme du texte
Exemple : Copier le code
<html>
<body>
<script>
function ordreCroissant(a, b)
{
return a - b;
}
var nombres = ["11", "2", "40", "85", "101", "6"];
somme=nombres[0]+nombres[1];
/*ici la somme n'est pas une somme mathématique,
c'est une concatination*/
document.write("la somme du deux premiers élèments est : "+somme+"<br>");
document.write(nombres.sort(ordreCroissant));
</script>
</body>
</html>
Exemple créer un tableau (array) de nombres et afficher les éléments par ordre décroissant
Exemple : Copier le code
<html>
<body>
<script>
function ordreDecroissant(a, b)
{
return b - a;
}
var nombres = [11, 2, 40, 85, 101, 6];
var somme = nombres[0]+ nombres[1] ;
document.write(" la somme du deux premiers éléments est : "+somme+"<br />" ) ;
document.write(nombres.sort(ordreDecroissant));
</script>
</body>
</html>
Pour ajouter un nouvel élément à la fin d'un tableau, il suffit d'utiliser la méthode push(), comme ceci :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Ajouter un nouvel élément à la fin d'un Array</title>
</head>
<body>
<script>
var couleurs = ["Rouge", "Vert", "Bleu"] ;
couleurs.push("Jaune") ;
document.write(couleurs + "<br>");
/* affiche: Rouge,Vert,Bleu,Jaune*/
document.write(couleurs.length); // affiche: 4
</script>
</body>
</html>
De même, pour ajouter un nouvel élément au début d'un tableau, utilisez la méthode unshift(), comme ceci :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Ajouter un nouvel élément au début d'un Array</title>
</head>
<body>
<script>
var couleurs = ["Rouge", "Vert", "Bleu"] ;
couleurs.unshift("Jaune", "Gris") ;
document.write(couleurs + "<br>");
document.write(couleurs.length);
</script>
</body>
</html>
Vous pouvez également ajouter plusieurs éléments à la fois en utilisant les méthodes push() et unshift(), comme ceci
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Ajouter un nouvel élément au début
et à la fin d'un Array</title>
</head>
<body>
<script>
var couleurs = ["Rouge", "Vert", "Bleu"] ;
couleurs.unshift("Jaune", "Gris") ;
couleurs.push("Rose", "Voilet") ;
document.write(couleurs + "<br>");
document.write(couleurs.length);
</script>
</body>
</html>
Pour retirer le dernier élément d'un tableau, vous pouvez utiliser la méthode pop(). Cette méthode renvoie la valeur qui a été suprimée. Voici un exemple :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Supprimer le dernier élément d'un tableau (Array)</title>
</head>
<body>
<script>
var couleurs = ["Rouge", "Vert", "Bleu"] ;
var last = couleurs.pop() ;
document.write(last + "<br>");
document.write(couleurs + "<br>");
document.write(couleurs.length);
</script>
</body>
</html>
De même, vous pouvez retirer le premier élément d'un tableau à l'aide de la méthode shift(). Cette méthode renvoie également la valeur qui a été suprimée. Voici un exemple :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Supprimer le premier élément d'un tableau
(Array)</title>
</head>
<body>
<script>
var couleurs = ["Rouge", "Vert", "Bleu"] ;
var first = couleurs.shift();
document.write(first + "<br>");
document.write(couleurs + "<br>");
document.write(couleurs.length);
</script>
</body>
</html>
REmarque : Les méthodes push() et pop() fonctionnent plus rapidement que les méthodes unshift() et shift(). Parce que les méthodes push() et pop() ajoutent et suppriment simplement des éléments à la fin d'un tableau, les éléments ne bougent donc pas, alors que les méthodes unshift() et shift() ajoutent et suppriment des éléments au début du tableau, ce qui nécessite de réindexer l'ensemble du tableau.
La méthode splice() est une méthode de tableau très polyvalente qui vous permet d'ajouter ou de supprimer des éléments à partir de n'importe quel index, en utilisant la syntaxe :
arr.splice(startIndex, deleteCount, elem1, ..., elemN).
Cette méthode prend trois paramètres : le premier paramètre est l'index auquel il faut commencer à épisser le tableau, il est obligatoire ; le deuxième paramètre est le nombre d'éléments à supprimer (utilisez 0 si vous ne voulez supprimer aucun élément), il est facultatif ; et le troisième paramètre est un ensemble d'éléments de remplacement, il est également facultatif. L'exemple suivant montre comment cela fonctionne :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Ajouter ou supprimer des éléments à n'importe
quel index d'un tableau (Array)</title>
</head>
<body>
<script>
var couleurs = ["Rouge", "Vert", "Bleu"] ;
var removed = couleurs.splice(0,1) ; // Supprime le premier élément
document.write( couleurs + "<br>") ; // Affiche : Vert,Bleu
document.write(removed + "<br>");
/* affiche: Rouge (élément suprimé)*/
document.write(removed.length + "<br>");
/* affiche: 1*/
removed = couleurs.splice(1, 0, " Rose ", " Jaune ") ;
/*Insère deux éléments à la position un*/
document.write(couleurs + "<br>");
/* affiche: Vert,Rose,Jaune,Bleu*/
document.write(removed + "<br>");
// Empty array
document.write(removed.length + "<br>");
// affiche: 0
removed = couleurs.splice(1, 1, " Mauve ", " Voilet ") ;
// Insère deux valeurs, et supprime une.
document.write(couleurs + "<br>");
//affiche: Vert, Mauve, Voilet, Jaune, Bleu
document.write(removed + "<br>");
// affiche: rose (tableau d'un élément)
document.write(removed.length); // affiche: 1
</script>
</body>
</html>
Si vous voulez extraire une partie d'un tableau (c'est-à-dire un sous tableau) tout en gardant le tableau original intact, vous pouvez utiliser la méthode slice(). Cette méthode prend 2 paramètres : l'index de départ (index auquel on commence l'extraction), et un index de fin facultatif (index avant lequel on termine l'extraction), comme arr.slice(indexDepert, indexFin). Voici un exemple :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Extraire une partie d'un tableau</title>
</head>
<body>
<script>
var fruits = ["Pomme", "Banane", "Mangue", "Orange", "Papaye"];
var str = fruits.slice(1, 3);
document.write(str); // Affiche : Banane, Mangue
</script>
</body>
</html>
Si le paramètre indexFin est omis, tous les éléments jusqu'à la fin du tableau sont extraits. Vous pouvez également spécifier des index ou des décalages négatifs - dans ce cas, la méthode slice() extrait les éléments de la fin d'un tableau, plutôt que du début. Par exemple :
>Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Extraire une partie d'un tableau</title>
</head>
<body>
<script>
var fruits = ["Pomme", "Banane", "Mangue", "Orange", "Papaye"];
document.write(fruits.slice(2) + "<br>");
// Affiche: Mangue,Orange,Papaye
document.write(fruits.slice(-2) + "<br>");
// Affiche: Orange,Papaye
document.write(fruits.slice(2, -1));
// Affiche: Mangue,Orange
</script>
</body>
</html>
La méthode concat() peut être utilisée pour fusionner ou combiner deux tableaux ou plus. Cette méthode ne modifie pas les tableaux existants, elle renvoie un nouveau tableau. Par exemple :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Fusionner deux tableaux</title>
</head>
<body>
<script>
var domestiques = ["Chat", "Chien", "Perroquet"] ;
var sauvages = ["Tigre", "Loup", "Zèbre"] ;
/* Création d'un nouveau tableau animaux en combinant les tableaux domestiques et sauvages*/
var animaux = domestiques.concat(sauvages) ;
document.write( animaux) ;
/* Affiche : Chat,Chien,Perroquet,Tigre,Loup,Zèbre*/
</script>
</body>
</html>
La méthode concat() peut prendre un nombre quelconque d'arguments de tableau, de sorte que vous pouvez créer un tableau à partir d'un nombre quelconque d'autres tableaux, comme le montre l'exemple suivant :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Fusionner plusieurs tableaux</title>
</head>
<body>
<script>
var domestiques = [" Chat ", " Chien ", " Perroquet "] ;
var sauvages = ["Tigre", "Loup", "Zèbre"] ;
var insectes = ["Fourmi", "Abeille"] ;
/* Création d'un nouveau tableau en combinant les tableaux domestiques, sauvages et insectes*/
var animaux = domestiques.concat( sauvages, insectes) ;
document.write( animaux) ;
/* Affiche : Chat,Chien,Perroquet,Tigre,Loup,Zèbre,Fourmi,Abeille*/
</script>
</body>
</html>
Si vous souhaitez rechercher une valeur spécifique dans un tableau, vous pouvez simplement utiliser les méthodes indexOf() et lastIndexOf(). Si la valeur est trouvée, les deux méthodes renvoient un index représentant l'élément du tableau. Si la valeur n'est pas trouvée, la valeur -1 est renvoyée. La méthode indexOf() renvoie le premier élément trouvé, tandis que la méthode lastIndexOf() renvoie le dernier élément trouvé.
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Recherche d'une valeur
spécifique dans un tableau</title>.
</head>
<body>
<script>
var fruits = [" Pommes ", " Bananes ",
" Mangues ", " Oranges ", " Papayes "] ;
document.write(fruits.indexOf(" Pommes ") + "<br>") ;
/* affiche : 0 qui est l'index de l'élément trouvé*/
document.write(fruits.indexOf(" Bananes ") + "<br>") ;
/* Affiche : 1 qui est l'index de l'élément trouvé*/
document.write(fruits.indexOf(" Ananas ")) ;
/* Affiche : -1 aucun élément trouvé*/
</script>
</body>
</html>
Les deux méthodes acceptent également un paramètre entier facultatif, index, qui spécifie l'indice du tableau à partir duquel la recherche doit commencer. Voici un exemple :
Code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Recherche dans un Tableau d'une valeur spécifique à partir d'un certain index</title>.
</head>
<body>
<script>
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7] ;
// Rechercher vers l'avant, en commençant à partir de- de l'index.
document.write(arr.indexOf(1, 2) + "<br>"); // Affiche : 3
// Rechercher en arrière, en commençant à partir de l'index 5
document.write(arr.lastIndexOf(false, 5)); // Affiche: 4
</script>
</body>
</html>
Voilà nous avons fait le tour des principales méthodes de l'objet array en javascriptes.
|
Cours precedent: |
Sommaire : |
Cours suivant: |