Ajouter et supprimer des éléments
- push() pour ajouter des éléments à la fin du tableau, on "empile".
- pop() pour enlever et renvoyer le dernier élément du tableau, on "dépile".
- shift() pour enlever et renvoyer le premier élément du tableau, avec glissement des indices vers la gauche.
- unshift() pour ajouter des éléments au début du tableau, , avec glissement des indices
Démo
<h2>Illustrons push(), unshift(), shift() et pop()</h2>
<script>
var montab1;
//n tableau de chaînes de caractères
montab1=new Array("Charles", "Roland","Urbain", "Godefroid");
alert(montab1+" ---Nombre de cellules: "+montab1.length);
//On ajoute en fin de tableau
montab1.push("Pierre","Marie","Paul");
alert(montab1+" ---Nombre de cellules: "+montab1.length);
//On ajoute en début de tableau
montab1.unshift("Jacques","Judas");
alert(montab1+" ---Nombre de cellules: "+montab1.length);
//On supprime en fin de tableau
montab1.pop();
alert(montab1+" ---Nombre de cellules: "+montab1.length);
//On supprime en début de tableau
montab1.shift();
alert(montab1+" ---Nombre de cellules: "+montab1.length);
</script>
Chaînes de caractères et tableaux
- split() permet de les découper en un tableau en fonction d'un séparateur.
- join() permet de créer une chaîne de caractères à partir d'un tableau
Démo
<h2>Chaînes et tableaux</h2>
<script>
var machaine,montab;
machaine="Chaîne de caractères en tableau en utilisant l'espace comme séparateur";
//Je transforme cette chaîne en tableau
montab=machaine.split(" ");
alert(montab + " -----Nombre de cellule: "+montab.length);
//Je retransforme en une chaîne
machaine=montab.join(" ");
alert(machaine);
</script>
filter()
Syntaxe
Array montab.filter(callback) //function callback(element,[indice[,tableau])
La méthode filter() retourne un nouveau tableau contenant les éléments du tableaux initial qui répondent à la condition définie dans la fonction passée en paramètre.
3 paramètres pour la fonction de callback:
- element, variable recevant chaque élément du tableau
- indice, l'indice de départ (0 par défaut)
- tableau, le tableau à filtrer
Avec tous les paramètres
Démo
<h2>La méthode filter()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(grandesValeurs,0,mtab);
function grandesValeurs(element){
return element > 10;
}
console.log(mtabFiltre);
</script>
Première syntaxe
Démo
<h2>La méthode filter()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(grandesValeurs);
function grandesValeurs(element){
return element > 10;
}
console.log(mtabFiltre);
</script>
Deuxième syntaxe
Démo
<h2>La méthode filter()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(function(element){
return element > 10;
});
console.log(mtabFiltre);
</script>
Troisième syntaxe
Démo
<h2>La méthode filter()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(element => elemnt > 10);
console.log(mtabFiltre);
</script>
map()
Syntaxe
Array montab.map(callback) //function callback(element)
La méthode map() retourne un nouveau tableau contenant les éléments du tableaux initial auxquels la fonction passée en paramètre a été appliquée.
1 paramètre, element, variable recevant chaque élément du tableau.
Première syntaxe
Démo
<h2>La méthode map()</h2>
<script>
var mtab=['pierre','paul','jacques','mathieu','luc'];
var mtabNew=mtab.map(enMaj);
function enMaj(element){
return element.toUpperCase();
}
console.log(mtabNew);
</script>
Deuxième syntaxe
Démo
<h2>La méthode map()</h2>
<script>
var mtab=[1,5,9,15,22,99,105];
var mtabFiltre=mtab.filter(function(element){
return element > 10;
});
console.log(mtabFiltre);
</script>
Troisième syntaxe
Démo
<h2>La méthode map()</h2>
<script>
var mtab=['pierre','paul','jacques','mathieu','luc'];
var mtabNew=mtab.map(element => element.toUpperCase());
console.log(mtabNew);
</script>
reduce()
Syntaxe
Array montab.reduce(callback) //function callback(accumulateur,element,[indice[,tableau])
La méthode reduce() retourne un et un seul élément.
3 paramètres pour la fonction de callback:
- accumulateur, chaque élément est ajouter à l'accumulateur
- element, variable recevant chaque élément du tableau
- indice, l'indice de départ (0 par défaut)
- tableau, le tableau à filtrer
Première syntaxe
Démo
<h2>La méthode reduce()</h2>
<script>
var mtab=[10,20,30,40,50,60];
var somme=mtab.reduce(addTab);
function addTab(accu,element){
return accu + element;
};
console.log(somme);
</script>
Deuxième syntaxe
Démo
<h2>La méthode reduce()</h2>
<script>
var mtab=[10,20,30,40,50,60];
var somme=mtab.reduce(function(accu,element){
return accu + element;
});
console.log(somme);
</script>
Troisième syntaxe
Démo
<h2>La méthode reduce()</h2>
<script>
var mtab=[10,20,30,40,50,60];
var somme=mtab.reduce((accu,element)=> {return accu+element;});
// ou: var somme=mtab.reduce((accu,element)=> accu+element);
console.log(somme);
</script>
Détail du fonctionnement de reduce()
Démo
<h2>La méthode reduce()</h2>
<script>
var mtab=[10,20,30,40,50,60];
var somme=mtab.reduce(function(accu,element,indice,mtab){
console.log("Indice="+indice+
"accu="+accu+
"/element="+element+
"tableau="+mtab);
return accu + element;
});
console.log(somme);
console.log(typeof somme);
</script>
- accu est initialisée avec la valeur contenue à l'indice 0
- accu est augmenté de la valeur contenue dans la cellule suivante jusqu'à la fin du tableau mtab
- à la fin du tableau reduce() renvoie la valeur contenue dans accu.
- somme est donc un type number
Quiz
Clique-moi pour générer un questionnaire !