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:

1. element, variable recevant chaque élément du tableau
2. indice, l'indice de départ (0 par défaut)
3. 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:

1. accumulateur, chaque élément est ajouter à l'accumulateur
2. element, variable recevant chaque élément du tableau
3. indice, l'indice de départ (0 par défaut)
4. 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>

1. accu est initialisée avec la valeur contenue à l'indice 0
2. accu est augmenté de la valeur contenue dans la cellule suivante jusqu'à la fin du tableau mtab
3. à la fin du tableau reduce() renvoie la valeur contenue dans accu.
4. somme est donc un type number

---

Quiz

Clique-moi pour générer un questionnaire !