Array - Cours Javascript

Les variables de type Array

Intro

Dans ce cours javascript, nous allons étudier les variables javascript de type Array.

A chaque élément du tableau peut s'appliquer toutes les propriétés que l'on a vu.

Exemple :
Exemple de code :
var m=[true,2,5,"d","2 m","c"];
alert(Number(m[0]));
//ou
alert(parseInt(m[4]));

Longueur d'un tableau

Définition Array.length

Il est possibles de connaître le nombre d'éléments qui compose le tableau. en utilisant la méthode javascript length de l'objet Array.
Pour information, le premier élément d'un tableau est en position 0;

Exemple :
Exemple de code :
var dmc = [true,2,5,"d","m","c",];
alert(dmc.length);

Le résultat est 7 ... ? , après le C, vous avez une virgule, il considère qu'il y a un autre élément qui est indéfini mais qui existe (qui a pour valeur "undefined")

Parcourir le tableau

Définition

Comment parcourir un tableau en testant les valeurs.
Voici notre tableau.
Exemple de code :
var dmc = [true,2,5,"d","m","c"];
Imaginons que l'on veut récupérer tous les "m".
Nous allons faire une boucle pour parcourir le tableau.
Exemple de code :
for (i=0;i<dmc.length;i++)
{ }
Nous allons ensuite introduire la condition.
Exemple de code :
for (var i=0; i<dmc.length; i++){
  if (dmc[i]=="m") {
    alert("il y a un \"m\" à dmc["+i+"].");
  }
}

Autre méthode :
Exemple de code :
var i = 0;
while (i<dmc.length){
  if (dmc[i]=="m") {
    alert("il y a un \"m\" à dmc["+i+"].");
  }
  i++;
}

Transformer en String

Définition Array.join()

Vous pouvez récupérer les valeurs d'un tableau sous la forme d'une String en utilisant la méthode javascript join(separateur) de l'objet Array.
Exemple de code :
nom_de_la_variable.join("|")

La méthode javascript join(separateur) accepte comme argument :
- séparateur, valeur de type String, si l'argument est omis ce la revient à mettre ",".

Exemple :
Exemple de code :
var dmc = [true,2,5,"d","2 m","c"];
  alert(dmc.join("|"));
//true|2|5|d|2 m|c

Attention, si votre tableau comporte des valeurs autres que String, Number, Boolean, elles ne seront pas converties en string.
Exemple :
Exemple de code :
var dmc = [true,{dmc:"alias"},5,"d","2 m","c"];
  alert(dmc.join("|"));
//true|[object Object]|5|d|2 m|c

Rassembler plusieurs tableaux

Définition Array.concat()

Vous pouvez "additionner" à un tableau d'autres tableaux en utilisant la méthode javascript concat(lestableaux) de l'objet Array.

La méthode javscript concat(lestableaux) accepte comme argument :
- un ou une liste de tableau séparé par une ",", attention à l'ordre.

Exemple :
Exemple de code :
var dmc = [1,2];
var dmc1 = [3,4];
var dmc2 = [5,6];
  alert(dmc.concat(dmc1,dmc2));
//1,2,3,4,5,6
  alert(dmc.concat(dmc2,dmc1));
//1,2,5,6,3,4

Supprimer le dernier élément

Définition Array.pop()

Vous pouvez enlever à un tableau son dernier élément en utilisant la méthode javascript pop() de l'objet Array.

La méthode javascript pop() renvoie comme valeur de type :
- Array, qui correspond à la valeur du dernier élément retiré.

Exemple :
Exemple de code :
var dmc = [1,2];
  alert(dmc.pop());
//2
  alert(dmc);
//1,2

Supprimer le premier élément

Définition Array.shift()

Vous pouvez enlever à un tableau son premier élément en utilisant la méthode javascript shift() de l'objet Array.

La méthode javascript shift() renvoie comme valeur de type :
- Array, qui correspond à la valeur du dernier élément retiré.

Exemple :
Exemple de code :
var dmc = [1,2];
  alert(dmc.shift());
//1
  alert(dmc);
//2

Récupérer plusieurs éléments

Définition Array.slice()

Vous pouvez récupérer plusieurs valeurs qui se suivent d'un tableau en utilisant la méthode javascript slice(debut, quantite) de l'objet Array.

La méthode javascript slice(debut, quantite) accepte comme arguments :
- debut, position du début de la séléction,
- quantite, nombre d'éléments à prendre après la selection.
Si cette valeur est omise alors tous les éléments à partir de debut sont séléctionnés.
Si quantite est negatif le décompte se fait par rapport au dernier élément et non par rapport à debut.
Si quantite = debut aucune valeur n'est extraite.

La méthode javascript slice() renvoie une valeur de type Array qui correspond aux valeurs extraites.

Exemple :
Exemple de code :
var dmc = [1,2,3,4,5];
  alert(dmc.slice(1,3));
//2,3
  alert(dmc.slice(1,-4));
//2
  alert(dmc);
//1,2,3,4,5

Insérer des valeurs à la fin

Définition push()

Vous pouvez inverser une ou des valeurs à la fin d'un tableau en utilisant la méthode javascript push(listevaleur) de l'objet Array.

La méthode javscript push(listevaleur) accepte comme argument :
- un ou une liste de valeurs séparé par une ",", attention à l'ordre.
La méthode javascript push() renvoie comme valeur la nouvelle longueur du tableau.

Exemple :
Exemple de code :
var dmc = [1,2,3];
var dmc = [1,2,3];
  alert(dmc.push(4,5));
//5
  alert(dmc);
//1,2,3,4,5
var dmc = [1,2,3];
  alert(dmc.push(5,4));
//5
  alert(dmc);
//1,2,3,5,4

Insérer des valeurs au début

Définition Array.unshift()

Vous pouvez inverser une ou des valeurs au début d'un tableau en utilisant la méthode javascript unshift(listevaleur) de l'objet Array.

La méthode javscript unshift(listevaleur) accepte comme argument :
- un ou une liste de valeurs séparé par une ",", attention à l'ordre.
La méthode javascript unshift() renvoie la nouvelle longueur du tableau.

Exemple :
Exemple de code :
var dmc = [1,2,3];
  alert(dmc.unshift(4,5));
//5
  alert(dmc.unshift(5,4));
//1,2,3,5,4

Ajouter/Suprimer/Modifier

Définition Array.splice()

Vous pouvez ajouter, modifier ou supprimer une ou des valeurs à l'endroit ou vous voulez dans un tableau en utilisant la méthode javascript splice(debut,quantite,listevaleur) de l'objet Array.

La méthode javscript splice(debut, quantite, listevaleur) accepte comme argument :
- debut position où commence l'insertion ou suppression.
- quantite, nombre d'éléments a supprimer ou à modifier à partir de debut,
- listevaleur, un ou une liste de valeurs séparées par une ",", attention à l'ordre. Qui correspondent aux éléments à ajouter ou à modifier.

La méthode javascript unshift() renvoie un tableau qui comporte les éléments modifier ou supprimer.
Rien dans le cas d'un ajout.

Exemple de modification :
Exemple de code :
var dmc = [1,2,3,4,5];
  alert(dmc.splice(1,2,"a","b"));
//2,3
  alert(dmc);
//1,a,b,4,5

Exemple de suppression :
Exemple de code :
var dmc = [1,2,3,4,5];
  alert(dmc.splice(1,2));
//2,3
  alert(dmc);
//1,4,5

Exemple de ajout :
Exemple de code :
var dmc = [1,2,3,4,5];
  alert(dmc.splice(1,0,"a","b"));
//
  alert(dmc);
//1,a,b,2,3,4,5

Exemple de modification et ajout :
Exemple de code :
var dmc = [1,2,3,4,5];
  alert(dmc.splice(1,1,"a","b"));
//2
  alert(dmc);
//1,a,b,3,4,5

Inverser l'ordre du tableau

Définition Array.reverse()

Vous pouvez inverser l'ordre des valeurs d'un tableau en utilisant la méthode javascript reverse() de l'objet Array.

La méthode javascript reverse() renvoie le tableau inversé et affecte le tableau sur lequel on a appliqué la méthode

Exemple :
Exemple de code :
var dmc = [1,2,3,4,5,6];
  alert(dmc);
//1,2,3,4,5,6
  alert(dmc.reverse());
//c,2 m,d,5,2,true

Trier

Définition Array.sort()

Vous pouvez trier les valeurs d'un tableau en utilisant la méthode javascript sort(fonctiondetrie) de l'objet Array.

La méthode javascript sort(fonctiondetrie) accepte comme argument :
- fonctiondetrie, nom de la fonction qui va faire le trie,
si cette valeur est omise le trie se fera par ordre alphabétique.

La méthode sort() renvoie une valeur de type Array qui correspond au tableau tiré.

Exemple :
Exemple de code :
var dmc = ["1",3","2","4","5"];
function decroissant(a,b) {
$if(a>b) return -1;
$if(a<b) return 1;
$return 0;
}
function croissant(a,b) {
$if(a>b) return 1;
$if(a<b) return -1;
$return 0;
}

  alert(dmc.sort(decroissant));
//5,4,3,2,1
  alert(dmc);
//5,4,3,2,1


La fonction devra avoir deux arguments que nous appellerons a et b.
Cette dernière devra renvoyer :
Comparaison Ordre croissant Ordre décroissant
a < b -1 1
a = b 0 0
a > b 1 -1

Il est évident que les valeurs du tableau doivent être du même type, car la comparaison sera dépourvue de sens.

Tester si c'est un Array

Définition Array.isArray()

Vous pouvez tester qu'une variable est de type Array en utilisant la méthode javascript isArray() de l'objet Array.

La méthode javascript isArray() renvoie comme valeur de type :
- Booléen, true: c'est un Array.

Exemple :
Exemple de code :
var aArray = [1,2];
  alert(Array.isArray(aArray));
//true

Cependant, la méthode javascript isArray() a été introduite que dans javaScript 1.8.5 et n'est pas reconnue par tous les navigateurs.
Script compatible à mettre en tout premier :
Exemple de code :
(function(){
  "use strict";
  var method = Array.prototype["isArray"];
    if(typeof method != 'function') {
      Array.prototype['isArray'] = function (arg1) {
        return Object.prototype.toString.call(arg1) === "[object Array]";
      };
    }
})();

Tester si une valeur est dans l'Array

Définition Array.indexOf()

Vous pouvez tester si une variable est présente dans l'Array en utilisant la méthode javascript indexOf( Array, Value) de l'objet Array.

La méthode javascript indexOf(Array, Value) accepte comme argument:
- Value, valeur a rechercher dans le tableau.
- Array, Tableau.

La méthode javascript indexOf() renvoie comme valeur de type :
- -1, si pas de résultat.
- un entier, qui représente sa position dans le tableau >=0.

Exemple :
Exemple de code :
var aArray = [1,2];
  alert(Array.indexOf(aArray,2));
//1

Cependant, la méthode javascript indexOf() a été introduite que dans javaScript 1.6 et n'est pas reconnue par tous les navigateurs.
Script compatible à mettre en tout premier :
Exemple de code :
(function(){
  "use strict";
  var method = Array.prototype["indexOf"];
    if(typeof method != 'function') {
      Array.prototype['indexOf'] = function (arg1) {
        for(var i=0,nb=this.length;i<nb;i++){
          if(this[i]===arg1)return i;
        }
        return-1
      }
    }
})();
Chapitre boolean
Chapitre l'objet math