Opération sur les tableaux en Javascript
Sommaire
- 1- Objectifs
- 2- Modification d'un élément
- 3- Ajout d'élément
- 3.1- Ajout d'élément au début du tableau
- 3.2- Ajout d'élément à la fin du tableau
- 4- Retrait d'élément
- 4.1- Supprimer le premier élément d'un tableau
- 4.2- Supprimer le dernier élément d'un tableau en JavaScript
- 4.3- Supprimer un élément à partir d'un index
- 4.4- Supprimer des éléments à partir d'un index
- 5- L'accès à une cellule d'un tableau JavaScript
- 6- Rechercher un élément dans le tableau JavaScript
- 6.1- Exemple
- 6.2- Activité
- 6.3- Solution
- 6.3.1- Sommaire du cours JavaScript
Opération sur les tableaux en Javascript
-
Objectifs
- Etre capable de faire des mise à jour sur les tableaux en JavaScript
-
Modification d’un élément
-
var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine'); - Pour modifier le texte « Nour » par « Noura » en écrit:
-
mon_tableau[0]="Noura"; - Nom du table[indice de l’élément à changer]=le nouveau élément
-
Ajout d’élément
-
Ajout d’élément au début du tableau
- La méthode unshift () ajoute de nouveaux éléments au début d’un tableau et renvoie la nouvelle longueur.
- Syntaxe
-
array.unshift(item1, item2, ..., itemX) - Pour ajouter un élément au tableau utilisez le mot clé unshift
-
var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine'); - Ajoutez le nom « Marwen » à votre tableau
-
mon_tableau.unshift("Marwen"); -
Ajout d’élément à la fin du tableau
- La méthode push () ajoute de nouveaux éléments à la fin d’un tableau et renvoie la nouvelle longueur.
- Syntaxe
-
array.push(item1, item2, ..., itemX) - Pour ajouter un élément au tableau utilisez le mot clé push
-
var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine'); - Ajoutez le nom « Marwen » à la fin de votre tableau
-
mon_tableau.push("Marwen"); -
Retrait d’élément
-
Supprimer le premier élément d’un tableau
- La méthode shift () supprime le premier élément d’un tableau et renvoie cet élément.
- Syntaxe
-
array.shift() - Pour supprimer le premier élément d’un tableau utilisez le mot clé shift
-
var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine'); - Supprimez le le dernier élément du tableau en JavaScript
-
mon_tableau.shift(); -
Supprimer le dernier élément d’un tableau en JavaScript
- La méthode pop () supprime le dernier élément d’un tableau et renvoie cet élément.
- Syntaxe
-
array.pop() - Pour supprimer le dernier élément d’un tableau utilisez le mot clé pop
-
var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine'); - Supprimez le le dernier élément du tableau
-
mon_tableau.pop(); -
Supprimer un élément à partir d’un index
-
Supprimer des éléments à partir d’un index
-
L’accès à une cellule d’un tableau JavaScript
- On accède à l’une des valeurs d’un tableau en mentionnant le nom du tableau suivi du numéro de la cellule entre crochets, en numérotant les cellules à partir de 0
-
Rechercher un élément dans le tableau JavaScript
- Souvent, on a besoin d’un ou plusieurs éléments de notre tableau qui remplissent une condition.
- Une première approche est d’utiliser la méthode
findIndex()qui permet de remonter l’indice du premier élément de notre tableau qui rempli une condition. -
Exemple
- La méthode
findIndex()renvoie l’indice du premier élément du tableau qui satisfait une condition donnée par une fonction. Si la fonction renvoie faux pour tous les éléments du tableau, le résultat vaut -1. -
Activité
- Soit le tableau suivant:
var ages = [3, 10, 18, 20, 12]; - Utilisez la méthode
findIndex ()pour obtenir l’index du premier élément du tableau qui a une valeur de 18 ou plus - Cliquez sur un bouton pour afficher l’index du premier élément du tableau qui a une valeur de 18 ou plus.
-
Solution
var mon_tableau = ['Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine'];
console.log(mon_tableau );
// ["Nour", "Salah", "Mourad", "Alexendar", "Lamia", "Sabrine"]
var pos = 2;
var supprimerElement = mon_tableau.splice(pos,1);
console.log(mon_tableau);
// ["Nour", "Salah", "Alexendar", "Lamia", "Sabrine"]
var mon_tableau = ['Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine'];
console.log(mon_tableau );
// ["Nour", "Salah", "Mourad", "Alexendar", "Lamia", "Sabrine"]
var pos = 1, n = 2;
var supprimerElement = mon_tableau.splice(pos, n);
// n définit le nombre d'éléments à supprimer,
// à partir de la position pos
console.log(mon_tableau);
// ["Nour", "Alexendar", "Lamia", "Sabrine"] (le tableau d'origine est changé)
console.log(supprimerElement);
// ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)
La méthode
findIndex ()renvoie l’index du premier élément d’un tableau qui passe un test (fourni en tant que fonction).
function findC(element) {
return element === 'C';
}
let tableau = ['A', 'B', 'C', 'D', 'C'];
tableau.findIndex(findC);
// Retourne 2, l'indice de notre premier C<!DOCTYPE html>
<html>
<body>
<p>Cliquez sur le bouton pour vérifier obtenir l'index
du premier élément du tableau qui a une valeur de 18 ou plus.</p>
<button onclick="myFunction()">Essayer</button>
<p id="demo"></p>
<p><strong>Remarque:</strong> La méthode findIndex () n'est pas prise en
charge dans IE 11 (et les versions antérieures).</p>
<script>
var ages = [3, 10, 18, 20, 12];
function rechercher(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.findIndex(rechercher);
}
</script>
</body>
</html>
