oujood.com

Objet Array (tableau) JavaScript

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.

chercher |

Objet Array (tableau) JavaScript

JavaScript cours tutorial

L'objet Array (tableau) est utilisé pour stocker plusieurs valeurs dans une seule variable.

Qu’est ce que un array ?

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.

Comment créez Un array

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.

Accédez à Un array

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

Modifiez les valeurs dans Un array

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

Obtenir la longueur d'un tableau

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

  Copier le 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.

Boucle sur les éléments d'un tableau

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>

Trie sur un tableau javascript fonction sort()

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>

Ajout de nouveaux éléments à un tableau

Pour ajouter un nouvel élément à la fin d'un tableau, il suffit d'utiliser la méthode push(), comme ceci :

Code

  Copier le 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

  Copier le 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

  Copier le 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>

Suppression des éléments d'un tableau

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

  Copier le 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

  Copier le 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.

Ajouter ou supprimer des éléments à n'importe quelle position

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

  Copier le 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>

Extraction d'une partie d'un tableau javascript

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

  Copier le 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

  Copier le 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>

javascript Fusionner deux tableaux ou plus

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

  Copier le 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

  Copier le 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>

javascript Recherche dans un tableau

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

  Copier le 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

  Copier le 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.



Par carabde 20 mars 2014



Voir aussi nos tutoriel :

border-bottom-style

Définit le style de la bordure inférieure

Espaces de noms XML

Espaces de noms XML

Dessiner des arcs avec PHP GD

Dessiner des arcs avec PHP GD