0% ont trouvé ce document utile (0 vote)
4 vues11 pages

TP JS

Le document présente 10 méthodes de manipulation des tableaux en JavaScript, incluant splice(), slice(), includes(), find(), filter(), map(), sort(), reduce(), indexOf(), et forEach(). Chaque méthode est accompagnée de sa syntaxe, de son rôle et d'exemples d'utilisation. Ces méthodes permettent de modifier, extraire, rechercher, trier et itérer sur les éléments d'un tableau.

Transféré par

ahmedoch42
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
4 vues11 pages

TP JS

Le document présente 10 méthodes de manipulation des tableaux en JavaScript, incluant splice(), slice(), includes(), find(), filter(), map(), sort(), reduce(), indexOf(), et forEach(). Chaque méthode est accompagnée de sa syntaxe, de son rôle et d'exemples d'utilisation. Ces méthodes permettent de modifier, extraire, rechercher, trier et itérer sur les éléments d'un tableau.

Transféré par

ahmedoch42
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

1.

splice()

Syntaxe

javascript

[Link](start, deleteCount, item1, item2, ...)

Rôle

Modifie le contenu d'un tableau en supprimant, remplaçant ou ajoutant des éléments à une
position spécifique.

Exemple

let fruits = ['Pomme', 'Banane', 'Orange', 'Mangue'];

[Link](1, 1);

[Link]('Après suppression:', fruits);

[Link](1, 1, 'Fraise', 'Kiwi');

[Link]('Après remplacement:', fruits);

[Link](2, 0, 'Ananas');

[Link]('Après ajout:', fruits);

Résultat

2. slice()

Syntaxe

javascript

[Link](start, end)
Rôle

Retourne une copie superficielle d'une portion du tableau sans modifier le tableau original.

Exemple

let nombres = [10, 20, 30, 40, 50, 60];

let portion = [Link](1, 4);

[Link]('Portion:', portion);

[Link]('Tableau original:', nombres);

let fin = [Link](2);

[Link]('À partir de l\'index 2:', fin);

let copie = [Link]();

[Link]('Copie complète:', copie);

Résultat

3. includes()

Syntaxe

[Link](valueToFind, fromIndex)

Rôle
Détermine si un tableau contient une valeur donnée, retournant true ou false.

Exemple

let langages = ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'];

[Link]('Contient JavaScript?', [Link]('JavaScript'));

[Link]('Contient PHP?', [Link]('PHP'));

[Link]('Recherche à partir de l\'index 2:', [Link]('Java', 2));

[Link]('Recherche à partir de l\'index 3:', [Link]('Java', 3));

Résultat

4. find()

Syntaxe

[Link](callback(element, index, array), thisArg)

Rôle

Retourne la première valeur du tableau qui satisfait la condition fournie par la fonction de
test.

Exemple

let utilisateurs = [

{ id: 1, nom: 'aymen', age: 25 },


{ id: 2, nom: 'ahmed', age: 36 },

{ id: 3, nom: 'omar', age: 99 },

{ id: 4, nom: 'karim', age: 20 }

];

// Trouver le premier utilisateur avec age > 30

let resultat1 = [Link](user => [Link] > 30);

[Link]('Premier utilisateur > 30 ans:', resultat1);

// Trouver par nom

let resultat2 = [Link](user => [Link] === 'Bob');

[Link]('Utilisateur nommé Bob:', resultat2);

// Si aucun trouvé

let resultat3 = [Link](user => [Link] > 40);

[Link]('Utilisateur > 40 ans:', resultat3);

Résultat

5. filter()

Syntaxe

javascript

[Link](callback(element, index, array), thisArg)


Rôle

Crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la
fonction fournie.

Exemple

let nombres = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let pairs = [Link](n => n % 2 === 0);

[Link]('Nombres pairs:', pairs);

let superieurs = [Link](n => n > 5);

[Link]('Nombres > 5:', superieurs);

let personnes = [

{ nom: 'omar', ville: 'dajlfa' },

{ nom: 'omar', ville: 'dajlfa' },

{ nom: 'omar', ville: 'dajlfa' },

{ nom: 'ahmed', ville: 'kouba' }

];

let parisiens = [Link](p => [Link] === 'Paris');

[Link]('Personnes de Paris:', parisiens);

Résultat

6. map()

Syntaxe
javascript

[Link](callback(element, index, array), thisArg)

Rôle

Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque
élément du tableau.

Exemple

let prix = [55, 25, 355, 60];

let prixAvecTaxe = [Link](p => p * 1.2);

[Link]('Prix avec taxe:', prixAvecTaxe);

let prixFormatte = [Link](p => `${p}€`);

[Link]('Prix formatés:', prixFormatte);

let produits = [

{ nom: 'Laptop', prix: 200 },

{ nom: 'Souris', prix: 25 },

{ nom: 'Clavier', prix: 50 }

];

let nomsProduits = [Link](p => [Link]);

[Link]('Noms des produits:', nomsProduits);

Résultat
7. sort()

Syntaxe

[Link](compareFunction)

Rôle

Trie les éléments d'un tableau sur place et retourne le tableau trié.

Exemple

let fruits = ['Banane', 'Pomme', 'Orange', 'Ananas'];

[Link]();

[Link]('Fruits triés:', fruits);

let nombres = [40, 100, 1, 5, 25, 10];

[Link]();

[Link]('Tri par défaut (problématique):', nombres);

[Link]((a, b) => a - b);

[Link]('Tri croissant:', nombres);

[Link]((a, b) => b - a);

[Link]('Tri décroissant:', nombres);

let personnes = [
{ nom: 'Ahmed', age: 25 },

{ nom: 'omar', age: 30 },

{ nom: 'houssin', age: 20 }

];

[Link]((a, b) => [Link] - [Link]);

[Link]('Tri par âge:', personnes);

Résultat

8. reduce()

Syntaxe

[Link](callback(accumulator, currentValue, index, array), initialValue)

Rôle

Applique une fonction sur un accumulateur et chaque élément du tableau pour le réduire à
une seule valeur.

Exemple

let nombres = [1, 2, 3, 4, 5];

let somme = [Link]((acc, val) => acc + val, 0);

[Link]('Somme:', somme);

let produit = [Link]((acc, val) => acc * val, 1);

[Link]('Produit:', produit);

let maximum = [Link]((acc, val) => [Link](acc, val), -Infinity);


[Link]('Maximum:', maximum);

let mots = ['pomme', 'banane', 'pomme', 'orange', 'banane', 'pomme'];

let compteur = [Link]((acc, mot) => {

acc[mot] = (acc[mot] || 0) + 1;

return acc;

}, {});

[Link]('Compteur de mots:', compteur);

Résultat

9. indexOf()

Syntaxe

[Link](searchElement, fromIndex)

Rôle

Retourne le premier index auquel on peut trouver un élément donné dans le tableau, ou -1
s'il n'est pas présent.

Exemple

let couleurs = ['rouge', 'vert', 'bleu', 'vert', 'jaune'];

[Link]('Index de "bleu":', [Link]('bleu'));

[Link]('Index de "vert":', [Link]('vert'));

[Link]('Index de "vert" à partir de l\'index 2:', [Link]('vert', 2));

[Link]('Index de "noir":', [Link]('noir'));

let recherche = 'vert';


let index = [Link](recherche);

if (index !== -1) {

[Link](`"${recherche}" trouvé à l'index ${index}`);

} else {

[Link](`"${recherche}" non trouvé`);

Résultat

10. forEach()

Syntaxe

[Link](callback(currentValue, index, array), thisArg)

Rôle

Exécute une fonction donnée sur chaque élément du tableau.

Exemple

let nombres = [1, 2, 3, 4, 5]

[Link]('Affichage des éléments:');

[Link]((nombre, index) => {

[Link](`Index ${index}: ${nombre}`);

});

let carres = [];

[Link](n => {
[Link](n * n);

});

[Link]('Carrés:', carres);

let personnes = [

{ nom: 'omar', actif: false },

{ nom: 'koko', actif: true },

{ nom: 'abdou', actif: false }

];

[Link](personne => {

[Link] = true;

});

[Link]('Personnes après modification:', personnes);

Résultat

Vous aimerez peut-être aussi