Les fonctions : find(), forEach(), reduce(), some(), every()

1. find()
La méthode find() est utilisée pour trouver la première occurrence dans un tableau qui satisfait une condition donnée.

import React from 'react';

function App() {
    const numbers = [10, 20, 30, 40, 50];

    // Utilisation de find() pour trouver le premier nombre supérieur à 25
    const foundNumber = numbers.find((number) => number > 25);

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode find()</h1>
            <p>Le premier nombre supérieur à 25 est : {foundNumber}</p>
        </div>
    );
}

export default App;

Dans cet exemple, find() est utilisé pour trouver le premier nombre dans le tableau numbers qui est supérieur à 25.
Avec un tableau d'objet

import React from 'react';

function App() {
    const initialStudents = [
        { id: 1, name: "Ahmed", age: 20, city: "Casablanca", grade: 15, active: true },
        { id: 2, name: "Sara", age: 22, city: "Rabat", grade: 17, active: true },
        { id: 3, name: "Youssef", age: 19, city: "Fes", grade: 9, active: false },
        { id: 4, name: "Nadia", age: 21, city: "Marrakech", grade: 14, active: true }
    ];

    const foundStudent = initialStudents.find(
        (student) => student.city === "Casablanca"
    );

    return (
        <div>
            <h1>Exemple d'utilisation de find()</h1>

            <p>
                L'étudiant de Casablanca est : {foundStudent.name}
            </p>

            <p>
                Note : {foundStudent.grade}
            </p>
        </div>
    );
}

export default App;

2. forEach()
La méthode forEach() exécute une fonction donnée une fois pour chaque élément du tableau.

import React from 'react';

function App() {
    const fruits = ['Apple', 'Banana', 'Orange'];

    // Utilisation de forEach() pour afficher chaque fruit
    const displayFruits = [];
    fruits.forEach((fruit, index) => {
        displayFruits.push(<li key={index}>{fruit}</li>);
    });

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode forEach()</h1>
            <ul>{displayFruits}</ul>
        </div>
    );
}

export default App;

Dans cet exemple, forEach() est utilisé pour parcourir le tableau fruits et créer une liste <li> pour chaque fruit.
Avec un tableau d'objet

import React from 'react';

function App() {
    const initialStudents = [
        { id: 1, name: "Ahmed", age: 20, city: "Casablanca", grade: 15, active: true },
        { id: 2, name: "Sara", age: 22, city: "Rabat", grade: 17, active: true },
        { id: 3, name: "Youssef", age: 19, city: "Fes", grade: 9, active: false },
        { id: 4, name: "Nadia", age: 21, city: "Marrakech", grade: 14, active: true }
    ];

    // Utilisation de forEach() pour afficher les étudiants actifs
    const displayStudents = [];

    initialStudents.forEach((student, index) => {
        if (student.active) {
            displayStudents.push(
                <li key={index}>
                    {student.name} - Actif
                </li>
            );
        }
    });

    return (
        <div>
            <h1>Étudiants actifs</h1>

            <ul>
                {displayStudents}
            </ul>
        </div>
    );
}

export default App;

3. reduce(): La méthode reduce() applique une fonction sur chaque élément du tableau pour le réduire à une seule valeur.

import React from 'react';

function App() {
    const numbers = [1, 2, 3, 4, 5];

    // Utilisation de reduce() pour calculer la somme des nombres
    const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode reduce()</h1>
            <p>La somme des nombres est : {sum}</p>
        </div>
    );
}

export default App;

Dans cet exemple, reduce() est utilisé pour calculer la somme des nombres dans le tableau numbers.
Avec un tableau d'objet

import React from 'react';

function App() {
    const initialStudents = [
        { id: 1, name: "Ahmed", age: 20, city: "Casablanca", grade: 15, active: true },
        { id: 2, name: "Sara", age: 22, city: "Rabat", grade: 17, active: true },
        { id: 3, name: "Youssef", age: 19, city: "Fes", grade: 9, active: false },
        { id: 4, name: "Nadia", age: 21, city: "Marrakech", grade: 14, active: true }
    ];

    // Utilisation de reduce() pour calculer la moyenne
    const totalGrades = initialStudents.reduce(
        (total, student) => total + student.grade,
        0
    );

    const average = totalGrades / initialStudents.length;

    return (
        <div>
            <h1>Moyenne des étudiants</h1>

            <p>
                La moyenne des notes est : {average}
            </p>
        </div>
    );
}

export default App;

4. some(): La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie.

import React from 'react';

function App() {
    const numbers = [10, 20, 30, 40, 50];

    // Utilisation de some() pour vérifier s'il existe un nombre supérieur à 25
    const hasNumberGreaterThan25 = numbers.some((number) => number > 25);

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode some()</h1>
            <p>Y a-t-il un nombre supérieur à 25 ? {hasNumberGreaterThan25 ? 'Oui' : 'Non'}</p>
        </div>
    );
}

export default App;

Dans cet exemple, some() est utilisé pour vérifier s'il existe au moins un nombre dans le tableau numbers qui est supérieur à 25.
Avec un tableau d'objet

import React from 'react';

function App() {
    const initialStudents = [
        { id: 1, name: "Ahmed", age: 20, city: "Casablanca", grade: 15, active: true },
        { id: 2, name: "Sara", age: 22, city: "Rabat", grade: 17, active: true },
        { id: 3, name: "Youssef", age: 19, city: "Fes", grade: 9, active: false },
        { id: 4, name: "Nadia", age: 21, city: "Marrakech", grade: 14, active: true }
    ];

    // Utilisation de some() pour vérifier
    // s'il existe un étudiant ayant une note supérieure à 15
    const hasStudent = initialStudents.some(
        (student) => student.grade > 15
    );

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode some()</h1>

            <p>
                Y a-t-il un étudiant avec une note supérieure à 15 ?
                {hasStudent ? ' Oui' : ' Non'}
            </p>
        </div>
    );
}

export default App;

5. every(): La méthode every() teste si tous les éléments du tableau passent le test implémenté par la fonction fournie.

import React from 'react';

function App() {
    const numbers = [10, 20, 30, 40, 50];

    // Utilisation de every() pour vérifier si tous les nombres sont supérieurs à 5
    const areAllNumbersGreaterThan5 = numbers.every((number) => number > 5);

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode every()</h1>
            <p>Tous les nombres sont-ils supérieurs à 5 ? {areAllNumbersGreaterThan5 ? 'Oui' : 'Non'}</p>
        </div>
    );
}

export default App;