Les fonctions : find(), forEach(), reduce(), some(), every()
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.
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.
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.
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.
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;